/* =============================================================================
   amrp.css — A.M. Referral Partners site stylesheet (shared by EVERY page)
   =============================================================================
   Written 2026-09-30 (Phase 1 — Foundation).

   SOURCE OF TRUTH: the approved mockup docs/plans/home/home-mockup-v1.html,
   <style> sections 1–3 (tokens, base, header) and 9 (footer), plus the
   sunrise BANNER from docs/plans/members/members-mockup-v1.html (M1), the
   Members-Only "current page" pill from the Our Story / Members-Only mockups,
   and the member chip (.mchip) from docs/plans/events/event-page-mockup-v1.html.

   HOW IT IS LOADED
     builder/layouts/default.twig → {{ cms.builder.css('css/amrp.css') }}
     which prints /assets/css/amrp.css?v=<file modified time>, so browsers
     fetch the new file automatically after every deploy.

   HOW IT IS ORGANISED — MOBILE FIRST
     Every rule in sections 1–9 is the PHONE layout. Wider screens are layered
     on at the bottom with min-width media queries:
       §10 TABLET  ≥ 700px
       §11 DESKTOP ≥ 1000px
     Page-specific styles (home stats, members cards, …) are added by later
     phases in their own clearly labelled sections BELOW §9 and ABOVE §10,
     so the breakpoints always stay at the end of the file.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS — the palette comes straight from the logo's fills
   ============================================================================= */
:root{
  --ink:    #040302;  /* logo outline — near-black, body text                  */
  --gold:   #FFC400;  /* logo sun — brightest accent (primary buttons)         */
  --amber:  #EBA100;  /* logo — secondary warm accent; "below target" status   */
  --orange: #C25700;  /* logo — links, eyebrows, "next meeting" marker         */
  --red:    #9C1100;  /* logo — holidays / cancelled meetings; probation       */
  --teal:   #033637;  /* logo — header bar, footer, headings; "on track"       */
  --cream:  #F1F4E3;  /* logo — page background; light text on teal            */

  --paper:  #FBFBF5;  /* card surface, a touch lighter than cream              */
  --muted:  #5b5f55;  /* secondary text                                        */
  --line:   #d9dccb;  /* hairline borders                                      */

  --radius: 14px;
  --shadow: 0 6px 24px rgba(3,54,55,.12);
  --wrap:   1120px;   /* max content width on desktop                          */
  --header-h: 64px;   /* sticky header height (the phone menu drops below it)  */
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
}


/* =============================================================================
   2. BASE
   ============================================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* anchors (e.g. /#seat) land BELOW the sticky header instead of under it */
:target{scroll-margin-top:calc(var(--header-h) + 12px)}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.55;
     color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
a{color:var(--orange)}
h1,h2,h3{font-family:var(--font-head);color:var(--teal);line-height:1.15;margin:0 0 .5em}
h2{font-size:1.9rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
section{padding:56px 0}
/* small orange uppercase label above a heading */
.eyebrow{font-weight:700;letter-spacing:.12em;text-transform:uppercase;
         font-size:.78rem;color:var(--orange);margin:0 0 .4em}
.lead{font-size:1.12rem;max-width:62ch}

/* Visually hidden but still read by screen readers (used for the skip link). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* "Skip to content" — invisible until a keyboard user tabs to it */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);
  padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip-link:focus{top:10px}

/* People who ask their OS for reduced motion: no smooth scrolling either */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* =============================================================================
   3. HEADER — sticky teal bar: logo + name left, menu right (hamburger on phones)
      Markup: builder/partials/header.twig
   ============================================================================= */
.site-header{position:sticky;top:0;z-index:50;background:rgba(3,54,55,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--cream)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none}
/* cream circle behind the logo so its dark outline shows on the teal bar */
.brand img{width:44px;height:44px;border-radius:50%;background:var(--cream)}
.brand span{font-family:var(--font-head);font-size:1.1rem;line-height:1.1}
.brand small{display:block;font-family:var(--font-body);font-size:.72rem;opacity:.8;letter-spacing:.04em}

/* Hamburger (phones + tablets). A hidden checkbox + <label> opens the menu, so
   the menu works even if JavaScript fails. amrp.js only adds niceties
   (Escape closes it, aria-expanded stays accurate). */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-btn{cursor:pointer;padding:10px;margin-right:-10px}
.nav-btn span,.nav-btn span::before,.nav-btn span::after{display:block;width:24px;height:2px;
  background:var(--cream);position:relative;content:"";transition:.2s}
.nav-btn span::before{position:absolute;top:-7px}
.nav-btn span::after{position:absolute;top:7px}
/* keyboard users see a ring on the hamburger when the hidden checkbox is focused */
.nav-toggle:focus-visible + .nav-btn{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
/* open state: the three bars turn into an ✕ */
.nav-toggle:checked + .nav-btn span{background:transparent}
.nav-toggle:checked + .nav-btn span::before{top:0;transform:rotate(45deg)}
.nav-toggle:checked + .nav-btn span::after{top:0;transform:rotate(-45deg)}

.site-nav{position:absolute;top:var(--header-h);left:0;right:0;background:var(--teal);
  display:none;flex-direction:column;padding:8px 18px 18px}
.nav-toggle:checked ~ .site-nav{display:flex}
.site-nav a{color:var(--cream);text-decoration:none;padding:12px 4px;font-weight:600;
  border-bottom:1px solid rgba(241,244,227,.12)}
.site-nav a:hover{color:var(--gold)}
.site-nav a[aria-current]{color:var(--gold)}
/* "Members Only 🔒" — gold pill. When you are IN the Members-Only area it
   keeps ink text and gains a cream ring (so it doesn't turn gold-on-gold). */
.site-nav .members-only{margin-top:12px;border:0;text-align:center;border-radius:999px;
  background:var(--gold);color:var(--ink);padding:12px 18px}
.site-nav .members-only:hover{color:var(--ink);filter:brightness(1.05)}
.site-nav .members-only[aria-current]{color:var(--ink);box-shadow:0 0 0 2px var(--cream)}


/* =============================================================================
   4. BUTTONS — .btn pill + one colour class
   ============================================================================= */
.btn{display:inline-block;border-radius:999px;padding:13px 22px;font-weight:700;
  text-decoration:none;margin:0 8px 10px 0;font-family:inherit;font-size:inherit;line-height:1.2;
  cursor:pointer;border:0}
.btn-gold{background:var(--gold);color:var(--ink)}                           /* primary */
.btn-ghost{border:2px solid rgba(255,255,255,.8);color:#fff;background:none}  /* on photos */
.btn-ghost-dark{border:2px solid var(--teal);color:var(--teal);background:none} /* on cream */
.btn-ghost-light{border:2px solid var(--cream);color:var(--cream);background:none} /* on teal */
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}


/* =============================================================================
   5. HOME HERO — short band (≈25% of the window) with a slow cross-fading
      sunrise slideshow (pure CSS, 5 images, 40 s loop).
      Markup: builder/pages/home.twig. Phase 2 fills in the rest of Home.
   ============================================================================= */
.hero{position:relative;height:25vh;min-height:190px;display:flex;align-items:center;
  color:#fff;overflow:hidden;background:var(--teal);padding:0}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:heroFade 40s infinite;transform-origin:center}
/* each slide starts 8 s after the previous one; 5 × 8 s = 40 s cycle.
   (Paths are relative to THIS file: /assets/css/ → /assets/img/.) */
.hero .slide:nth-child(1){background-image:url(../img/sunrise-5.jpg);animation-delay:0s}
.hero .slide:nth-child(2){background-image:url(../img/sunrise-1.jpg);animation-delay:8s}
.hero .slide:nth-child(3){background-image:url(../img/sunrise-2.jpg);animation-delay:16s}
.hero .slide:nth-child(4){background-image:url(../img/sunrise-3.jpg);animation-delay:24s}
.hero .slide:nth-child(5){background-image:url(../img/sunrise-4.jpg);animation-delay:32s}
@keyframes heroFade{            /* fade in, hold with a very slow zoom, fade out */
  0%  {opacity:0;transform:scale(1.00)}
  5%  {opacity:1}
  20% {opacity:1}
  25% {opacity:0;transform:scale(1.08)}
  100%{opacity:0}
}
/* dark gradient at the bottom so the white text is always readable */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,54,55,.15) 0%,rgba(3,54,55,.25) 45%,rgba(4,3,2,.78) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:18px;padding-top:18px;width:100%}
/* the ORGANIZATION NAME is the big headline; the tagline sits under it */
.hero h1{color:#fff;font-size:2.1rem;margin-bottom:2px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero .tagline{font-family:var(--font-head);font-style:italic;font-size:1.15rem;
  color:var(--gold);margin:0;text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* "Every Thursday · 8:00 AM · Arlington, TX" — hidden on phones to keep the
   short band uncluttered, shown on tablet/desktop (§10) */
.hero .eyebrow{color:var(--gold);margin:0 0 4px;display:none;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* reduced motion: one still image, no cross-fade */
@media (prefers-reduced-motion:reduce){
  .hero .slide{animation:none}
  .hero .slide:nth-child(1){opacity:1}
}


/* =============================================================================
   6. INNER-PAGE BANNER — same sunrise, one still image (~22% of the window),
      page title + gold italic subtitle.
      Markup: builder/partials/banner.twig
   ============================================================================= */
.banner{position:relative;height:22vh;min-height:170px;display:flex;align-items:center;color:#fff;
  background:var(--teal) url(../img/sunrise-2.jpg) center/cover;padding:0}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,54,55,.25),rgba(4,3,2,.7))}
.banner .wrap{position:relative;z-index:2;width:100%}
.banner h1{color:#fff;font-size:2.2rem;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.banner p{margin:4px 0 0;color:var(--gold);font-family:var(--font-head);font-style:italic;font-size:1.1rem;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}


/* =============================================================================
   7. MEMBER CHIP (.mchip) — white pill: round photo (initials if no photo) +
      name in teal (+ optional company line). Links to the member's page.
      Markup: builder/macros/mchip.twig
   ============================================================================= */
.mchips{display:flex;flex-wrap:wrap;gap:8px}
.mchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:3px 12px 3px 3px;font-size:.86rem;font-weight:600;color:var(--teal);
  text-decoration:none;line-height:1.2}
a.mchip:hover{border-color:var(--gold);background:#fff8dc}
.mchip img,.mchip .ini{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.mchip .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.75rem}
.mchip small{display:block;font-weight:400;color:var(--muted);font-size:.76rem}


/* =============================================================================
   8. ATTENDANCE STATUS COLOURS — used by reports, dashboards, member lists.
      75%+ on track (teal) · above 50% below target (amber) · 50% or less
      probation (red). The % is ALWAYS the member's entire record.
   ============================================================================= */
.status-ok   {color:var(--teal)}
.status-low  {color:var(--amber)}
.status-prob {color:var(--red)}
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;color:#fff}
.badge.status-ok  {background:var(--teal);color:var(--cream)}
.badge.status-low {background:var(--amber);color:var(--ink)}
.badge.status-prob{background:var(--red);color:#fff}


/* =============================================================================
   9. FOOTER — gold top rule, large logo, meeting details, links, policies,
      social icons (read from the Site SEO record's Social Profiles list), ©.
      Markup: builder/partials/footer.twig
   ============================================================================= */
.site-footer{background:var(--teal);color:var(--cream);padding:40px 0 28px;font-size:.95rem;
  border-top:4px solid var(--gold)}
.site-footer a{color:var(--cream);text-decoration:none;opacity:.85}
.site-footer a:hover{opacity:1;color:var(--gold)}
.foot-grid{display:grid;gap:24px}
.foot-grid h2,.foot-grid h3{color:var(--gold);font-size:1.05rem}
/* large logo — cream circle so the dark outline shows on teal */
.foot-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.foot-logo{width:160px;height:160px;border-radius:50%;background:var(--cream);padding:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.35)}
.foot-brand p{margin:0}
.foot-links{list-style:none;padding:0;margin:0;columns:2}
.foot-links.one-col{columns:1}
.foot-links li{padding:3px 0}
/* social icons: round cream-outlined buttons */
.foot-social{display:flex;gap:10px;margin:14px 0 0;padding:0;list-style:none;justify-content:center}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(241,244,227,.4);font-size:1.05rem;opacity:1}
.foot-social a:hover{border-color:var(--gold)}
.copy{border-top:1px solid rgba(241,244,227,.15);margin-top:26px;padding-top:16px;font-size:.82rem;opacity:.75}


/* -----------------------------------------------------------------------------
   PAGE-SPECIFIC SECTIONS GO HERE (Phase 2+), each with its own numbered
   header, e.g. "P1. HOME — stats + where we meet". Keep §10/§11 last.
   ----------------------------------------------------------------------------- */

/* =============================================================================
   P1. HOME — sections below the hero (home-mockup-v1.html §5–§8b)
       Markup: builder/pages/home.twig. Tablet/desktop rules live in §10/§11.
   ============================================================================= */

/* --- P1a. Who we are: foggy-morning background, lead text, stat tiles --- */
.about{position:relative;background:url(../img/bg008.jpg) center/cover}
.about::before{content:"";position:absolute;inset:0;background:rgba(241,244,227,.86)}
.about .wrap{position:relative}
/* Stat tiles — money tile full width; the 6 counts are 2 across on phones,
   3 on tablets, 6 on desktop (always even rows, no orphan tile) */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:28px 0}
.stat{background:var(--paper);border-radius:var(--radius);padding:16px 14px;
  box-shadow:var(--shadow);border-top:4px solid var(--gold)}
.stat b{display:block;font-family:var(--font-head);font-size:1.6rem;color:var(--teal)}
.stat span{font-size:.85rem;color:var(--muted)}
.stat.money{grid-column:1/-1;border-top-color:var(--orange)}
.stat.money b{font-size:2.1rem;color:var(--orange)}
/* money tile: all-time total AND the weekly average side by side
   (stacks on very narrow phones). Average = total ÷ whole weeks since founding. */
.money-row{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:flex-end}
.money-row > div{min-width:0}
.money-row .avg{padding-left:26px;border-left:2px solid var(--line)}
.money-row .avg b{font-size:1.6rem;color:var(--teal)}
@media (max-width:420px){ .money-row .avg{padding-left:0;border-left:0} }

/* --- P1b. Where we meet: photo · schedule · live map (stacked on phones) --- */
.meet{display:grid;gap:18px}
.meet .card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.meet .card .pad{padding:18px 20px}
.meet img{width:100%;height:220px;object-fit:cover}
.gmap{display:block;width:100%;height:260px;border:0}
.schedule{list-style:none;padding:0;margin:10px 0 0}
.schedule li{display:flex;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.schedule time{font-weight:700;color:var(--teal);min-width:74px}

/* --- P1c. Speaker calendar: CSS columns — 1 phone, 2 tablet, 3 desktop --- */
.speakers{background:var(--paper)}
/* Phase 8 part 7 — the scrolling speaker list (speaker-scheduler-mockup-v3 panel 15) */
.speakers .sp-intro{color:var(--muted);margin:0 0 12px}
.speakers .sched{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto;border-radius:12px;background:#fff;position:relative;border:1px solid var(--line);max-width:760px}
.speakers .sched li{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.speakers .sched li.past{color:#8a8d82;background:#f6f7f1} .speakers .sched li.past b{font-weight:600}
.speakers .sched li.past a{color:inherit}
.speakers .sched li.next{background:#fff6d1;box-shadow:inset 5px 0 0 var(--gold)}
.speakers .sched .dt{font-weight:700;font-size:.9rem}
/* label classes are k-none / k-cancelled / k-special — never a bare "none" (the site-wide .none hides it) */
.speakers .sched .lbl{color:var(--red);font-weight:600} .speakers .sched .lbl.k-special{color:var(--orange)}
.speakers .sched .tba{color:var(--muted);font-style:italic}
.speakers .sched .nx{background:var(--gold);color:var(--ink);border-radius:999px;padding:1px 9px;font:700 .72rem var(--font-body)}
.speakers .sched li.yr{display:block;background:var(--teal);color:var(--gold);font:700 .8rem var(--font-body);padding:5px 14px}
.speakers .sched:focus{outline:3px solid var(--gold);outline-offset:2px}
.speakers .sched-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px;max-width:760px}
@media (max-width:520px){.speakers .sched li{grid-template-columns:1fr auto}.speakers .sched li .dt{grid-column:1/-1}}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.85rem;color:var(--muted);margin-bottom:18px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.speaker-list{list-style:none;margin:0;padding:0;columns:1;column-gap:28px}
/* Each month (heading + its meetings) is one unbreakable block, so a month
   never splits across two columns. */
.speaker-list .month-block{break-inside:avoid;display:block;padding:0 0 4px}
.speaker-list .month-block ul{list-style:none;margin:0;padding:0}
.speaker-list .month{display:block}
.speaker-list .month-block li{display:flex;gap:12px;align-items:baseline;
  padding:8px 10px;border-bottom:1px solid var(--line);border-radius:8px}
.speaker-list time{font-weight:700;color:var(--teal);min-width:62px;font-variant-numeric:tabular-nums}
.speaker-list .month{margin:14px 0 4px;padding:0 10px;border:0;
  font-family:var(--font-head);font-size:1.05rem;color:var(--orange)}
.speaker-list li.past{opacity:.55}
.speaker-list li.holiday{color:var(--red);font-weight:600}
.speaker-list li.holiday time{color:var(--red)}
.speaker-list li.special{color:var(--orange);font-weight:600}
.speaker-list li.next{background:var(--gold);opacity:1}
.speaker-list li.next::after{content:"Next";margin-left:auto;font-size:.72rem;font-weight:700;
  text-transform:uppercase;background:var(--ink);color:var(--gold);padding:2px 8px;border-radius:999px}

/* --- P1d. Agenda + meeting photos --- */
.agenda-grid{display:grid;gap:22px}
.agenda{counter-reset:item;list-style:none;padding:0;margin:0}
.agenda li{counter-increment:item;display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.agenda li::before{content:counter(item);flex:0 0 28px;height:28px;border-radius:50%;
  background:var(--teal);color:var(--cream);font-weight:700;font-size:.85rem;
  display:grid;place-items:center}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photos img{border-radius:var(--radius);height:260px;width:100%;object-fit:cover;box-shadow:var(--shadow)}

/* --- P1e. Leadership team (rows come from the Site SEO record) --- */
.leaders{background:url(../img/bg010.jpg) center/cover;position:relative}
.leaders::before{content:"";position:absolute;inset:0;background:rgba(241,244,227,.9)}
.leaders .wrap{position:relative}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.person{background:var(--paper);border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow);
  color:var(--ink);text-decoration:none;display:block}
a.person:hover{outline:2px solid var(--gold)}
.person .avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 10px;
  background:linear-gradient(135deg,var(--gold),var(--orange));display:grid;place-items:center;
  color:#fff;font-family:var(--font-head);font-size:1.6rem;overflow:hidden;
  border:3px solid var(--gold);box-shadow:0 3px 10px rgba(3,54,55,.2)}
.person .avatar img{width:100%;height:100%;object-fit:cover}
.person b{display:block}
.person span{font-size:.85rem;color:var(--muted)}
.person.lead{border-top:4px solid var(--gold)}

/* --- P1f. "Is there a seat for you?" — teal band + inquiry form --- */
.join{background:var(--teal);color:var(--cream)}
.join h2{color:var(--cream)}
.join .eyebrow{color:var(--gold)}
.join-grid{display:grid;gap:26px}
.steps{list-style:none;padding:0;margin:16px 0}
.steps li{display:flex;gap:12px;padding:8px 0}
.steps b{flex:0 0 28px;height:28px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;font-size:.85rem}
.chairs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.chairs li{border:1px solid rgba(241,244,227,.35);border-radius:999px;padding:4px 12px;font-size:.88rem}
.inquiry{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.inquiry h3{margin-bottom:.8em}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px}
.field label small{font-weight:400;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;font:inherit;padding:11px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.two{display:grid;gap:0 14px}
.inquiry .btn{width:100%;font-size:1rem}
.fineprint{font-size:.82rem;color:var(--muted);margin:10px 0 0}
/* Result message after sending (ok = green-teal, bad = red) */
.form-msg{border-radius:10px;padding:12px 14px;margin:0 0 16px;font-weight:600;font-size:.95rem}
.form-msg.ok{background:#e6f2ef;color:var(--teal);border:1px solid #b8d8d0}
.form-msg.bad{background:#f8e7e3;color:var(--red);border:1px solid #e6bfb6}
/* Our message under a web-address field (amrp.js § 2, Phase 5 part 4) — every page. Red #9C1100 on white = 8.4:1. */
.url-msg{color:var(--red);font-size:.88rem;font-weight:600;margin:4px 0 8px;line-height:1.35}
input[aria-invalid=true]{border-color:var(--red) !important;outline-color:var(--red)}
/* The hidden trap field: invisible to people (and screen readers skip it),
   but bots that fill every field fill it — the server then ignores the post. */
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* =============================================================================
   P2. MEMBERS PAGE (members-mockup-v1.html M2–M4)
       Markup: builder/pages/members.twig · behaviour: js/members.js
   ============================================================================= */
/* --- P2a. Intro + search --- */
.intro{padding:34px 0 10px}
.intro p{max-width:64ch}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 6px}
.search{flex:1 1 260px;position:relative}
.search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{width:100%;font:inherit;padding:12px 14px 12px 40px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper)}
.search input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.count{font-size:.9rem;color:var(--muted)}

/* --- P2b. Member cards — 1 column phone, 2 tablet, 3 desktop; equal height per row --- */
.grid{display:grid;gap:18px;padding:18px 0 60px;align-items:stretch}
.member{scroll-margin-top:84px}                     /* #m-<id> lands below the sticky header */
.member.flash{animation:flash 2.4s ease-out}        /* the gold glow for deep links */
@keyframes flash{0%,40%{box-shadow:0 0 0 4px var(--gold),var(--shadow)}100%{box-shadow:var(--shadow)}}
@media (prefers-reduced-motion:reduce){ .member.flash{animation:none;box-shadow:0 0 0 4px var(--gold),var(--shadow)} }
.member{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;
  display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--gold)}
.member[hidden]{display:none}
.m-head{display:flex;gap:14px;align-items:center}
.m-photo-link{flex:0 0 84px}
.m-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 84px;
  border:3px solid var(--gold);box-shadow:0 3px 10px rgba(3,54,55,.2)}
.m-ini{display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-size:1.6rem;
  background:linear-gradient(135deg,var(--gold),var(--orange))}
.member h3{margin:0;font-size:1.3rem}
.member h3 a{color:var(--teal);text-decoration:none}
.member h3 a:hover{color:var(--orange);text-decoration:underline}
.m-co{margin:0;font-size:.92rem;color:var(--teal);font-weight:600}
.m-company{margin:2px 0 0;font-weight:600;color:var(--muted)}
.m-chair{align-self:flex-start;background:var(--teal);color:var(--cream);font-size:.8rem;font-weight:700;
  letter-spacing:.03em;padding:4px 12px;border-radius:10px}
.m-tag{margin:0;font-family:var(--font-head);font-style:italic;color:var(--orange)}
.m-desc p{margin:0;font-size:.95rem;color:#2c2f28}
.m-desc.clamp p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.m-more{align-self:flex-start;background:none;border:0;padding:0;color:var(--orange);font:600 .9rem var(--font-body);cursor:pointer}
/* margin-top:auto pushes contact, testimonials & social to the bottom so they line up across a row */
.m-contact{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.m-contact a{color:var(--ink);text-decoration:none;font-size:.95rem;display:flex;gap:10px;align-items:center;overflow-wrap:anywhere}
.m-contact a:hover{color:var(--orange)}
.m-contact i{width:18px;text-align:center;color:var(--teal)}
.m-testi{align-self:stretch;border:2px solid var(--gold);background:#fff8dc;color:var(--ink);border-radius:999px;
  padding:9px 14px;font:700 .92rem var(--font-body);cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center}
.m-testi span{background:var(--gold);border-radius:999px;padding:0 8px;font-size:.8rem}
.m-testi:hover{background:var(--gold)}
.m-social{display:flex;flex-wrap:wrap;gap:8px}
.m-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--teal);
  color:var(--cream);text-decoration:none}
.m-social a:hover{background:var(--orange)}
.none{display:none;padding:30px 0;color:var(--muted)}

/* --- P2c. Testimonials pop-up (native <dialog>) — Safari-safe: the dialog is a
       fixed-height column, ONLY the list scrolls, the page behind is locked --- */
dialog.tbox{width:min(640px,92vw);max-height:84vh;border:0;border-radius:var(--radius);padding:0;
  box-shadow:0 20px 60px rgba(0,0,0,.35);background:var(--cream);overflow:hidden}
dialog.tbox[open]{display:flex;flex-direction:column}
html.modal-open,html.modal-open body{overflow:hidden}
dialog.tbox::backdrop{background:rgba(3,54,55,.55)}
.tbox header{flex:0 0 auto;background:var(--teal);color:var(--cream);padding:16px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.tbox header h3{color:var(--cream);margin:0;font-size:1.15rem}
.tbox header button{background:none;border:0;color:var(--cream);font-size:1.5rem;cursor:pointer;line-height:1}
.tbox .list{padding:10px 20px 20px;overflow-y:auto;flex:1 1 auto;min-height:0;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tbox blockquote{margin:12px 0;background:var(--paper);border-left:4px solid var(--gold);padding:12px 14px;border-radius:8px}
.tbox blockquote p{margin:0 0 6px}
.tbox cite{font-style:normal;font-size:.85rem;color:var(--muted)}

/* =============================================================================
   P3. MEMBER PAGE (member-page-mockup-v1.html) — /members/<slug>
       Markup: builder/pages/member.twig
   ============================================================================= */
.crumbs{font-size:.85rem;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--teal)}
.crumbs span{margin:0 6px;opacity:.6}
/* identity: photo · name · company · chair · since · tagline · buttons · social */
.mp-hero{display:grid;gap:22px;align-items:center;padding:18px 0 26px}
.mp-photo{width:180px;height:180px;border-radius:50%;object-fit:cover;border:5px solid var(--gold);
  box-shadow:0 6px 20px rgba(3,54,55,.25);justify-self:center}
.mp-photo.m-ini{display:grid;place-items:center;font-size:3rem}
.mp-id{text-align:center}
.mp-id h1{font-size:2.2rem;margin:0}
.mp-id .co{font:600 1.15rem var(--font-body);color:var(--ink);margin:4px 0 8px}
.mp-id .chairpill{display:inline-block;background:var(--teal);color:var(--gold);font:700 .8rem var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 14px}
.mp-id .since{margin:10px 0 0;color:var(--muted);font-size:.92rem}
.mp-id .since b{color:var(--teal)}
.mp-id .tagline{font:italic 1.15rem var(--font-head);color:var(--teal);margin:12px 0 0}
.mp-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.mp-actions .btn{margin:0}
.mp-social{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.mp-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--teal);box-shadow:var(--shadow)}
.mp-social a:hover{background:var(--gold);color:var(--ink)}
/* Link icon names (Phase 7, Dr. Bob 2026-10-04): the site name — or the member's own label — shown just above an icon on
   hover AND keyboard focus, at once (the browser's own title pop-up was slow / didn't show). Text from data-tip. */
.m-social a[data-tip],.mp-social a[data-tip]{position:relative}
.m-social a[data-tip]::after,.mp-social a[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%);background:var(--ink);color:#fff;font:600 .75rem/1.2 var(--font-body);padding:4px 9px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.m-social a[data-tip]:hover::after,.m-social a[data-tip]:focus-visible::after,
.mp-social a[data-tip]:hover::after,.mp-social a[data-tip]:focus-visible::after{opacity:1}
/* touch screens can't hover: no tooltip there — the invisible label also stuck out past a phone's right edge
   and made the page scroll sideways (mobile audit 2026-10-06) */
@media (hover:none){ .m-social a[data-tip]::after,.mp-social a[data-tip]::after{display:none} }
/* main column + side column */
/* minmax(0,1fr): a grid column may shrink below its content on a phone (mobile audit 2026-10-06 — an "auto"
   column grew to the longest line of text and the page scrolled sideways) */
.mp-grid{display:grid;gap:22px;padding-bottom:30px;grid-template-columns:minmax(0,1fr)}
.panel{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;border-top:4px solid var(--gold)}
.panel h2{font-size:1.4rem;margin:0 0 10px}
.panel p{line-height:1.6}
/* testimonials: first 4 shown, "Show all" reveals the rest */
.tq{margin:0 0 14px;padding:14px 16px;background:var(--cream);border-radius:12px;border-left:4px solid var(--amber)}
.tq p{margin:0 0 8px}
.tq cite{font-style:normal;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.tq cite b{color:var(--teal)}
.tq cite .dt{margin-left:auto}
.tq.more{display:none}
.showall .tq.more{display:block}
.hcount{font:600 .9rem var(--font-body);color:var(--muted);margin-left:6px}
.side .panel{margin-bottom:18px}
.sent{background:var(--teal);color:var(--cream);border-top-color:var(--gold)}
.sent h2{color:var(--gold)}
.sent p{margin:0 0 12px}
.sent .btn{margin:4px 0 0}
.facts{list-style:none;margin:0;padding:0;font-size:.93rem}
.facts li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid #eceee2}
.facts li:last-child{border-bottom:0}
.facts i{color:var(--amber);width:18px;text-align:center;margin-top:3px}
.facts a{color:var(--teal);word-break:break-word}
/* minmax(0,1fr) + wrapping long words ("Telecommunications") keep the cards inside a phone screen;
   one card per row on the narrowest phones (mobile audit 2026-10-06) */
.pros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pro > span{min-width:0;overflow-wrap:anywhere}
@media (max-width:400px){ .pros{grid-template-columns:minmax(0,1fr)} }
.pro{display:flex;gap:8px;align-items:center;background:var(--cream);border-radius:12px;padding:8px;color:var(--ink);text-decoration:none}
.pro:hover{outline:2px solid var(--gold)}
.pro img,.pro .ini{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pro .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.8rem}
.pro b{display:block;font-size:.88rem;color:var(--teal)}
.pro small{font-size:.76rem;color:var(--muted)}
/* "Is there a seat for you?" band at the bottom of a member page */
.seat-cta{background:linear-gradient(135deg,var(--teal),#0b4b4c);color:var(--cream);text-align:center;padding:34px 0;margin-top:10px}
.seat-cta h2{color:var(--gold);margin:0 0 6px}
.seat-cta p{margin:0 0 14px}

/* =============================================================================
   P4. OUR STORY (our-story-mockup-v1.html S1–S5) — /our-story
       Markup: builder/pages/our-story.twig · scroll animation: js/story.js
   ============================================================================= */
/* banner variant: a different sunrise photo from the other inner pages */
.banner.banner-story{background-image:url(../img/sunrise-3.jpg)}

/* --- P4a. Timeline: gold line + dots; photos alternate sides on desktop --- */
.timeline{position:relative;padding-left:22px;border-left:3px solid var(--gold);margin-top:10px}
.step{position:relative;display:grid;gap:16px;margin:0 0 40px}
.step::before{content:"";position:absolute;left:-33px;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:4px solid var(--cream);box-shadow:0 0 0 2px var(--gold)}
.when{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--orange)}
.step h3{font-size:1.45rem;margin:.2em 0 .4em}
.step p{margin:0 0 .8em}
.step figure{margin:0}
.step img{width:100%;height:240px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.step figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}

/* scroll-in animation: story.js first adds class "js" to <html>, then adds .in
   to each element as it reaches the screen. These rules only apply under .js,
   so with JavaScript off nothing is ever hidden. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.from-right{transform:translateX(40px)}
/* the slide-in pictures start 40 px to the right — clip the timeline's SECTION (full screen width, so the gold
   dots that sit left of .timeline are not cut) so a phone never scrolls sideways (mobile audit 2026-10-06) */
section:has(> .wrap > .timeline){overflow-x:clip}
.js .reveal.from-left{transform:translateX(-40px)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal img{transform:scale(1.06);transition:transform 2.2s ease}
.js .reveal.in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){ .js .reveal,.js .reveal img{opacity:1;transform:none;transition:none} }

/* --- P4b. Built for success + meeting structure --- */
.band{background:var(--paper)}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}   /* minmax: mobile audit 2026-10-06 */
.chip{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0;overflow-wrap:anywhere}
.chip i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--gold);flex:0 0 34px}
.structure{display:grid;gap:14px;margin-top:10px}
.card2{background:#fff;border-radius:var(--radius);padding:18px;border-top:4px solid var(--gold);box-shadow:var(--shadow)}
.card2 h3{font-family:var(--font-head);color:var(--teal);margin:0 0 6px;font-size:1.15rem}
.card2 p{margin:0}
.motto{text-align:center;font-family:var(--font-head);font-style:italic;font-size:1.5rem;color:var(--orange);margin:28px 0 0}

/* --- P4c. Track-record tables (scoped to .tables so no other page's tables change) --- */
.tables{display:grid;gap:26px}
.tbl-wrap{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
.tbl-wrap h3{padding:18px 18px 0;margin:0}
.tbl-wrap .sub{padding:4px 18px 0;margin:0;font-size:.9rem;color:var(--muted)}
.tables table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:10px}
/* phones: tighter cells so the Business table fits without sideways scrolling */
.tables th,.tables td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;font-size:.92rem}
.tables .swipe{display:block;padding:0 18px;font-size:.8rem;color:var(--orange)}
.tables th:first-child{text-align:left}
.tables thead th{background:var(--teal);color:var(--cream);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.tables tbody th small{font-weight:400;color:var(--muted);font-size:.78rem}
.tables td.num{position:relative}
.tables .bar{display:block;height:5px;margin-top:4px;margin-left:auto;width:var(--w);background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:3px}
.tables tfoot td,.tables tfoot th{font-weight:700;background:#fff8dc;color:var(--teal);border-bottom:0}
.tables .act th:first-child{position:sticky;left:0;background:inherit}
.tables .act tbody th{background:var(--paper)}
.tables .act thead th:first-child{background:var(--teal)}
.tables .act tfoot th:first-child{background:#fff8dc}

/* --- P4d. Call to action band --- */
.cta{background:var(--teal);color:var(--cream);text-align:center}
.cta h2{color:var(--cream)}
.cta p{max-width:60ch;margin:0 auto 20px}

/* Simple centred message block (404 page, placeholders) */
.message{text-align:center;max-width:60ch;margin:0 auto}
.message .btn{margin-top:10px}


/* =============================================================================
   P5. EVENTS (events-mockup-v1.html E0–E7) — /events  ·  EVENT PAGE
       (event-page-mockup-v1.html) — /events/<slug>
       Markup: builder/pages/events.twig, event.twig · behaviour: js/events.js
       Classes are scoped to .evcal / .evpage / .ebox so no other page changes.
   ============================================================================= */
/* --- P5a. Colours. --c is the entry's colour; --ct the text colour on it.
       Member events: by category (logo palette). AMRP events: ink with gold
       (Dr. Bob, 2026-10-02). --- */
:root{--c-meeting:var(--teal);--c-holiday:var(--red);--c-fundraiser:var(--orange);
  --c-community:#6b7d2b;--c-networking:var(--amber)}
.t-meeting{--c:var(--c-meeting);--ct:#fff}      .t-holiday{--c:var(--c-holiday);--ct:#fff}
.t-fundraiser{--c:var(--c-fundraiser);--ct:#fff} .t-community{--c:var(--c-community);--ct:#fff}
.t-networking{--c:var(--c-networking);--ct:var(--ink)} .t-member{--c:var(--amber);--ct:var(--ink)}
.t-amrp{--c:var(--ink);--ct:var(--gold)}
.ev-badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ct,#fff);background:var(--c,var(--teal));padding:2px 8px;border-radius:999px;margin-right:6px;vertical-align:middle}
.evcal .empty,.ebox .empty{color:var(--muted);padding:16px 0}
.plabel{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--orange);margin:12px 0 6px}

/* --- P5b. Coming up next --- */
.ev-feature{display:grid;background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  border-top:5px solid var(--c)}
.ev-feature img{width:100%;height:210px;object-fit:cover;display:block}
.ev-feature .pad{padding:18px 20px}
.ev-feature h3{font-size:1.5rem;margin:.3em 0}
.ev-feature .btn{margin:14px 0 0}

/* --- P5c. Toolbar: view tabs + filters + prev/next --- */
.evcal .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:30px 0 14px}
.evcal .tabs{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
.evcal .tabs button{border:0;background:none;padding:8px 16px;border-radius:999px;font:700 .9rem var(--font-body);color:var(--teal);cursor:pointer}
.evcal .tabs button.on{background:var(--teal);color:var(--cream)}
.evcal .filters{display:flex;flex-wrap:wrap;gap:8px}
.evcal .filters label{display:inline-flex;gap:6px;align-items:center;font-size:.88rem;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.evcal .filters .dot{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block}
.evcal .filters .t-amrp .dot{box-shadow:inset 0 0 0 2px var(--gold)}
.evcal .filters .dot-member{background:linear-gradient(90deg,var(--c-fundraiser),var(--c-community),var(--c-networking))}
.calnav{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.calnav[hidden]{display:none}
.calnav h3{margin:0;flex:1;font-size:1.4rem}
.calnav button{border:1px solid var(--line);background:var(--paper);width:40px;height:40px;border-radius:50%;cursor:pointer;color:var(--teal)}
.calnav .today{width:auto;border-radius:999px;padding:0 14px;font:700 .85rem var(--font-body)}

/* --- P5d. List rows (Upcoming, the day under the month, Looking back) --- */
.evcal .mhead{font-family:var(--font-head);color:var(--orange);font-size:1.2rem;margin:22px 0 8px}
.evcal .item{display:flex;gap:14px;align-items:center;background:var(--paper);border-radius:12px;padding:10px 12px;
  margin-bottom:8px;border-left:5px solid var(--c);cursor:pointer;box-shadow:0 2px 8px rgba(3,54,55,.06);
  color:var(--ink);text-decoration:none}
.evcal .item:hover,.evcal .item:focus-visible{box-shadow:0 4px 16px rgba(3,54,55,.14);outline:none}
.evcal .item.t-amrp{background:var(--ink);color:var(--cream)}
.evcal .item.t-amrp .meta{color:#cfd3c2}
.evcal .dbox{flex:0 0 52px;text-align:center;line-height:1.05}
.evcal .dbox b{display:block;font-size:1.5rem;color:var(--c);font-family:var(--font-head)}
.evcal .item.t-amrp .dbox b{color:var(--gold)}
.evcal .dbox span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.evcal .item.t-amrp .dbox span{color:#cfd3c2}
.evcal .item .body{flex:1;min-width:0}
.evcal .item .ttl{font-weight:700}
.evcal .item .ttl a{color:inherit}
.evcal .item .meta{font-size:.85rem;color:var(--muted)}
.evcal .item > img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:0 0 64px}
.evcal .item.small{padding:6px 12px;box-shadow:none;background:transparent;border-left-width:3px}
.evcal .item.small.t-amrp{background:var(--ink)}
.evcal .item.small .dbox b{font-size:1.1rem}
.faces{display:flex;margin-top:5px}
.faces img,.faces .ini{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:2px solid #fff;margin-right:-6px;object-fit:cover}
.faces .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.6rem}

/* --- P5e. Month grid (dots on phones, named chips from tablet up) --- */
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.grid7 .dow{text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--muted);padding:4px 0}
.grid7 .cell{min-height:54px;background:var(--paper);border-radius:8px;padding:4px;cursor:pointer;border:2px solid transparent;overflow:hidden}
.grid7 .cell.out{opacity:.35}
.grid7 .cell.today{border-color:var(--gold)}
.grid7 .cell.sel{border-color:var(--teal)}
.grid7 .cell .n{font-size:.8rem;font-weight:700;color:var(--teal)}
.grid7 .dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.grid7 .dots i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.grid7 .chipev{display:none}
.evcal .dayhead{margin:16px 0 8px;font-weight:700;color:var(--teal)}

/* --- P5f. Week view (stacked on phones, 7 columns from tablet up) --- */
.week{display:grid;gap:8px}
.wday{background:var(--paper);border-radius:10px;padding:10px 12px}
.wday h4{margin:0 0 6px;font-size:.9rem;color:var(--teal)}
.wday.today{outline:2px solid var(--gold)}
.wday .none{font-size:.85rem;color:var(--muted)}

/* --- P5g. Detail pop-up — Safari-safe like the testimonials pop-up (P2c):
       the dialog never scrolls, only .scroll inside it does. --- */
dialog.ebox{width:min(620px,94vw);max-height:88vh;border:0;border-radius:var(--radius);padding:0;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);background:var(--cream)}
dialog.ebox[open]{display:flex;flex-direction:column}
dialog.ebox::backdrop{background:rgba(3,54,55,.55)}
.ebox .scroll{overflow-y:auto;min-height:0;flex:1 1 auto;overscroll-behavior:contain}
.ebox .x{position:absolute;right:10px;top:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(4,3,2,.6);color:#fff;font-size:1.3rem;cursor:pointer}
.ebox .hero{width:100%;height:220px;object-fit:cover;display:block}
.ebox .strip{height:10px;background:var(--c)}
.ebox .pad{padding:18px 20px 22px}
.ebox h3{font-size:1.6rem;margin:.3em 0 .5em}
.ebox .facts{margin:0 0 14px}
.ebox .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ebox .actions a,.ebox .actions button{border:2px solid var(--teal);background:none;color:var(--teal);border-radius:999px;
  padding:8px 14px;font:700 .88rem var(--font-body);text-decoration:none;cursor:pointer}
.ebox .actions .primary{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ebox .by{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* --- P5h. Event page (uses P3's .crumbs, .panel, .facts, .mp-grid, .side) --- */
.ev-hero{display:grid;gap:20px;padding:18px 0 24px;align-items:center}
.ev-img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff;border-radius:16px;box-shadow:var(--shadow)}
.ev-hero h1{font-size:2.2rem;margin:10px 0 6px}
.ev-when,.ev-where{display:flex;gap:10px;align-items:flex-start;margin:6px 0;font-size:1.02rem}
.ev-when i,.ev-where i{color:var(--amber);width:20px;text-align:center;margin-top:4px}
.ev-where a{color:var(--teal);font-size:.9rem}
.ev-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ev-actions .btn{margin:0}
.passed{background:var(--teal);color:var(--cream);border-radius:12px;padding:10px 14px;margin-top:12px}
.passed b{color:var(--gold)}
.ev-text h3,.ev-text h4{font-size:1.1rem;margin:1em 0 .3em}
.ev-text p{margin:0 0 .7em}
.recap-body{background:var(--cream);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.evpage .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.evpage .gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.ev-by{font-size:.85rem;color:var(--muted);margin:12px 0 0}
.upc{list-style:none;margin:0;padding:0}
.upc li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid #eceee2;font-size:.93rem}
.upc .d{font:700 .8rem var(--font-body);color:#fff;background:var(--teal);border-radius:6px;padding:2px 6px}
.upc a{color:var(--teal);flex:1}
/* recap videos: thumbnail + play button until clicked, then the 16:9 player */
.yt{position:relative;display:block;margin:0 0 12px;border-radius:12px;overflow:hidden;background:#000}
.yt img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.9}
.yt-play{position:absolute;inset:0;display:grid;place-items:center}
.yt-play i{width:68px;height:48px;border-radius:12px;background:#c00;color:#fff;display:grid;place-items:center;font-size:1.3rem}
.yt:hover .yt-play i{background:#e00}
.yt-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block;margin:0 0 12px}

/* =============================================================================
   P6. APPLY (apply-mockup-v1.html) — /apply
       Markup: builder/pages/apply.twig · behaviour: js/apply.js
       Everything is scoped to .ap so the shared names (.f, .count, .opt…)
       never change another page. Uses P3's .panel.
   ============================================================================= */
.ap{max-width:860px;margin:0 auto;padding:22px 0 40px}
.ap .panel{margin-bottom:18px}
.ap [hidden]{display:none !important}       /* Phase 5 part 4: the form / thank-you swap must never be undone by a display rule */
.ap .intro{padding:0}                      /* undo the Members page's .intro spacing… */
.ap .intro p{max-width:none}              /* …and its 64ch line length */
.ap .rules li{margin-bottom:4px}
.ap .ethics{background:var(--cream);border-radius:12px;padding:12px 18px 12px 36px}
.ap .req{color:var(--red)}
/* Your cost to join */
.ap .cost{background:var(--teal);color:var(--cream);border-radius:14px;padding:16px 18px;margin-top:16px}
.ap .cost h3{color:var(--gold);margin:0 0 6px;font-size:1.15rem}
.ap .cost table{width:100%;border-collapse:collapse;font-size:.95rem}
.ap .cost td{padding:4px 0;border-bottom:1px solid rgba(241,244,227,.2)}
.ap .cost td:last-child{text-align:right;white-space:nowrap;padding-left:10px}
.ap .cost tr.tot td{font-weight:700;color:var(--gold);border-bottom:0;font-size:1.05rem}
.ap .cost p{margin:8px 0 0;font-size:.84rem;opacity:.9}
/* form fields */
.ap fieldset{border:0;margin:0;padding:0;min-width:0}
.ap legend{font:700 1.25rem var(--font-head);color:var(--teal);margin-bottom:4px;padding:0}
.ap .f{margin:14px 0}
.ap .f label{display:block;font-weight:700;margin-bottom:4px}
.ap .f small{display:block;color:var(--muted);font-size:.84rem;margin-bottom:6px}
.ap .f input[type=text],.ap .f input[type=email],.ap .f input[type=tel],.ap .f input[type=url],
.ap .f input[type=date],.ap .f select,.ap .f textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.ap .f input[readonly]{background:var(--cream)}
.ap .f textarea{min-height:110px;resize:vertical}
.ap .f input:focus,.ap .f textarea:focus,.ap .f select:focus,.ap .lk input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.ap .row2{display:grid;gap:0 16px}
.ap .opt{display:flex;gap:10px;align-items:flex-start;margin:6px 0;font-weight:400}
.ap .opt input{margin-top:5px;width:18px;height:18px;flex:0 0 auto}
.ap .count{float:right;font-size:.78rem;color:var(--muted);font-weight:400}
.ap .agree{background:var(--cream);border-radius:12px;padding:12px 14px}
.ap .agree .opt{font-weight:700;margin:0}
.ap .rep{display:none;border-left:4px solid var(--amber);padding-left:14px;margin-top:6px}
.ap .rep.on{display:block}
.ap .chairhit{display:none;margin-top:6px;font-size:.88rem;background:#fff3c4;border-radius:8px;padding:6px 10px}
.ap .chairhit.on{display:block}
/* links list */
.ap .lk{display:flex;gap:8px;align-items:center;margin:8px 0}
.ap .lk .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--teal);flex:0 0 auto;font-size:1.1rem}
.ap .lk input{flex:1;min-width:0;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.ap .lk .nm{width:110px;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap .lk button{border:0;background:none;color:var(--muted);font-size:1.3rem;cursor:pointer;padding:0 4px}
.ap .submitbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ap .submitbar .btn{margin:0}
@media (max-width:480px){ .ap .lk .nm{display:none} }

/* =============================================================================
   P7. POLICIES — /privacy, /data-use, /cookies
       Markup: builder/pages/privacy.twig, data-use.twig, cookies.twig
   ============================================================================= */
.policy-doc{max-width:820px;margin:26px auto 40px;line-height:1.65}
.policy-doc h2{font-size:1.3rem;margin:1.6em 0 .4em}
.policy-doc h3{font-size:1.05rem;margin:1.2em 0 .3em}
.policy-doc ul{padding-left:1.3em}
.policy-doc li{margin-bottom:.35em}
.policy-doc .eff{color:var(--muted);font-weight:600;margin-top:0}
.policy-doc a{color:var(--teal)}
.policy-doc .also{border-top:1px solid var(--line);padding-top:12px;margin-top:24px;font-size:.92rem}
.policy-doc .tablewrap{overflow-x:auto}
.cookie-table{border-collapse:collapse;width:100%;font-size:.93rem}
.cookie-table th,.cookie-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.cookie-table th{background:var(--cream)}

/* =============================================================================
   P8. MEMBERS-ONLY SIGN-IN + SET PASSWORD (signin-mockup-v1.html) — Phase 3
       Markup: builder/pages/members-only-sign-in.twig (+ set-password)
       Scoped to .signin-wrap so no other page changes.
   ============================================================================= */
.signin-wrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:30px 16px 50px;
  grid-template-columns:minmax(0,1fr); /* mobile audit 2026-10-06: the card stayed wider than a phone without it */
  background:linear-gradient(180deg,rgba(3,54,55,.55),rgba(4,3,2,.7)),url(../img/sunrise-2.jpg) center/cover}
.signin-wrap .card{background:var(--paper);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:28px 24px;width:min(420px,100%)}
.signin-wrap .logo{width:84px;height:84px;display:block;margin:0 auto 8px}
.signin-wrap h1{text-align:center;font-size:1.7rem;margin:0}
.signin-wrap .sub{text-align:center;color:var(--muted);margin:4px 0 20px}
.signin-wrap .field{margin-bottom:14px}
.signin-wrap .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px}
.signin-wrap .field small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
.signin-wrap .field input{width:100%;box-sizing:border-box;font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.signin-wrap .field input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.signin-wrap .pw{position:relative}
.signin-wrap .pw input{padding-right:46px}
.signin-wrap .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--muted);cursor:pointer;font-size:1rem;width:36px;height:36px;border-radius:8px}
.signin-wrap .pw-toggle:focus-visible{outline:2px solid var(--gold)}
.signin-wrap .row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem;margin:4px 0 18px}
.signin-wrap .row a,.signin-wrap .help a,.signin-wrap .form-msg a,.signin-wrap .field small a{color:var(--orange);font-weight:600}
.signin-wrap .btn{display:block;width:100%;box-sizing:border-box;text-align:center;margin:0;font-size:1.05rem}
.signin-wrap .btn-ghost-dark{background:none;font-size:1rem}
.signin-wrap .or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;margin:16px 0 12px}
.signin-wrap .or::before,.signin-wrap .or::after{content:"";flex:1;border-top:1px solid var(--line)}
.signin-wrap .help{text-align:center;font-size:.88rem;color:var(--muted);margin-top:18px;line-height:1.5}
/* Clicks back on OUR .help text (Dr. Bob, 2026-10-06): TCMS's forms.css (loaded on every page by cms.assetsHead) has
   a site-wide `.help{pointer-events:none}` meant for its own form-field help, which made every link inside our .help
   dead — the sign-in card's "Sign out", the "Dr. Bob" email links, "send another link", Admin access "Back", My
   Profile's "How do I find my Google review link?". Old bug (3.6.1 has the same rule). TCMS form help is left alone. */
body .help:not(.totalform .help){pointer-events:auto}
.signin-wrap .back{display:block;text-align:center;margin-top:14px;color:var(--orange);font-weight:600;font-size:.9rem}
.signin-wrap .back{margin-bottom:4px}
.signin-wrap .btn + .back{margin-top:16px}
.signin-wrap .form-msg a{color:inherit;text-decoration:underline}
.signin-wrap h1 + .form-msg{margin-top:16px}
/* "Review copy" notice — off production only (CLAUDE.md golden rule 7) */
.review-note{background:#fff3c4;border:1px dashed var(--amber);color:#6b4f00;border-radius:10px;padding:8px 12px;
  font-size:.85rem;text-align:center;margin:0 0 14px}
/* set-password: rule, live checklist, errors, match line */
.signin-wrap .pw-rule{background:var(--cream);border-radius:10px;padding:10px 12px;font-size:.9rem;margin:0 0 14px}
.signin-wrap .pw-check{list-style:none;margin:8px 0 0;padding:0;font-size:.88rem;color:var(--muted)}
.signin-wrap .pw-check li i{width:16px}
.signin-wrap .pw-check li.ok{color:#245b1e;font-weight:600}
.signin-wrap .pw-count{color:var(--muted);font-weight:400}
.signin-wrap .pw-error{background:#fde2dd;color:var(--red);border-radius:8px;padding:8px 10px;font-size:.88rem;margin:8px 0 0}
.signin-wrap .pw-error a{color:inherit;text-decoration:underline}
.signin-wrap .pw-match{min-height:1.3em;font-size:.88rem;margin:6px 0 0}
.signin-wrap .pw-match .yes{color:#245b1e;font-weight:600}
.signin-wrap .pw-match .no{color:var(--red)}
.signin-wrap input[aria-invalid="true"]{border-color:var(--red);outline-color:var(--red)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =============================================================================
   P9. MEMBERS-ONLY LAYOUT (dashboard-mockup-v1.html) — Phase 3, step 4
       Markup: builder/layouts/members-only.twig · behaviour: js/members-only.js
       Gold sub-bar (desktop menus) · phone tab bar + "Me" sheet · cream page.
   ============================================================================= */
.mo-bar{background:var(--gold);color:var(--ink);position:sticky;top:var(--header-h);z-index:40;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mo-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
.mo-bar .who{display:flex;align-items:center;gap:8px;font-size:.9rem;white-space:nowrap;min-width:0}
.mo-bar .who span{overflow:hidden;text-overflow:ellipsis}
.mo-bar .face{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;flex:0 0 auto}
.mo-bar .face.ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.7rem;font-weight:700}
.mo-bar .who .long{display:none}
.mo-links{display:none;gap:2px;align-items:center}
.mo-links > a,.mo-dd > button{display:block;white-space:nowrap;color:var(--ink);font:700 .9rem var(--font-body);
  text-decoration:none;padding:12px 10px;background:none;border:0;cursor:pointer}
.mo-links > a[aria-current],.mo-dd > button.here{box-shadow:inset 0 -3px 0 var(--teal)}
.mo-links > a:focus-visible,.mo-dd > button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.mo-dd{position:relative}
.mo-dd .dd{display:none;position:absolute;top:100%;left:0;background:var(--paper);min-width:240px;
  border-radius:0 0 12px 12px;box-shadow:var(--shadow);padding:6px 0;z-index:45}
.mo-dd:last-of-type .dd{left:auto;right:0}           /* Leadership ▾ opens leftwards, inside the window */
.mo-dd.open .dd{display:block}
@media (hover:hover){ .mo-dd:hover .dd{display:block} }
.mo-dd .dd a{display:block;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;padding:9px 16px;white-space:nowrap}
.mo-dd .dd a:hover,.mo-dd .dd a:focus-visible{background:var(--cream);outline:none}
.mo-dd .dd a[aria-current]{background:var(--cream);box-shadow:inset 3px 0 0 var(--teal)}
.mo-dd .dd a.divider{border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
/* a menu item that isn't built yet (soon: true in layouts/members-only.twig — e.g. Mailing Addresses until Phase 7) */
.mo-dd .dd .mo-soon,.mo-sheet-body .mo-soon{display:block;color:var(--muted);font-weight:600;font-size:.9rem;padding:9px 16px;white-space:nowrap;cursor:default}
.mo-sheet-body .mo-soon{padding:10px 18px;font-size:1rem}
.mo-soon i{width:24px;color:var(--muted)}
.mo-soon small{font:700 .64rem var(--font-body);text-transform:uppercase;letter-spacing:.04em;background:#eceee4;border-radius:999px;padding:1px 7px;margin-left:4px}
.mo-dd .dd i{width:22px;color:var(--teal)}
.mo-links .out{font-weight:600;opacity:.8}
/* the page itself: white panels on cream */
.mo-page{padding:22px 0 40px}
.mo-page .panel{margin-bottom:18px}
/* phone bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--teal);display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 14px rgba(0,0,0,.2)}
.tabbar a,.tabbar button{color:var(--cream);text-decoration:none;text-align:center;font:600 .7rem var(--font-body);
  padding:8px 0 7px;background:none;border:0;cursor:pointer}
.tabbar i{display:block;font-size:1.2rem;margin-bottom:3px}
.tabbar [aria-current],.tabbar .me[aria-expanded="true"]{color:var(--gold)}
.tabbar .plus i{background:var(--gold);color:var(--ink);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  margin:-18px auto 2px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
body:has(.tabbar){padding-bottom:70px}
/* phone "Me" sheet (native <dialog>; the page behind is locked while open) */
dialog.mo-sheet{width:100%;max-width:520px;max-height:85vh;margin:auto auto 0;border:0;border-radius:18px 18px 0 0;padding:0;
  background:var(--paper);box-shadow:0 -10px 40px rgba(0,0,0,.35)}
dialog.mo-sheet[open]{display:flex;flex-direction:column}
dialog.mo-sheet::backdrop{background:rgba(3,54,55,.55)}
.mo-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.mo-sheet-head h2{margin:0;font-size:1.15rem}
.mo-sheet-head .x{border:0;background:var(--cream);width:36px;height:36px;border-radius:50%;font-size:1.3rem;cursor:pointer}
.mo-sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:6px 0 calc(16px + env(safe-area-inset-bottom))}
.mo-sheet-label{margin:12px 18px 2px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--orange)}
.mo-sheet-body a{display:block;color:var(--ink);text-decoration:none;font-weight:600;padding:10px 18px}
.mo-sheet-body a[aria-current]{background:var(--cream);box-shadow:inset 3px 0 0 var(--teal)}
.mo-sheet-body a i{width:24px;color:var(--teal)}
.mo-sheet-body a.out{border-top:1px solid var(--line);margin-top:8px}

/* =============================================================================
   P10. MEMBERS-ONLY DASHBOARD (dashboard-mockup-v1.html) — Phase 3, step 5
        Markup: builder/pages/members-only-dashboard.twig · scoped to .dash
   ============================================================================= */
:root{--green:#2f8a3c}
.dash .hello h1{margin:0;font-size:1.9rem}
.dash .hello p{margin:4px 0 14px;color:var(--muted)}
.dash-grid{display:grid;gap:18px}
.dash-grid .col{display:grid;gap:18px;align-content:start}
.dash .panel{margin:0}
.dash .panel h2{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:1.25rem}
.dash .panel h2 a{font:600 .85rem var(--font-body);color:var(--orange)}
.dash .muted,.dash .hint{color:var(--muted)}
.dash .hint{font-size:.82rem;margin:10px 0 0}
/* waiting-for-approval banner (Dr. Bob) */
.dash .waiting{display:flex;align-items:center;gap:12px;background:#fff8dc;border:2px solid var(--gold);border-radius:var(--radius);
  padding:12px 16px;margin:0 0 14px;color:var(--ink);text-decoration:none}
.dash .waiting i{font-size:1.4rem;color:var(--orange)}
.dash .waiting small{display:block;color:var(--muted)}
.dash .waiting .go{margin-left:auto;font-weight:700;color:var(--orange);white-space:nowrap}
/* next meeting */
.dash .next .big{font:700 1.3rem var(--font-head);color:var(--teal)}
.dash .next ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:5px;font-size:.93rem}
.dash .next li i{width:20px;color:var(--amber)}
/* slip buttons */
.dash .slips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dash .slip{display:flex;flex-direction:column;align-items:flex-start;background:var(--cream);border-radius:12px;padding:12px;
  text-decoration:none;color:var(--ink);border:1px solid transparent}
.dash .slip:hover,.dash .slip:focus-visible{border-color:var(--gold);background:#fff8dc;outline:none}
.dash .slip i{font-size:1.3rem;color:var(--orange);margin-bottom:6px}
.dash .slip b{font-size:.92rem;line-height:1.2}
.dash .slip small{color:var(--muted);font-size:.78rem}
/* activity tiles */
.dash .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dash .tile{background:var(--cream);border-radius:12px;padding:12px}
.dash .tile .n{font:700 1.6rem var(--font-head);color:var(--teal);line-height:1}
.dash .tile .l{font-size:.82rem;color:var(--muted);margin-top:4px}
.dash .tile .s{font-size:.8rem;margin-top:6px}
.dash .tile.money{grid-column:1/-1;background:#fff8dc}
.dash .tile.money .n{color:var(--orange)}
/* attendance */
.dash .since{margin:-4px 0 10px;color:var(--muted);font-size:.88rem}
.dash .attn{display:flex;gap:18px;align-items:center}
.dash .ring{--p:0;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:conic-gradient(var(--teal) calc(var(--p)*1%),#e3e6d6 0)}
.dash .ring > div{width:92px;height:92px;border-radius:50%;background:var(--paper);display:grid;place-items:center;text-align:center;line-height:1.1}
.dash .ring b{font:700 1.7rem var(--font-head);color:var(--teal)} .dash .ring small{font-size:.72rem;color:var(--muted)}
.dash .ring.ok{background:conic-gradient(var(--green) calc(var(--p)*1%),#e3e6d6 0)} .dash .ring.ok b{color:var(--green)}
.dash .ring.below{background:conic-gradient(var(--amber) calc(var(--p)*1%),#e3e6d6 0)} .dash .ring.below b{color:#8a5d00}
.dash .ring.probation{background:conic-gradient(var(--red) calc(var(--p)*1%),#e3e6d6 0)} .dash .ring.probation b{color:var(--red)}
.dash .attn ul{list-style:none;padding:0;margin:0;font-size:.92rem;display:grid;gap:4px}
.dash .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.dash .pill{display:inline-block;border-radius:999px;padding:2px 10px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dash .pill.ok{background:#dcefd9;color:#245b1e} .dash .pill.below{background:#fff3c4;color:#7a5a00} .dash .pill.probation{background:#fde2dd;color:var(--red)}
.dash .periods{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;margin-top:12px}
.dash .msg{border-radius:10px;padding:10px 12px;font-size:.9rem;margin-top:12px;line-height:1.45}
.dash .msg.ok{background:#dcefd9;color:#245b1e} .dash .msg.below{background:#fff3c4;color:#6b4f00} .dash .msg.probation{background:#fde2dd;color:#7a1300}
.dash .proj{margin-top:14px}
.dash .proj h3{font:700 .75rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 6px}
.dash .strip{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;align-items:end}
.dash .strip > div{text-align:center;font-size:.62rem;color:var(--muted);line-height:1.15}
.dash .strip .bar{height:60px;background:#e3e6d6;border-radius:4px;position:relative;overflow:hidden;margin-bottom:3px}
.dash .strip .bar i{position:absolute;left:0;right:0;bottom:0;background:#9fb9b9}
.dash .strip .bar::after{content:"";position:absolute;left:0;right:0;border-top:1px dashed var(--red);bottom:50%;z-index:1}
.dash .strip .bar::before{content:"";position:absolute;left:0;right:0;border-top:1px dashed var(--green);bottom:75%;z-index:1}
.dash .strip .x50 .bar i{background:var(--gold)} .dash .strip .x50{color:var(--ink);font-weight:700}
.dash .strip .x75 .bar i{background:var(--green)} .dash .strip .x75{color:var(--green);font-weight:700}
.dash .legend{font-size:.72rem;color:var(--muted);margin-top:6px}
.dash .att-note{font-size:.85rem;color:var(--muted);margin:10px 0 0}
.dash .linkish{border:0;background:none;padding:0;font:inherit;color:var(--orange);font-weight:600;cursor:pointer;text-decoration:underline}
/* probation banner */
.dash .alert{background:#fff;border:2px solid var(--red);border-left-width:8px;border-radius:var(--radius);padding:16px 18px;margin:0 0 14px;box-shadow:var(--shadow)}
.dash .alert h2{color:var(--red);font-size:1.3rem;margin:0 0 6px}
.dash .alert ul{margin:6px 0 10px;padding-left:20px} .dash .alert li{margin:3px 0}
.dash .alert .good{background:#dcefd9;color:#245b1e;border-radius:10px;padding:10px 12px;margin:10px 0}
.dash .alert .btns{display:flex;flex-wrap:wrap;gap:8px}
.dash .alert .btn{margin:0;padding:10px 18px}
.dash .onhold{background:#fde2dd;color:#7a1300;border-radius:10px;padding:10px 12px;font-size:.9rem}
/* speaking date, feeds */
.dash .speak .big{font:700 1.3rem var(--font-head);color:var(--teal)}
.dash .speak p{margin:.4em 0;font-size:.92rem}
/* Phase 8 part 7 — the offer page (/speaker-offer) + Leadership ▸ Speaker schedule */
.spo{padding:40px 0}
.spo .spo-card{max-width:560px;margin:0 auto;background:var(--paper);border-radius:16px;box-shadow:var(--shadow);padding:22px}
.spo h1{font-size:1.6rem;margin:0 0 8px}
.spo .spo-btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.spo .spo-note{color:var(--muted);font-size:.88rem}
.spo .spo-again{background:#fff6d1;border-left:5px solid var(--gold);border-radius:10px;padding:8px 12px;font-size:.92rem}
.ssc .eyebrow{color:var(--muted);font-size:.85rem;margin:0} .ssc .lead{color:var(--muted);max-width:780px}
.ssc h2{margin:22px 0 8px;font-size:1.25rem}
.ssc .ssc-slot{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin:10px 0;border-left:6px solid var(--orange)}
.ssc .ssc-slot.urgent{border-left-color:var(--red);background:#fdf3f1}
.ssc .ssc-slot h3{margin:0 0 4px;font-size:1.05rem} .ssc .ssc-slot h3 small{font:400 .82rem var(--font-body);color:var(--muted)}
.ssc .ssc-slot p{margin:4px 0;font-size:.9rem}
.ssc .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.ssc select{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.ssc .hint,.ssc .muted{color:var(--muted);font-size:.85rem}
.ssc .ssc-scroll{overflow-x:auto}   /* mobile audit 2026-10-06 */
.ssc .ssc-t{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem}
.ssc .ssc-t th{background:var(--teal);color:#fff;text-align:left;padding:6px 8px} .ssc .ssc-t td{padding:6px 8px;border-bottom:1px solid var(--line)}
.ssc .ssc-hist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.88rem}
.ssc .ssc-hist li{display:grid;grid-template-columns:170px 1fr;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px} .ssc .ssc-hist .when{color:var(--muted)}
.ssc .ssc-err{background:#fde2dd;color:#7a1300;border-radius:10px;padding:8px 12px}
.ssc .linkish{border:0;background:none;padding:0;font:inherit;color:var(--orange);font-weight:600;cursor:pointer;text-decoration:underline}
.ssc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:560px){.ssc .ssc-hist li{grid-template-columns:1fr;gap:2px}}
.dash .speak .talks-h{font-size:.95rem;margin:12px 0 4px}   /* Phase 8 part 7 — "My talks" */
.dash .speak .talks-past{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--muted)}
.dash .feed{list-style:none;margin:0;padding:0}
.dash .feed li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.dash .feed li:last-child{border:0}
.dash .feed small{color:var(--muted)}
.dash .feed .face{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.dash .feed .face.ini{display:grid;place-items:center;background:var(--cream);color:var(--teal);font-size:.8rem;font-weight:700}
.dash .feed a{color:var(--teal);font-weight:600}
/* Dr. Bob's desk */
.dash .count{display:inline-block;background:var(--gold);border-radius:999px;padding:1px 10px;font-weight:700;font-size:.85rem}
.dash .admin{border:2px dashed var(--teal)}
.dash .admin .only{font:700 .7rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);background:#dff0ee;border-radius:999px;padding:2px 8px}
.dash .admin .acts{display:grid;gap:10px}
.dash .admin a.act{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink)}
.dash .admin a.act:hover,.dash .admin a.act:focus-visible{border-color:var(--gold);outline:none}
.dash .admin a.act i{font-size:1.2rem;color:var(--teal);width:24px}
.dash .admin a.act b{display:block} .dash .admin a.act small{color:var(--muted)}
.dash .admin a.act .count{margin-left:auto}
/* Meeting stand-in card on Dr. Bob's desk + notices (Phase 4 part 2, 2026-10-03) */
.dash .standin{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dash .standin h3{margin:0 0 8px;font-size:1.05rem} .dash .standin h3 i{color:var(--teal)}
.dash .si-now{margin:0 0 10px} .dash .si-now small{display:block;color:var(--muted)}
.dash .si-now.off{color:var(--muted)}
.dash .si-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:6px}   /* "on" light */
.dash .si-msg{background:#e3f3f2;border-radius:10px;padding:6px 10px;font-size:.9rem;margin:0 0 10px}
.dash .si-msg.warn{background:#fdf3f1;color:var(--red)}
.dash .si-hand{margin:0 0 10px}
.dash .si-more summary{cursor:pointer;color:var(--teal);font-weight:600;margin:6px 0}
.dash .si-form{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:8px 0}
.dash .si-form label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted)}
.dash .si-form select,.dash .si-form input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.dash .si-form small{flex-basis:100%;color:var(--muted)}
.dash .standin .btn{margin:0}
.dash .si-me{border-color:var(--amber)}                 /* the stand-in's own notice */
.dash .si-lead{background:#fdf6e1;border:1px solid #f0cf73;border-radius:12px;padding:10px 14px;margin:0 0 16px}  /* Leadership's notice */
.dash .si-lead i{color:var(--amber)}
/* friendly 403 (members-only-forbidden.twig) */
.panel.forbidden{max-width:560px;margin:30px auto;text-align:center}
.panel.forbidden > i{font-size:2.2rem;color:var(--teal);margin:6px 0 10px}
.panel.forbidden h1{font-size:1.6rem;margin:0 0 10px}
.panel.forbidden p{color:var(--muted);margin:0 0 18px}
.panel.forbidden a:not(.btn){color:var(--orange);font-weight:600}
/* attendance policy pop-up — Safari-safe: flex column, only the body scrolls */
dialog.pol{border:0;border-radius:var(--radius);padding:0;width:min(640px,94vw);max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
dialog.pol[open]{display:flex;flex-direction:column}
dialog.pol::backdrop{background:rgba(4,3,2,.55)}
/* ---------------------------------------------------------------------------------------------------------------------
   Phase 8 part 4 — "I CAN'T MAKE IT" (cant-make-it-mockup-v2.html, approved 2026-10-05). Everything scoped: .dash .cmi-*,
   dialog.cmi-box, dialog.cmi-ask, .pol-2026. Result pills (.cm-res; speaker slot .cm-spk): Absent red · Medical teal · Substitute amber · not affected grey.
   --------------------------------------------------------------------------------------------------------------------- */
.dash .cmi-act{margin-top:12px}
/* Phase 8 part 6 — the Leadership desk card "New-member reviews" (speaker-scheduler-mockup-v3 panel 14) */
.dash .nmr .nmr-l{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.dash .nmr .nmr-l li{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff;display:grid;gap:3px}
.dash .nmr .nmr-l li.open{border-color:#e7b0a6;background:#fdf3f1}
.dash .nmr .nmr-l .top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dash .nmr .nmr-l small{color:var(--muted);font-size:.82rem} .dash .nmr .nmr-l small.why{color:#7a1300}
.dash .nmr .nmr-l .linkish{justify-self:start}
.dash .nmr .only{font:700 .7rem var(--font-body);background:#e7ecef;color:var(--teal);border-radius:999px;padding:2px 9px;text-transform:none}
.dash .cm-res.present{background:#dcefd9;color:#245b1e}
/* Phase 8 part 5 — the "close to 50%" box (addition B) + Dr. Bob's preview banner */
.dash .att-warn{display:flex;gap:10px;align-items:flex-start;background:#fff6d1;border-left:5px solid var(--amber);border-radius:12px;padding:10px 12px;font-size:.92rem;margin-bottom:14px}
.dash .att-warn>i{color:var(--amber);margin-top:3px}
.dash .cmi-preview{background:#e3f3f2;border-left:5px solid var(--teal);border-radius:12px;padding:10px 12px;font-size:.92rem;margin:0 0 14px}
.dash .cmi-ok{margin-top:10px;background:var(--greenbg,#dcefd9);border-left:5px solid #245b1e;border-radius:10px;padding:10px 12px;font-size:.92rem}
.dash .cmi-ok[hidden]{display:none}
.dash .cmi-h{font-size:1rem;margin:14px 0 6px}
.dash .cmi-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dash .cmi-list>li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.dash .cmi-list .top{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.dash .cmi-list .dates,.dash .cmi-ok .dates,.cmi-box .dates{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:.9rem}
.dash .cmi-list .dates li,.dash .cmi-ok .dates li,.cmi-box .dates li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dash .cmi-list .dates s,.cmi-box .dates s{color:var(--muted)}
.dash .cmi-list .note,.cmi-box .note{color:var(--muted);font-size:.8rem;margin:6px 0 0}
.dash .linkish.danger,.cmi-box .linkish.danger,.cmi-ask .linkish.danger{color:var(--red)}
.dash .linkish.small{font-size:.8rem}
.dash .small{font-size:.85rem}
.cm-res{display:inline-flex;gap:5px;align-items:center;border-radius:999px;padding:2px 10px;font:700 .75rem var(--font-body);white-space:nowrap}
.cm-res.absent{background:#fde2dd;color:var(--red)} .cm-res.medical{background:#e3f3f2;color:var(--teal)}
.cm-res.sub{background:#fff3c4;color:#7a5a00} .cm-res.none{background:#ecefe4;color:var(--muted)} .cm-res.wait{background:#fff3c4;color:#7a5a00}
.cm-spk{display:inline-flex;gap:5px;align-items:center;background:var(--orange);color:#fff;border-radius:6px;padding:1px 8px;font:700 .72rem var(--font-body);text-transform:uppercase}
.dash .cmi-desk{border-left:6px solid var(--gold);background:#fffdf2;border-radius:12px;padding:10px 14px;margin:12px 0}
.dash .cmi-desk h3{margin:0 0 4px;font-size:1.05rem}
.dash .cmi-desk ul{margin:6px 0;padding-left:18px}
.dash .cmi-desk p{margin:4px 0}
/* the policy box: the approved 2026 wording first */
dialog.pol .pol-2026{background:#fff6d1;border-left:5px solid var(--gold);border-radius:10px;padding:8px 12px;margin-bottom:12px}
dialog.pol .pol-2026 p{margin:0 0 6px} dialog.pol .pol-2026 p:last-child{margin:0}
/* the form box */
dialog.cmi-box{border:0;border-radius:16px;padding:0;width:min(560px,94vw);max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.cmi-box::backdrop,dialog.cmi-ask::backdrop{background:rgba(4,3,2,.55)}
.cmi-box .inner{padding:18px;display:grid;gap:12px}
.cmi-box h2{font-size:1.25rem;margin:0}
.cmi-box .sub{margin:0;color:var(--muted);font-size:.88rem}
.cmi-box fieldset{border:0;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.cmi-box legend{font-weight:700;margin-bottom:4px;padding:0}
.cmi-box label.f,.cmi-ask label.f{display:grid;gap:4px;font-weight:700;font-size:.9rem}
.cmi-box input[type=text],.cmi-box select,.cmi-box textarea,.cmi-ask input[type=text]{font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:10px;width:100%;background:#fff;box-sizing:border-box}
.cmi-box .seg{display:flex;border:1px solid var(--teal);border-radius:999px;overflow:hidden;width:max-content;max-width:100%}
.cmi-box .seg button{border:0;background:#fff;color:var(--teal);font:700 .85rem var(--font-body);padding:6px 14px;cursor:pointer}
.cmi-box .seg button[aria-pressed=true]{background:var(--teal);color:#fff}
.cmi-box .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmi-box .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cmi-box .chips span{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.84rem;font-weight:600;background:#fff}
.cmi-box .chips span.skip{border-style:dashed;color:var(--muted);text-decoration:line-through}
.cmi-box .chips span.talk{border-color:var(--orange);color:var(--orange)}
.cmi-box .reason{display:grid;grid-template-columns:22px 1fr auto;gap:4px 8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:600}
.cmi-box .reason[hidden]{display:none}
.cmi-box .reason:has(input:checked){border-color:var(--teal);background:#f3f7f4;box-shadow:inset 3px 0 0 var(--teal)}
.cmi-box .reason small{grid-column:2/4;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:-2px}
.cmi-box .count{background:var(--cream);border-radius:12px;padding:10px 12px}
.cmi-box .count h3{font-size:1rem;margin:0 0 6px}
.cmi-box .headsup{margin:6px 0 0;color:var(--red);font-weight:700;font-size:.88rem}
.cmi-box .warn{background:#fff6d1;border-left:5px solid var(--gold);border-radius:10px;padding:8px 12px;font-size:.9rem}
.cmi-box fieldset[hidden],.cmi-box .warn[hidden],.cmi-box .err[hidden],.cmi-box .headsup[hidden],.cmi-box #cmi-range[hidden],.cmi-box #cmi-one[hidden],.cmi-box label.f[hidden]{display:none}
.cmi-box .err{margin:0;background:#fde2dd;color:#7a1300;border-radius:10px;padding:8px 12px;font-size:.9rem}
.cmi-box .btns,.cmi-ask .btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .cmi-box .btns .sp{flex:1}
.cmi-box .linkish,.cmi-ask .linkish{border:0;background:none;padding:0;font:inherit;color:var(--orange);font-weight:600;cursor:pointer;text-decoration:underline}
dialog.cmi-ask{border:0;border-radius:14px;padding:16px 18px;width:min(440px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35);display:none;gap:10px}
dialog.cmi-ask[open]{display:grid}
dialog.cmi-ask h3{margin:0}
dialog.cmi-ask p{margin:0;font-size:.92rem}
.cmi-ask .btn-danger{background:#fff;border:2px solid var(--red);color:var(--red)}
@media (max-width:520px){.cmi-box .two{grid-template-columns:1fr}}
/* Leadership ▸ Can't make it notices (Dr. Bob) — panel 8 */
.cmn .eyebrow{color:var(--muted);font-size:.85rem;margin:0}
.cmn h1{margin:4px 0 6px}
.cmn .lead{color:var(--muted);max-width:780px}
.cmn-g{background:var(--paper,#fbfbf5);border-radius:14px;box-shadow:0 6px 24px rgba(3,54,55,.12);padding:14px 16px;margin:14px 0}
.cmn-g h2{font-size:1.1rem;margin:0 0 6px}
.cmn .dates{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px;font-size:.9rem}
.cmn .dates li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cmn .dates s{color:var(--muted)}
.cmn .small{font-size:.85rem} .cmn .muted{color:var(--muted)}
.cmn .hist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.88rem}
.cmn .hist li{display:grid;grid-template-columns:170px 1fr;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.cmn .hist .when{color:var(--muted)}
@media (max-width:560px){.cmn .hist li{grid-template-columns:1fr;gap:2px}}
.pol-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--cream)}
.pol-head h2{margin:0;font-size:1.2rem}
.pol-head .x{border:0;background:#fff;width:36px;height:36px;border-radius:50%;font-size:1.3rem;cursor:pointer}
.pol-body{overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 20px;line-height:1.6;min-height:0}

/* =============================================================================
   P11. THURSDAY CHECK-IN (checkin-mockup-v1.html, approved 2026-09-28) — Phase 4
   Copied from the mockup's CSS (classes start ci-). Every tap saves straight to
   the meeting's record — see builder/pages/members-only-check-in.twig.
   ============================================================================= */
.ci-head{padding:4px 0 4px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;justify-content:space-between}
.ci-head h1{font-size:1.9rem;margin:0}
.ci-head p{margin:4px 0 0;color:var(--muted)}
.ci-head select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
/* Quick jump between Thursday check-in and Meeting tally, above each page's Meeting picker (Dr. Bob, 2026-10-08).
   .mt-side stacks the jump button over the picker on the check-in page; .mt-jump is shared by both pages. */
.ci-head .mt-side,.mt-head .mt-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* the tally header uses the same two columns as check-in's .ci-head (title left, jump + picker right) */
.mt-head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;justify-content:space-between}
.mt-head .mt-pick{margin-top:0}
.mt-jump{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:2px solid var(--teal);border-radius:999px;
  background:#fff;color:var(--teal);font:700 .95rem var(--font-body);text-decoration:none;white-space:nowrap}
.mt-jump:hover,.mt-jump:focus-visible{background:var(--teal);color:#fff}
@media (max-width:600px){ .ci-head .mt-side,.mt-head .mt-side{align-items:flex-start} }
.ci-tag{display:inline-block;margin-top:8px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);background:#dff0ee;border-radius:999px;padding:3px 10px}
/* sticky counter strip — the running totals you'd otherwise count on the placemat */
/* The counters stay fully visible JUST BELOW the sticky header + gold bar while scrolling (fixed
   2026-10-03: `top:0` hid them behind the bars on phones). checkin.js measures the bars and sets
   --ci-stick; the calc() is the fallback (header 64px + gold bar 46px). z-index 30 keeps them over
   the cards but under the gold bar's drop-down menus (40). */
.ci-bar{position:sticky;top:var(--ci-stick, calc(var(--header-h) + 46px));z-index:30;background:var(--cream);padding:10px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ci-n{background:#fff;border-radius:12px;border:2px solid var(--line);padding:6px 8px;text-align:center;font-size:.78rem;cursor:pointer;font-family:inherit}
.ci-n b{display:block;font:700 1.5rem/1.1 var(--font-head)}
.ci-n.P b{color:var(--green)} .ci-n.A b{color:var(--red)} .ci-n.M b{color:#4b3d8f} .ci-n.X b{color:var(--orange)}
.ci-n.S b{color:var(--amber)}                        /* Substitute counter = brand amber (Dr. Bob, 2026-10-03) */
.ci-n[aria-pressed=true]{border-color:var(--teal);background:#e3f3f2}
.ci-n.pct{cursor:default;border-color:var(--teal);background:#e3f3f2}   /* meeting attendance % (not a filter) */
.ci-n.pct b{color:var(--teal)}
.ci-saved{grid-column:1/-1;font-size:.8rem;color:var(--green);text-align:right}
.ci-saved.err{color:var(--red);font-weight:700}
.ci-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:6px 0 12px}
.ci-tools input[type=search]{flex:1 1 220px;font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.ci-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.ci-seg button{font:inherit;font-size:.85rem;border:0;background:none;padding:7px 12px;cursor:pointer}
.ci-seg button[aria-pressed=true]{background:var(--teal);color:#fff;font-weight:700}
.ci-helper{background:#f1eefb;border:1px solid #d5cdf2;border-radius:12px;padding:8px 12px;font-size:.88rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.ci-helper[hidden]{display:none}
/* decision C (2026-10-04): members recorded on two lists of this meeting */
.ci-two{background:#fde2dd;color:var(--red);border-radius:12px;padding:8px 12px;font-size:.9rem;margin-bottom:12px}
.ci-helper button,.ci-end button{font:700 .85rem var(--font-body);border:0;border-radius:999px;padding:6px 14px;cursor:pointer}
.ci-helper button{background:#4b3d8f;color:#fff}
/* member cards */
.ci-grp{font:700 .8rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin:14px 0 6px}
.ci-list{display:grid;gap:8px;grid-template-columns:1fr}
.ci-m{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.ci-m .ci-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;color:inherit}
.ci-m img,.ci-m .ini{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ci-m .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-weight:700}
.ci-m .nm{min-width:0}
.ci-m .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-m .nm small{color:var(--muted);font-size:.78rem}
.ci-m .nm small.mlast{color:#4b3d8f;font-weight:700}
.ci-m .nm small.new{color:var(--orange);font-weight:700}
.ci-pams{display:flex;gap:4px;flex:0 0 auto}
.ci-pams button{width:40px;height:40px;border-radius:10px;border:2px solid var(--line);background:#fff;font:800 1rem var(--font-body);cursor:pointer;color:#555}
.ci-pams button[aria-pressed=true].P{background:var(--green);border-color:var(--green);color:#fff}
.ci-pams button[aria-pressed=true].A{background:var(--red);border-color:var(--red);color:#fff}
.ci-pams button[aria-pressed=true].M{background:#4b3d8f;border-color:#4b3d8f;color:#fff}
/* Substitute = brand amber #EBA100 with INK text (white on amber is too faint) — Dr. Bob, 2026-10-03.
   The Meeting tally uses the same colour, so the two pages match. */
.ci-pams button[aria-pressed=true].S{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.ci-m.P{border-color:#9fd197;background:#f3faf1} .ci-m.A{border-color:#e7b0a6;background:#fdf3f1} .ci-m.M{border-color:#cbc3ec;background:#f7f5fd}
.ci-m.S{border-color:#f0cf73;background:#fdf6e1}     /* Substitute = brand amber tint (Dr. Bob, 2026-10-03); Medical stays purple */
.ci-m.busy{opacity:.6}                              /* a tap on its way to the server */
/* Phase 8 part 4 — "I can't make it" pre-marks (cant-make-it-mockup-v2 panel 6): the card wraps so the notice line sits
   under the name; the expected letter is DASHED (not saved yet); "New this morning" in orange; the guest offer dashed amber. */
.ci-m{flex-wrap:wrap}
.ci-m.pre:not(.P):not(.A):not(.M):not(.S){background:#fbf7e6;border-color:#ecd98f}
.ci-pams button.ghost{border:2px dashed var(--amber);color:#7a5a00;background:#fffbea}
.ci-nt{flex:1 1 100%;font-size:.82rem;color:#5b5f55;display:block;line-height:1.5;padding:2px 2px 0 54px}
.ci-nt .ci-subok{margin:4px 0 0 4px}
.ci-nt .ci-offer{margin-top:6px}
.ci-nt>i{color:var(--orange)}
.ci-nt .why{color:var(--teal)}
.ci-nt .newtag{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;padding:0 8px;font:700 .7rem var(--font-body)}
.ci-nt .ci-subok{font:700 .8rem var(--font-body);border:0;border-radius:999px;padding:4px 12px;background:var(--gold);color:var(--ink);cursor:pointer}
.ci-offer{flex:1 1 100%;background:#fffbea;border:1px dashed var(--amber);border-radius:10px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ci-offer button{font:700 .8rem var(--font-body);border-radius:999px;padding:4px 12px;cursor:pointer;border:1px solid var(--teal);background:#fff;color:var(--teal)}
.ci-offer button.ci-gyes{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ci-offer small{flex:1 1 100%;color:var(--muted)}
.ci-offer.done{border-style:solid;border-color:#9fd197;background:#f3faf1;color:var(--green);font-weight:700}
.ci-ntc{margin:6px 0 0;font-size:.88rem;color:var(--orange)}
.ci-ntc[hidden]{display:none}
@media (max-width:520px){.ci-nt{padding-left:2px}}
/* "No meeting on this date" (decision 7) */
.ci-none{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-align:center;margin:14px 0}
.ci-none i{font-size:1.8rem;color:var(--teal)}
.ci-none h2{margin:8px 0 6px;font-size:1.3rem}
.ci-none p{margin:0;color:var(--muted)}
/* end of check-in */
.ci-end{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin:18px 0}
.ci-end h2{font-size:1.2rem;margin:0 0 6px}
.ci-end .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ci-end .abs{background:var(--red);color:#fff}
.ci-end .abs:disabled{opacity:.45;cursor:default}
.ci-end .btn{margin:0}
.ci-hint{font-size:.82rem;color:var(--muted);line-height:1.45;margin:6px 0 0}
dialog.ci-ask{border:0;border-radius:var(--radius);padding:22px;width:min(460px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.ci-ask::backdrop{background:rgba(4,3,2,.55)}
dialog.ci-ask h3{margin:0 0 8px} dialog.ci-ask p{margin:0 0 16px;line-height:1.5}
dialog.ci-ask .btns{display:flex;gap:8px;justify-content:flex-end} dialog.ci-ask .btn{margin:0}
/* "Draw a name" (Dr. Bob, 2026-10-03) — for the in-meeting drawings ("Did you greet our visitor?",
   "Did you give a referral last week?"…). The button sits right of the title; the drawn name right
   of the button; on narrow screens both wrap to a line under the title. checkin.js does the drawing. */
.ci-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ci-draw{font:700 .9rem var(--font-body);border:0;border-radius:999px;padding:8px 16px;cursor:pointer;
  background:var(--teal);color:#fff;white-space:nowrap}
.ci-draw:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ci-drawn{font:700 1.7rem/1.15 var(--font-head);color:var(--ink)}           /* the name: large, no photo */
.ci-drawn.msg{font:600 .95rem var(--font-body);color:var(--muted)}           /* "No one is marked Present yet" etc. */
.ci-drawlist{margin:6px 0 0;font-size:.85rem;color:var(--muted)}
.ci-drawlist[hidden]{display:none}
.ci-drawlist a{color:var(--orange);font-weight:600;margin-left:6px;cursor:pointer}
/* Sticky counters: a card scrolled to (e.g. after Find) stops BELOW them, not underneath. */
.ci-m{scroll-margin-top:calc(var(--ci-stick, 110px) + 120px)}

/* =============================================================================
   P12. MEETING TALLY (meeting-tally-mockup-v1.html, approved 2026-09-28) — Phase 4 part 3
   Copied from the mockup's CSS (classes start mt-), with check-in's colours:
   Substitute = brand amber + ink text, Medical = purple (Dr. Bob, 2026-10-03).
   The typed numbers stay in the browser — see public/assets/js/meeting-tally.js.
   ============================================================================= */
.mt-head{padding:4px 0 4px}
.mt-head h1{font-size:1.9rem;margin:0}
.mt-head p{margin:4px 0 0;color:var(--muted)}
.mt-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mt-tag{font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:3px 10px}
.mt-tag.lead{color:var(--teal);background:#dff0ee}
.mt-tag.nosave{color:#7a3f00;background:#ffe9b8}
.mt-head p.mt-local{font-size:.85rem;color:#7a3f00;margin-top:6px}          /* "kept in this browser only" */
.mt-pick{margin-top:10px}
.mt-pct{margin:0 0 12px;font-size:1rem;color:var(--muted)}   /* Summary: meeting attendance % (2026-10-08) */
.mt-pct b{font:700 1.6rem/1 var(--font-head);color:var(--teal);margin-right:6px}
.mt-pick select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
/* tab strip: Table 1..10 · (Not on the chart) · Summary · Report — sticks below the header + gold bar */
.mt-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:16px 0 0;position:sticky;top:var(--ci-stick, calc(var(--header-h) + 46px));z-index:30;background:var(--cream);padding:8px 0}
.mt-tabs button{position:relative;border:2px solid var(--line);background:#fff;border-radius:12px;padding:7px 10px;font:700 .92rem var(--font-body);cursor:pointer;color:var(--ink)}
.mt-tabs button[aria-selected=true]{border-color:var(--teal);background:var(--teal);color:#fff}
.mt-tabs button.done::after{content:"\f00c";font:900 .6rem 'Font Awesome 6 Free';position:absolute;top:-6px;right:-6px;background:var(--green);color:#fff;border-radius:50%;width:16px;height:16px;display:grid;place-items:center}   /* ✓ typed in */
.mt-tabs button.flag::after{content:"!";font:900 .7rem var(--font-body);position:absolute;top:-6px;right:-6px;background:var(--orange);color:#fff;border-radius:50%;width:16px;height:16px;display:grid;place-items:center}       /* ! attendance to check */
.mt-tabs .sp{flex:1;min-width:4px}
.mt-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin:12px 0}
.mt-card h2{font-size:1.2rem;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.mt-hint{font-size:.82rem;color:var(--muted);line-height:1.45;margin:4px 0 10px}
.mt-err{background:#fdf3f1;color:var(--red);font-weight:700;border-radius:10px;padding:8px 12px;font-size:.9rem}
/* the entry grid — same rows/columns as the paper sheet */
.mt-scroll{overflow-x:auto}
table.mt-grid{border-collapse:collapse;width:100%;min-width:860px;font-size:.92rem}
.mt-grid th{background:#66CED9;font:700 .78rem var(--font-body);padding:6px 4px;border:1px solid #9fb6b4;line-height:1.15}
.mt-grid td{border:1px solid #cfd3c4;padding:0;height:44px;background:#fff}
.mt-grid td.c{text-align:center}
.mt-grid td.nm{padding:4px 10px;min-width:200px}
.mt-grid td.nm b{display:block;font-weight:600}
.mt-grid td.nm small{font-size:.74rem;color:var(--muted)}
.mt-grid tr.co td.nm b{font-weight:500}                                       /* co-owner row */
.mt-grid input[type=text]{width:100%;height:42px;border:0;text-align:center;font:600 1.05rem var(--font-body);background:transparent}
.mt-grid input[type=text]:focus{outline:3px solid var(--gold);outline-offset:-3px;background:#fffbe8}
.mt-grid input.sub{text-align:left;font-weight:400;font-size:.92rem}
.mt-grid input.bad{background:#f6d6d0;outline:3px solid var(--red);outline-offset:-3px;transition:background .3s}   /* not a number → cleared */
.mt-grid td.att{text-align:center;width:120px}
.mt-grid .mt-none{color:var(--muted)}
.mt-grid select.mt-att{width:100%;height:42px;border:0;font:700 1rem var(--font-body);text-align:center;background:transparent;cursor:pointer}
.mt-grid select.mt-att:focus{outline:3px solid var(--gold);outline-offset:-3px}
.mt-grid select.mt-att.P{background:#dcefd9;color:#245b1e} .mt-grid select.mt-att.A{background:#f6d6d0;color:var(--red)}
.mt-grid select.mt-att.M{background:#e7e4f3;color:#4b3d8f}
.mt-grid select.mt-att.S{background:var(--amber);color:var(--ink)}         /* Substitute = amber + ink (matches check-in) */
.mt-grid td small.mt-am{display:block;font-weight:400;font-size:.72rem;color:var(--muted)}
.mt-grid tr.tot td{background:#eef3ee;font-weight:700;text-align:center;padding:0 6px}
.mt-grid tr.tot td.nm{text-align:left}
.mt-grid tr.warn td{background:#fff4dc}
/* check-in status chip next to each member's name */
.mt-ci{display:inline-block;font:700 .66rem var(--font-body);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:1px 7px;margin-top:2px}
.mt-ci.p{background:#dcefd9;color:#245b1e} .mt-ci.a{background:#f6d6d0;color:var(--red)} .mt-ci.m{background:#e7e4f3;color:#4b3d8f}
.mt-ci.s{background:var(--amber);color:var(--ink)} .mt-ci.x{background:#eee;color:#666}
.mt-fix{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:4px;font-size:.8rem;color:#7a3f00}
.mt-fix button,.mt-list button{font:700 .78rem var(--font-body);border:0;border-radius:999px;background:var(--green);color:#fff;padding:4px 10px;cursor:pointer}
.mt-fixed{font-size:.78rem;color:var(--green);font-weight:700}
/* summary */
.mt-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt-list li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:#fff8e6;border:1px solid #f0d58e;border-radius:12px;padding:8px 12px}
.mt-list li.okk{background:#eef7ec;border-color:#bfe0b8}
/* report — big type, readable from the back of the room / on the projector */
.mt-rep{background:var(--ink);color:#fff;border-radius:var(--radius);padding:22px;margin:12px 0}
/* FULL SCREEN = the projector (Dr. Bob, 2026-10-03; reworked the same day after his MacBook test).
   ONE base size for the whole report, from BOTH the screen's height and width:
       font-size = min(2.72vh, 1.95vw)
   and EVERYTHING inside is in em of that base, so title, tiles and table grow together and the block
   keeps its shape on any screen. The block is centred vertically: spare room goes above and below it,
   never between the sections. On 1920×1080 the base is ~29px (table text 29px, labels ~20px, tile
   numbers ~76px). Checked at 1920×1080, 1440×900, 1280×720 and 2056×1329 (Dr. Bob's MacBook):
   no scrolling, no gaps. The normal page view is untouched. */
.mt-rep:fullscreen{overflow:auto;border-radius:0;padding:0 4vw;display:flex;flex-direction:column;justify-content:center;
  font-size:min(2.72vh,1.95vw)}
.mt-rep:fullscreen > *{flex:0 0 auto}                                   /* sections never stretch apart */
.mt-rep:fullscreen .mt-rep-top h2{font-size:1.9em}
.mt-rep:fullscreen .sub{font-size:.8em;margin:.15em 0 0}
.mt-rep:fullscreen .sub.small{font-size:.62em;margin-top:.9em}
.mt-rep:fullscreen .btn{font-size:.65em;padding:.55em 1.2em}
.mt-rep:fullscreen h3{font-size:.68em;margin:1.4em 0 .7em}
.mt-rep:fullscreen .mt-tiles{grid-template-columns:repeat(4,1fr);gap:.45em .45em}
.mt-rep:fullscreen .mt-tile{padding:.35em .55em;border-radius:.5em}
.mt-rep:fullscreen .mt-tile b{font-size:2.6em;line-height:1.05}
.mt-rep:fullscreen .mt-tile span{font-size:.68em}
.mt-rep:fullscreen table.mt-off{font-size:1em}
.mt-rep:fullscreen .mt-off th{font-size:.68em;padding:.4em .3em}
.mt-rep:fullscreen .mt-off td{padding:.22em .3em}
.mt-rep-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start}
.mt-rep h2{color:var(--gold);font-size:1.6rem;margin:0}
.mt-rep .sub{color:#cfd3c4;margin:2px 0 16px}
.mt-rep .sub.small{margin-top:12px;font-size:.85rem}
.mt-rep h3{font:700 .85rem var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin:22px 0 10px}
.mt-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mt-tile{background:#1c1a17;border-radius:14px;padding:12px 14px}
.mt-tile b{display:block;font:700 2.1rem/1.1 var(--font-head);color:#fff}
.mt-tile span{font-size:.9rem;color:#cfd3c4}
.mt-tile.gold b{color:var(--gold)}
table.mt-off{width:100%;border-collapse:collapse;font-size:1.05rem}
.mt-off th{font:700 .8rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:#cfd3c4;text-align:right;padding:6px 8px;border-bottom:1px solid #444}
.mt-off th:first-child,.mt-off td:first-child{text-align:left}
.mt-off td{padding:9px 8px;border-bottom:1px solid #2c2a26;text-align:right;font-variant-numeric:tabular-nums}
.mt-off td.hi{color:var(--gold);font-weight:700}
.mt-rep .btn{margin:0}
.mt-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:18px 0}
.mt-foot .btn{margin:0}
dialog.mt-ask{border:0;border-radius:var(--radius);padding:22px;width:min(440px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.mt-ask::backdrop{background:rgba(4,3,2,.55)}
dialog.mt-ask h3{margin:0 0 8px} dialog.mt-ask p{margin:0 0 16px;line-height:1.5}
dialog.mt-ask .btns{display:flex;gap:8px;justify-content:flex-end} dialog.mt-ask .btn{margin:0}

/* =============================================================================
   P13. SEATING CHART GENERATOR (seating-admin-mockup-v1.html, approved) — Phase 4 part 4
   Copied from the mockup; every rule scoped to .st (the page's wrapper) so the
   generic names (.step, .hint, .chart …) can't clash with site-wide classes.
   ============================================================================= */
.st .st-head{padding:4px 0 4px}
.st .st-head h1{font-size:1.9rem;margin:0}
.st .st-head p{margin:4px 0 0;color:var(--muted)}
.st .only{display:inline-block;margin-top:8px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);background:#dff0ee;border-radius:999px;padding:3px 10px}
.st .st-msg{background:#dcefd9;color:#245b1e;border-radius:12px;padding:12px 14px;margin:14px 0 0}
.st .st-msg.bad{background:#fdf3f1;color:var(--red);font-weight:700}
.st .step{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin:16px 0}
/* The public "Our Story" timeline also uses .step (lines ~520–528 and its desktop rules ~1467–1470:
   a 2-column grid, centred, with a timeline dot). Switch all of that OFF inside this page so the
   step boxes stay one column, top-aligned, with no stray dot (Dr. Bob, 2026-10-03). */
.st .step{display:block;position:static;gap:0;grid-template-columns:none;align-items:normal}
.st .step::before{content:none;display:none}
.st .step h2{font-size:1.2rem;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.st .step h2 .n{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font:700 .9rem var(--font-body)}
.st .row3{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.st .row3 select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;max-width:100%}   /* max-width: mobile audit 2026-10-06 */
.st .row3 label{max-width:100%}
.st .count{font-size:1.02rem;color:var(--ink)}
.st .count b{font:700 1.5rem var(--font-head);color:var(--teal)}
.st .cos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.st .cos label{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.9rem;cursor:pointer}
.st .cos label small{color:var(--muted)}
.st .cos input{width:18px;height:18px;accent-color:var(--teal)}
.st .hint{font-size:.82rem;color:var(--muted);margin-top:6px;line-height:1.45}
.st .capslabel{font:700 .8rem var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:12px}   /* "Seats per table (for a new draft)" */
.st .caps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.st .cap{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:.78rem;text-align:center}
.st .cap.bad{grid-column:1/-1;color:var(--red);font-weight:700;font-size:.9rem;border-color:var(--red)}
.st .cap b{display:block;font:700 1.15rem var(--font-head);color:var(--teal)}
.st .cap small{color:var(--muted)}
.st .gen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.st .gen .btn{margin:0}
.st .draftno{font-size:.9rem;color:var(--muted)}
.st .chart{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));margin-top:6px}
.st .tc{background:#fff;border-radius:14px;border:1px solid var(--line);border-top:5px solid var(--teal);padding:10px 12px}
.st .tc.t10{border-top-color:var(--gold)}
.st .tc h3{margin:0 0 6px;font-size:1.1rem;display:flex;justify-content:space-between;align-items:baseline}
.st .tc h3 small{font:600 .75rem var(--font-body);color:var(--muted)}
.st .seats{display:flex;gap:3px;margin-bottom:8px}
.st .seats i{width:14px;height:14px;border-radius:4px;background:#e3e6d6;display:block}
.st .seats i.f{background:var(--teal)}
.st .seats i.chair{outline:2px dashed var(--orange);outline-offset:-2px;background:transparent}
.st .seats i.chair.f{background:var(--orange);outline:0}
.st .tc ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st .tc li{display:flex;align-items:center;gap:8px;font-size:.9rem;line-height:1.2}
.st .tc li img,.st .tc li .ini{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.st .tc li .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.65rem}
.st .tc li small{color:var(--muted)}
.st .tc li.co{padding-left:18px;color:var(--muted);font-size:.85rem}
.st .tc li.co .ini{background:#9fb9b9;width:22px;height:22px}
.st .tc .note2{font-size:.72rem;color:var(--orange);margin-top:6px}
.st .checks{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:4px;font-size:.9rem}
.st .checks li{display:flex;gap:8px;align-items:flex-start}
.st .checks .ok{color:var(--green)}
.st .checks .bad{color:var(--red)}
.st .pubbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.st .pubbar[hidden]{display:none}
.st .pubbar .btn{margin:0}
.st .tpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.st .tpick button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 4px;font:700 .95rem var(--font-body);cursor:pointer;color:var(--ink)}
.st .tpick button small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
.st .tpick button:hover:not(:disabled){border-color:var(--teal);background:#e3f3f2}
.st .tpick button:disabled{opacity:.4;cursor:not-allowed}
.st .reprint{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.st .reprint span,.st .reprint a{background:#fff;border:1px dashed var(--orange);color:var(--orange);border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:700;text-decoration:none}
.st .hist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st .hist li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.st .hist b{min-width:130px}
.st .hist small{color:var(--muted)}
.st .hist button.lnk,.st .hist a.lnk{color:var(--orange);background:none;border:0;cursor:pointer;font:inherit;font-weight:700;padding:0;text-decoration:none}
.st .hist .soon{color:var(--muted);font-size:.8rem}
.st .cur{font:700 .68rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;background:var(--gold);border-radius:999px;padding:2px 8px}
.st dialog.ask{border:0;border-radius:var(--radius);padding:22px;width:min(460px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.st dialog.ask::backdrop{background:rgba(4,3,2,.55)}
.st dialog.ask h3{margin:0 0 8px}
.st dialog.ask p{margin:0 0 16px;line-height:1.5}
.st dialog.ask .btns{display:flex;gap:8px;justify-content:flex-end}
.st dialog.ask .btn{margin:0}

/* =============================================================================
   P14. MEMBERS' SEATING VIEW (reports-mockup-v1.html › Seating: Cards + Room, approved) — Phase 4 part 4
   Scoped to .se (the page's wrapper). Room = Rudy's seen from the back of the room.
   ============================================================================= */
.se .se-head{padding:4px 0 8px}
.se .se-head h1{font-size:1.9rem;margin:0}
.se .se-head p{margin:4px 0 0;color:var(--muted)}
.se .seatbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.se .seatbar select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.se .mytbl{background:linear-gradient(135deg,var(--teal),#0b4d4f);color:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:22px;display:grid;gap:14px}
.se .mytbl .big{font:700 2.4rem var(--font-head);color:var(--gold);line-height:1}
.se .mytbl .big small{display:block;font:600 .85rem var(--font-body);color:var(--cream);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.se .mytbl ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.se .mytbl li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:999px;padding:4px 14px 4px 4px}
.se .mytbl li img,.se .mytbl li .ini{width:38px;height:38px;border-radius:50%;object-fit:cover}
.se .mytbl li .ini{display:grid;place-items:center;background:var(--gold);color:var(--ink);font-size:.75rem}
.se .mytbl .you{background:var(--gold);color:var(--ink)}
.se .alltbl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.se .alltbl{font-size:1.2rem;margin:0}
.se .seg2{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.se .seg2 button{font:inherit;font-size:.85rem;border:0;background:none;padding:7px 12px;cursor:pointer;color:var(--ink)}
.se .seg2 button[aria-pressed=true]{background:var(--teal);color:#fff;font-weight:700}
.se .seat{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:30px}
.se .seat[hidden],.se .room[hidden]{display:none}
.se .tbl2{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;border-top:5px solid var(--teal)}
.se .tbl2.mine2{border-top-color:var(--gold);outline:2px solid var(--gold)}
.se .tbl2 h3{margin:0 0 8px;font-size:1.15rem;display:flex;justify-content:space-between}
.se .tbl2 h3 .cnt{font:600 .75rem var(--font-body);color:var(--muted)}
.se .tbl2 h3 .cnt b{color:var(--orange)}
.se .tbl2 ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.se .tbl2 li{display:flex;align-items:center;gap:8px;font-size:.9rem}
.se .tbl2 li img,.se .tbl2 li .ini{width:28px;height:28px;border-radius:50%;object-fit:cover}
.se .tbl2 li .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.65rem}
.se .tbl2 li.co{padding-left:20px;font-size:.84rem;color:var(--muted)}
.se .room{background:#e6dcc8;border-radius:18px;padding:12px;margin-bottom:30px;box-shadow:inset 0 0 0 3px #cdbf9f}
.se .room .edge{text-align:center;font:800 .72rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#6b5a3a;padding:4px 0 10px}
.se .room .edge.front{padding:10px 0 2px}
.se .room .edge i{margin:0 6px}
.se .room-grid{display:grid;grid-template-columns:1fr 26px 1fr;grid-template-rows:repeat(5,auto);gap:10px 8px}
.se .room .aisle{grid-column:2;grid-row:1 / span 5;border-left:2px dashed #b9a883;margin-left:12px}
.se .room .aisle span{position:sticky;top:40%;display:block;writing-mode:vertical-rl;transform:rotate(180deg);font:700 .65rem var(--font-body);letter-spacing:.2em;color:#8a7650;margin-left:-8px;text-transform:uppercase}
.se .rt2{background:var(--paper);border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.12);padding:8px 10px 10px;border-top:6px solid #a8763e}
.se .rt2.mine2{outline:3px solid var(--gold);border-top-color:var(--gold)}
.se .rt2.t10{border-top-color:var(--teal)}
.se .rt2 .th{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.se .rt2 .num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#66CED9;color:#fff;display:grid;place-items:center;font:900 1.05rem var(--font-body)}
.se .rt2 .th b{font:700 1rem var(--font-head);line-height:1.1}
.se .rt2 .th small{display:block;font:600 .7rem var(--font-body);color:var(--muted)}
.se .rt2 .th .you{color:var(--orange)}
.se .rt2 ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.se .rt2 li{display:flex;align-items:center;gap:6px;font-size:.84rem;line-height:1.15}
.se .rt2 li img,.se .rt2 li .ini{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.se .rt2 li .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.58rem}
.se .rt2 li.co{padding-left:30px;font-size:.78rem;color:var(--muted)}
.se .rt2 li.me{font-weight:700}
.se .rt2 .front-note{font-size:.7rem;color:var(--muted);margin-top:6px;font-style:italic}
/* phones: no photos in the Room view, tighter grid (as the mockup) */
@media (max-width:699px){
  .se .rt2 li img,.se .rt2 li .ini{display:none}
  .se .rt2 li.co{padding-left:8px}
  .se .rt2{padding:7px 8px 8px}
  .se .rt2 .num{width:28px;height:28px;font-size:.9rem}
  .se .room{padding:8px}
  .se .room-grid{grid-template-columns:1fr 14px 1fr;gap:8px 4px}
  .se .room .aisle{margin-left:5px}
}

/* =============================================================================
   P15. TURN IN A SLIP (slips-mockup-v1.html, approved) — Phase 5 part 2
   Page: builder/pages/members-only-slips.twig · script: js/slips.js
   Every rule is scoped to .sl: the site already has global .two, .chips, .hint
   (Home / Our Story), so unscoped mockup rules would leak both ways.
   Ported from docs/plans/_generators/slips_body.html; changes are commented.
   ============================================================================= */
.sl{max-width:760px;margin:0 auto}
.sl .sl-head{padding:8px 0 4px}
.sl .sl-head h1{font-size:1.9rem;margin:0}
.sl .sl-head p{margin:4px 0 0;color:var(--muted)}
.sl .review-note{margin:12px 0 0}
/* slip chooser — the six slips; each keeps the colour members know from the old site */
.sl .chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.sl .chooser button{border:2px solid transparent;background:var(--paper);border-radius:14px;padding:10px 6px;cursor:pointer;box-shadow:var(--shadow);
  font:600 .8rem var(--font-body);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;line-height:1.15}
.sl .chooser i{font-size:1.25rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.sl .chooser button[aria-pressed=true]{border-color:var(--ink)}
.sl .c-tyfb{--c:#0e7c7b;--t:#e3f3f2} .sl .c-ref{--c:#4f6d8f;--t:#e7edf5} .sl .c-pm{--c:#b8860b;--t:#fbf1dc}
.sl .c-sml{--c:#3f8a3a;--t:#e6f2e2} .sl .c-tes{--c:#c0504d;--t:#fbe5e3} .sl .c-gst{--c:#6a5fb5;--t:#ecebf8}
.sl .chooser button i{background:var(--c)}
/* the slip card (.sc — the dashboard CSS already uses .slip for its buttons) */
.sl .sc{display:none;padding:0;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:40px}
.sl .sc.on{display:block}
.sl .sc .band{background:var(--t);border-top:6px solid var(--c);padding:16px 18px}
.sl .sc .band h2{margin:0;font-size:1.45rem;display:flex;align-items:center;gap:10px;color:var(--ink)}   /* ink stated outright (2026-10-03) */
.sl .sc .band h2 i{color:var(--c)}
.sl .c-pm .band h2 i{color:#8a6408}           /* WCAG: the PM gold on its pale band was 2.90:1 → 4.79:1 (Dr. Bob, 2026-10-03) */
.sl .sc .band p{margin:6px 0 0;font-size:.92rem;line-height:1.45;color:var(--ink)}
.sl .sc form{padding:16px 18px 20px}
.sl .f{margin-bottom:16px}
.sl .f>label,.sl .f>.lab{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.sl .f label small,.sl .f .lab small{font-weight:400;color:var(--muted)}
.sl .f input[type=text],.sl .f input[type=email],.sl .f input[type=tel],.sl .f input[type=date],.sl .f input[type=number],.sl .f textarea,.sl .f select{
  width:100%;font:inherit;font-size:1.05rem;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.sl .f textarea{min-height:110px;resize:vertical}
.sl .f input:focus,.sl .f textarea:focus,.sl .f select:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.sl .hint{font-size:.82rem;color:var(--muted);margin-top:5px;line-height:1.4}
.sl .two{display:grid;gap:0 14px}
/* "From" line — filled in automatically from the sign-in */
.sl .me{display:flex;align-items:center;gap:10px;background:#fff;border:1px dashed var(--line);border-radius:12px;padding:8px 12px;font-size:.95rem}
.sl .me img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.sl .me small{color:var(--muted)}
.sl .anon{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--c);border-radius:12px;padding:10px 12px;font-size:.92rem}
.sl .anon i{color:var(--c);font-size:1.2rem;margin-top:2px}
/* member picker button */
.sl .pickbtn{width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:2px dashed var(--c);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
.sl .pickbtn .ph{width:44px;height:44px;border-radius:50%;background:var(--t);display:grid;place-items:center;color:var(--c);font-size:1.1rem;flex:0 0 auto;object-fit:cover}
.sl .pickbtn b{display:block} .sl .pickbtn small{color:var(--muted)}
.sl .pickbtn.chosen{border-style:solid}
.sl .pickbtn .chg{margin-left:auto;color:var(--orange);font-weight:700;font-size:.85rem}
/* segmented choices & chips (the site's own .chips is a grid — reset to the mockup's flex row) */
.sl .seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sl .seg label,.sl .chips label{position:relative;cursor:pointer}
.sl .seg input,.sl .chips input{position:absolute;opacity:0}
.sl .seg span{display:block;border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font-size:.88rem;line-height:1.35;height:100%}
.sl .seg span b{display:block;font-size:.98rem}
.sl .seg input:checked+span,.sl .chips input:checked+span{border-color:var(--c);background:var(--t)}
.sl .seg input:disabled+span{opacity:.55;cursor:not-allowed}
.sl .seg input:focus-visible+span,.sl .chips input:focus-visible+span{outline:2px solid var(--gold)}     /* keyboard users see where they are */
.sl .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.sl .chips span{display:block;border:2px solid var(--line);border-radius:999px;padding:9px 14px;background:#fff;font-weight:600;font-size:.92rem}
/* How hot slider: grey → red track as it heats up; big thumb for thumbs */
.sl .hotv{display:inline-block;margin-left:8px;background:var(--red);color:#fff;border-radius:999px;padding:2px 12px;font-size:.85rem}
.sl .hot-range{width:100%;height:34px;-webkit-appearance:none;appearance:none;background:transparent;margin:6px 0 0}
.sl .hot-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,#9fb9b9,var(--amber),var(--red))}
.sl .hot-range::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,#9fb9b9,var(--amber),var(--red))}
.sl .hot-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--c);margin-top:-10px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sl .hot-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--c)}
.sl .hot-scale{position:relative;height:2.5em;font-size:.75rem;color:var(--muted);line-height:1.2;margin:2px 15px 0}   /* labels sit under the 5 thumb stops */
.sl .hot-scale span{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
.sl .hot-scale span:nth-child(1){left:0} .sl .hot-scale span:nth-child(2){left:25%} .sl .hot-scale span:nth-child(3){left:50%} .sl .hot-scale span:nth-child(4){left:75%} .sl .hot-scale span:nth-child(5){left:100%}
.sl .money{position:relative}
.sl .money::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.15rem;color:var(--muted)}
.sl .money input{padding-left:30px!important;font-size:1.3rem!important;font-weight:700}
.sl .toggle{display:flex;gap:10px;align-items:center;font-size:.95rem;cursor:pointer}
.sl .toggle input{width:22px;height:22px;accent-color:var(--c)}
.sl .go{width:100%;border:0;border-radius:999px;padding:15px;font:700 1.1rem var(--font-body);cursor:pointer;background:var(--gold);color:var(--ink);margin-top:4px}
.sl .go:disabled{opacity:.6;cursor:wait}
.sl .subnote{font-size:.82rem;color:var(--muted);text-align:center;margin-top:8px}
.sl .asorg{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px;font-size:.9rem}
.sl .asorg label{display:flex;gap:6px;align-items:center;cursor:pointer}
.sl .asorg input{accent-color:var(--c);width:18px;height:18px}
.sl .only{font:700 .66rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);background:#dff0ee;border-radius:999px;padding:2px 8px}
.sl .contact{border:1px solid var(--line);border-radius:14px;padding:12px 14px 2px;background:#fff;margin-bottom:16px}
.sl .contact[hidden]{display:none}
.sl .contact h3{font:700 .95rem var(--font-body);margin:0 0 10px}
/* chair check on the guest slip */
.sl .chk{display:none;border-radius:10px;padding:9px 12px;font-size:.88rem;margin-top:8px;line-height:1.4}
.sl .chk.clear{display:block;background:#dcefd9;color:#245b1e} .sl .chk.conflict{display:block;background:#fff3c4;color:#6b4f00}
.sl .google{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:.9rem}
.sl .google a{color:var(--orange);font-weight:700}
/* NEW (not in the mockup): the server's plain-English answer when it refuses a slip */
.sl .sl-err{background:#fde8e4;color:var(--red);border-radius:10px;padding:10px 12px;font-size:.92rem;margin:0 0 12px;font-weight:600}
.sl .sl-err[hidden]{display:none}
/* confirmation */
.sl .done{display:none;padding:28px 18px 26px;text-align:center}
/* The "sent" state is .sl-sent, NOT .sent: the Home seat form's site-wide .sent (teal panel, cream text, gold
   headings — amrp.css lines 490–493) leaked onto the slip card and made its header and confirmation unreadable
   (Dr. Bob, 2026-10-03). */
.sl .sc.sl-sent form{display:none} .sl .sc.sl-sent .done{display:block}
.sl .done .big{width:70px;height:70px;border-radius:50%;background:#dcefd9;color:#245b1e;display:grid;place-items:center;font-size:2rem;margin:0 auto 10px}
.sl .done h3{margin:0 0 6px;font-size:1.4rem}
.sl .done p{margin:4px auto;max-width:460px;line-height:1.5;color:var(--ink)}       /* normal body colour (19.8:1) */
.sl .done .waits{display:block;margin-top:6px;font-weight:700;color:var(--teal)}      /* NEW: "It counts once Dr. Bob approves it." */
.sl .done .btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.sl .done .btn{margin:0}
/* picker dialog (Safari-safe) */
.sl .sl-pick{border:0;border-radius:var(--radius);padding:0;width:min(520px,94vw);max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.35);display:none;flex-direction:column;overflow:hidden}
.sl .sl-pick[open]{display:flex} .sl .sl-pick::backdrop{background:rgba(4,3,2,.55)}
.sl .pk-head{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.sl .pk-head h3{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.sl .pk-head h3 button{border:0;background:none;font-size:1.5rem;cursor:pointer;color:var(--muted)}
.sl .pk-head input{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px}
.sl .pk-list{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:6px 8px 10px}
.sl .pk-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:10px;cursor:pointer;border:0;background:none;width:100%;text-align:left;font:inherit;color:var(--ink)}
.sl .pk-row:hover{background:var(--cream)}
.sl .pk-row img,.sl .pk-row .ini{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.sl .pk-row .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.8rem}
.sl .pk-row b{display:block} .sl .pk-row small{color:var(--muted)}
.sl .pk-sep{font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 8px 4px}
html.modal-open,html.modal-open body{overflow:hidden}
/* 5c (2026-10-04): the "New member" tag in the member picker, while a new member is not yet public */
.sl .sl-new{display:inline-block;margin-left:6px;background:#e3f3f2;color:var(--teal);border-radius:999px;padding:1px 8px;font:700 .66rem var(--font-body);text-transform:uppercase;vertical-align:1px}
/* Dr. Bob's own-slip "possible duplicate" box (Part 5a) */
.sl .sl-ask{border:0;border-radius:var(--radius);padding:20px 22px;max-width:min(440px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sl .sl-ask::backdrop{background:rgba(4,3,2,.55)}
.sl .sl-ask h3{margin:0 0 8px;color:#7a5a00} .sl .sl-ask p{margin:0 0 14px;line-height:1.5}
.sl .sl-ask .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .sl .sl-ask .btn{margin:0}
@media (min-width:700px){
  .sl .chooser{grid-template-columns:repeat(6,1fr)}
  .sl .two{grid-template-columns:1fr 1fr}
  .sl .sc form,.sl .sc .band{padding-left:26px;padding-right:26px}
  .sl .go{width:auto;padding:14px 40px}
  .sl .subnote{text-align:left}
}

/* =============================================================================
   P16. MY EVENTS & SPECIALS (event-submit-mockup-v1 + specials-mockup-v1 view 5,
   approved) — Phase 5 part 3. Page: members-only-my-events.twig · js/my-events.js
   Scoped to .mev. The site already has global .people (a grid), .panel (white,
   gold top border), .badge (white text), .field, .mchip — every property that
   matters is stated here so none of them can restyle this page.
   ============================================================================= */
.mev .mev-head{padding:8px 0 4px}
.mev .mev-head h1{font-size:1.9rem;margin:0}
.mev .mev-head p{margin:4px 0 0;color:var(--muted)}
.mev .review-note{margin:12px 0 0}
.mev .mev-done{background:#dcefd9;color:#245b1e;border-radius:12px;padding:12px 14px;margin:14px 0 0;font-weight:600}
.mev .mev-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.mev .mev-tabs button{border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px 18px;font:700 .95rem var(--font-body);cursor:pointer}
.mev .mev-tabs button[aria-selected=true]{border-color:var(--teal);background:var(--teal);color:#fff}
.mev [hidden]{display:none !important}
/* --- event form (event-submit mockup) --- */
/* minmax(0,1fr): without it the form column grew to its longest help sentence (995 px) on a phone —
   Joshua's sideways scrolling, mobile audit 2026-10-06 */
.mev .layout{display:grid;gap:24px;padding:18px 0 10px;grid-template-columns:minmax(0,1fr)}
.mev .panel{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border-top:0}
.mev .panel h2{font-size:1.4rem;margin:0 0 10px}
.mev fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.mev legend{font-family:var(--font-head);color:var(--orange);font-size:1.1rem;margin-bottom:8px}
.mev .field{margin-bottom:14px}
.mev .field label,.mev .field .lab{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px}
.mev .field label small,.mev .field .lab small{font-weight:400;color:var(--muted)}
.mev .req{color:var(--red)}
.mev .field input,.mev .field select,.mev .field textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.mev .field textarea{min-height:140px;resize:vertical}
.mev .field input:focus,.mev .field select:focus,.mev .field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.mev .two{display:grid;gap:0 14px}
.mev .check{display:flex;gap:8px;align-items:center;font-size:.92rem;margin:4px 0 12px}
.mev .help{font-size:.82rem;color:var(--muted);margin-top:4px}
.mev .submit{width:100%;border:0;cursor:pointer;font-size:1.05rem}
.mev .review{display:flex;gap:10px;background:#fff8dc;border-radius:10px;padding:12px;font-size:.9rem;margin-bottom:14px}
.mev .review i{color:var(--orange);margin-top:3px}
/* NEW (no uploads in Phase 5): "Email your flyer to Dr. Bob" line */
.mev .flyer{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin:0;font-size:.92rem}
.mev .flyer i{color:var(--teal);margin-right:4px}
.mev .flyer a{color:#a84a00;font-weight:700;word-break:break-all}        /* 5.9:1 on white (WCAG AA) */
.mev .copy{border:1px solid var(--teal);background:#fff;color:var(--teal);border-radius:999px;padding:2px 10px;font:700 .8rem var(--font-body);cursor:pointer;margin:0 2px;vertical-align:middle}
.mev .copy.done{background:var(--teal);color:#fff}
/* preview card = the same look as the public Events page */
.mev .pv{background:var(--cream);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.mev .pv .img{height:170px;background:linear-gradient(135deg,var(--gold),var(--orange));display:grid;place-items:center;color:#fff;font-size:2rem}
.mev .pv .pad{padding:14px 16px}
.mev .pv h3{margin:.3em 0}
.mev .badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:#a84a00;padding:2px 8px;border-radius:999px}   /* #a84a00: white text 6.0:1 (the mockup's orange was 4.5) */
.mev .pv .meta{font-size:.9rem;color:var(--muted)}
.mev .sticky{position:sticky;top:84px}
/* AMRP members involved: chips + pop-up picker */
.mev .people{display:flex;flex-wrap:wrap;gap:6px;align-items:center;grid-template-columns:none}
.mev .mchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 3px;font-size:.86rem;font-weight:600;color:var(--teal);line-height:1.2}
.mev .mchip img,.mev .mchip .ini{width:28px;height:28px;border-radius:50%;object-fit:cover}
.mev .mchip .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.7rem}
.mev .mchip .you{font-weight:400;color:var(--muted);font-size:.78rem;padding-right:6px}
.mev .mchip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 4px}
.mev .addp{border:2px dashed var(--teal);background:none;color:var(--teal);border-radius:999px;padding:5px 12px;font:700 .86rem var(--font-body);cursor:pointer}
.mev .pv .people{margin-top:8px} .mev .pv .mchip{font-size:.8rem}
.mev .mev-pick{border:0;border-radius:var(--radius);padding:0;width:min(520px,94vw);max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.35);display:none;flex-direction:column;overflow:hidden}
.mev .mev-pick[open]{display:flex} .mev .mev-pick::backdrop{background:rgba(4,3,2,.55)}
.mev .pk-head{padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.mev .pk-head h3{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.mev .pk-head h3 button{border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.mev .pk-head input{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.mev .pk-list{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:6px 10px}
.mev .pk-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;cursor:pointer}
.mev .pk-row:hover{background:var(--cream)}
.mev .pk-row img,.mev .pk-row .ini{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.mev .pk-row .ini{display:grid;place-items:center;background:var(--teal);color:#fff}
.mev .pk-row small{display:block;color:var(--muted)}
.mev .pk-row input{margin-left:auto;width:20px;height:20px;accent-color:var(--teal)}
.mev .pk-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.mev .pk-foot .btn{margin:0}
/* --- special form (specials mockup view 5) --- */
.mev #mev-special{padding:18px 0 10px}
.mev .f{margin:12px 0}
.mev .f label{display:block;font-weight:700;margin-bottom:4px}
.mev .f small{display:block;color:var(--muted);font-size:.84rem;margin-bottom:6px}
.mev .f input,.mev .f textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.mev .f textarea{min-height:90px}
.mev .f input:focus,.mev .f textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.mev .row2{display:grid;gap:0 16px}
.mev .warn{display:none;background:#fde8e5;color:var(--red);border-radius:8px;padding:6px 10px;font-size:.88rem;margin-top:6px} .mev .warn.on{display:block}
.mev .okmsg{background:#e3f3e8;color:#245b1e;border-radius:8px;padding:6px 10px;font-size:.88rem;margin-top:6px}
.mev .muted{color:var(--muted)}
.mev .mev-changing{background:#fff8dc;border:1px solid var(--gold);border-radius:10px;padding:8px 12px;margin:0 0 6px;font-size:.9rem}
.mev .mev-err{background:#fde8e4;color:var(--red);border-radius:10px;padding:10px 12px;font-size:.92rem;margin:0 0 12px;font-weight:600}
/* --- the combined list --- */
.mev .mev-listh{margin:26px 0 8px;font-size:1.4rem}
.mev .tablewrap{overflow-x:auto}
.mev .mytab{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--paper);border-radius:12px}
.mev .mytab td,.mev .mytab th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mev .mytab th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mev .pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:700;white-space:nowrap}
.mev .pill.wait{background:#fff3c4;color:#6b4f00} .mev .pill.live{background:#e3f3e8;color:#245b1e}
.mev .pill.sent{background:#e7edf5;color:#2f4a6b} .mev .pill.ended{background:#eceee2;color:var(--muted)}
.mev .lnk{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--orange);cursor:pointer;text-decoration:underline}
.mev .sentback td{background:#f6f8fb}
.mev .cmp{display:grid;gap:12px}
.mev .cmp h3{margin:0 0 4px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mev .cmp p{margin:2px 0}
/* confirm box */
.mev .mev-ask{border:0;border-radius:var(--radius);padding:20px 22px;max-width:min(440px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mev .mev-ask::backdrop{background:rgba(4,3,2,.55)}
.mev .mev-ask h3{margin:0 0 8px} .mev .mev-ask p{margin:0 0 14px;line-height:1.5}
.mev .mev-ask .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .mev .mev-ask .btn{margin:0}
@media (min-width:700px){ .mev .two,.mev .row2{grid-template-columns:1fr 1fr} .mev .cmp{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .mev .layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start} }

/* =============================================================================
   P17. MEMBER SPECIALS — the PUBLIC side (specials-mockup-v1 views 1–4, approved)
   Phase 5 part 3. Shown only while a special is LIVE (Specials::isLive — the
   one rule; America/Chicago dates). Pages: members.twig (ribbon, offer line,
   gold outline, "Has a special" filter), member.twig (Current special panel),
   events.twig + events.js (filter, orange entries, "Specials running now"),
   home.twig (the Member specials row).
   ============================================================================= */
/* Members card (view 1) */
.member.has-sp{outline:3px solid var(--gold);outline-offset:-1px;position:relative}
.member .ribbon{position:absolute;top:-12px;right:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--ink);
  font:800 .78rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.18);text-decoration:none}
.member .sp-line{display:flex;align-items:center;gap:8px;background:#fff8dc;border:1px solid var(--gold);border-radius:10px;padding:8px 10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;margin:2px 0}
.member .sp-line small{font-weight:400;color:var(--muted)} .member .sp-line i{color:var(--orange)}
.intro .fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gold);background:#fff8dc;color:var(--ink);border-radius:999px;padding:7px 14px;font:700 .9rem var(--font-body);cursor:pointer}
.intro .fchip[aria-pressed=true]{background:var(--gold)}
/* Member page (view 2) */
.mp-special{background:linear-gradient(135deg,#fff8dc,#fff);border:2px solid var(--gold);border-radius:18px;padding:18px 20px;display:grid;gap:12px;margin-bottom:18px}
.mp-special .tag{display:inline-flex;gap:6px;align-items:center;background:var(--gold);color:var(--ink);font:800 .75rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:4px 12px;justify-self:start}
.mp-special h2{margin:0;font-size:1.6rem}
.mp-special .dates{font-weight:700;color:#a84a00}          /* the mockup's orange #C25700 on this cream is 4.3:1 — #a84a00 is 5.6:1 (WCAG AA) */
.mp-special p{margin:0;line-height:1.55}
.mp-special img{width:100%;max-height:220px;object-fit:cover;border-radius:12px}
.mp-special .acts{display:flex;flex-wrap:wrap;gap:10px}
.mp-special .acts .btn{margin:0}
.mp-special .fine{font-size:.85rem;color:var(--muted);border-top:1px dashed #e6d9a8;padding-top:8px}
/* Events (view 3) */
.t-special{--c:#C25700;--ct:#fff}
.evcal .filters .t-special .dot{background:#C25700}
.grid7 .chipev.spbar{border-radius:0;margin-left:-6px;margin-right:-6px}     /* the days between: one continuous bar (view 3) */
.evcal .running{background:#fbe9da;border-radius:14px;padding:12px 16px;margin:0 0 18px;display:grid;gap:8px}
.evcal .running h3{margin:0;color:#8a3d00;font-size:1.05rem}
.evcal .running a{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;background:#fff;border-radius:10px;padding:8px 10px}
.evcal .running img,.evcal .running .ini{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.evcal .running .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.8rem}
.evcal .running small{color:var(--muted)}
.evcal .submit-box{background:var(--paper);border:1px dashed var(--teal);border-radius:14px;padding:12px 16px;margin:0 0 18px;font-size:.95rem}
.evcal .submit-box a{color:var(--orange);font-weight:700}
/* Home row (view 4) */
.home-specials{background:var(--teal);color:var(--cream)}
.home-specials h2{color:var(--gold);margin:0 0 4px}
.home-specials .hs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:14px}
.home-specials a{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,196,0,.4);border-radius:14px;padding:12px;color:var(--cream);text-decoration:none}
.home-specials img,.home-specials .ini{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex:0 0 auto}
.home-specials .ini{display:grid;place-items:center;background:var(--ink);color:var(--gold);font-weight:700}
.home-specials b{color:var(--gold);display:block}
.home-specials small{color:#cfd3c2}

/* =============================================================================
   P18. APPROVALS (approvals-mockup-v1.html + specials-mockup view 6, approved)
   Phase 5 part 5a. Page: members-only-approvals.twig · js/approvals.js.
   Scoped to .apq (the site has global .slip / .mchip / .empty classes).
   Ported from _generators/approvals_body.html; changes are commented.
   ============================================================================= */
.apq .ap-head{padding:8px 0 4px}
.apq .ap-head h1{font-size:1.9rem;margin:0}
.apq .ap-head p{margin:4px 0 0;color:var(--muted)}
.apq .ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px;margin:14px 0}
.apq .chips4{display:flex;flex-wrap:wrap;gap:6px}
.apq .chips4 button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:600 .85rem var(--font-body);cursor:pointer;color:var(--ink)}
.apq .chips4 button i{color:var(--teal);margin-right:5px}
.apq .chips4 button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.apq .chips4 button[aria-pressed=true] i{color:var(--gold)}
.apq .chips4 .n{display:inline-block;min-width:20px;border-radius:999px;background:#eceee4;color:var(--ink);font-size:.72rem;padding:0 6px;margin-left:5px}
.apq .chips4 button[aria-pressed=true] .n{background:var(--gold)}
.apq .ctl .bulk{margin-left:auto}
.apq .btnA{border:0;border-radius:999px;padding:8px 14px;font:700 .85rem var(--font-body);cursor:pointer;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.apq .btnA:disabled{opacity:.5;cursor:default}
.apq .btnA.ok{background:#2f7a27;color:#fff}
/* Phase 8 part 4 — the check-in review card's table (cant-make-it-mockup-v2 panel 7) */
.apq .rvt{width:100%;border-collapse:collapse;font-size:.88rem;margin:8px 0}
.apq .rvt th{background:var(--teal);color:#fff;text-align:left;padding:6px 8px}
.apq .rvt td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.apq .rvt tr.diff td{background:#fdeeea}
.apq .btnA.small{padding:4px 10px;font-size:.78rem}
.apq .btnA.del{background:#fff;color:var(--red);border:1px solid var(--red)}
.apq .btnA.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.apq .btnA.gold{background:var(--gold);color:var(--ink)}
.apq .tiles3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 6px}
.np .np-wait{font:700 .85rem var(--font-body);color:#7a5a00;background:#fff3c4;border-radius:999px;padding:6px 12px;text-decoration:none;white-space:nowrap}   /* waiting profile change (walk-through fix) */
.apq .keepnote{font:inherit;font-size:.85rem;padding:6px 10px;border:1px solid var(--line);border-radius:999px;min-width:220px;flex:1}   /* dues deadline: why keep them (Phase 7) */
.apq .t3{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.apq .t3 b{display:block;font:700 1.5rem var(--font-head);color:var(--teal);line-height:1.1}
.apq .t3 span{font-size:.8rem;color:var(--muted)}
.apq .t3.warn b{color:#7a5a00}
.apq .apq-err{background:#fde8e4;color:var(--red);border-radius:10px;padding:10px 12px;font-weight:600;margin:0 0 10px}
.apq .apq-err[hidden]{display:none}
/* one waiting item */
.apq .slip{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:10px;border-left:6px solid var(--teal);display:grid;gap:8px}
.apq .slip.dupe{border-left-color:var(--amber)}
.apq .slip.done{opacity:.6}
.apq .slip .top{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.apq .slip .ty{font:700 .78rem var(--font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--teal)}
.apq .slip .ty i{margin-right:5px}
.apq .slip .when{font-size:.8rem;color:var(--muted)}
.apq .slip .age{font-size:.72rem;border-radius:999px;padding:1px 8px;background:#eceee4;color:var(--muted)}
.apq .slip .age.old{background:#fde2dd;color:var(--red)}
.apq .slip .flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.95rem}
.apq .slip .flow .arrow{color:var(--muted)}
.apq .slip .amt{font:700 1.2rem var(--font-head);color:#a84a00}       /* #a84a00: 5.9:1 on the card (the mockup's orange was 4.3) */
.apq .slip .det{font-size:.88rem;color:#333;background:#f6f7ef;border-radius:10px;padding:8px 10px}
.apq .slip .det b{color:var(--ink)}
.apq .slip .det a{color:#a84a00}
.apq .slip .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.apq .slip .acts .res{font-weight:700;font-size:.9rem;color:#2f7a27}
.apq .mchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 2px;font-size:.88rem;color:var(--ink)}
.apq .mchip img,.apq .mchip .ini{width:26px;height:26px;border-radius:50%;object-fit:cover}
.apq .mchip .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.6rem}
.apq .mchip.anon{background:#eceee4;border-style:dashed;color:var(--muted);padding:4px 10px;font-style:italic}
/* duplicate warning: the two slips side by side */
.apq .dup{background:#fff8e1;border:1px solid #f0d27a;border-radius:12px;padding:10px 12px;font-size:.88rem}
.apq .dup .h{font-weight:700;color:#7a5a00;margin-bottom:6px}
.apq .dup .h i{margin-right:6px}
.apq .dup .pair{display:grid;gap:8px;grid-template-columns:1fr}
.apq .dup .cell{background:#fff;border-radius:10px;padding:8px 10px;border:1px solid #f0e2b0}
.apq .dup .cell.this{outline:2px solid var(--amber)}
.apq .dup .cell small{display:block;font:700 .68rem var(--font-body);text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.apq .dup .why{margin-top:6px;color:#6b5a2a}
.apq .dup .quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* specials review (view 6) */
.apq .cmp{display:grid;gap:12px}
.apq .cmp .box{background:#fff;border-radius:12px;padding:12px 14px;border:1px solid var(--line)}
.apq .cmp .orig{background:#f6f6f0}
.apq .cmp h3{margin:0 0 8px;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.apq .cmp p{margin:4px 0}
.apq .f{margin:8px 0} .apq .f label{display:block;font-weight:700;font-size:.88rem;margin-bottom:4px}
.apq .f input,.apq .f textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}
.apq .f textarea{min-height:80px} .apq .f textarea.note{min-height:56px}
.apq .muted{color:var(--muted)} .apq .small{font-size:.82rem;margin:0}
.apq .empty{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:30px;text-align:center;color:var(--muted)}
.apq .empty i{font-size:2rem;color:#2f7a27;display:block;margin-bottom:6px}
/* 5c: "Not yet public" section */
.apq .np{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin:16px 0}
.apq .np h2{font-size:1.1rem;margin:0 0 6px} .apq .np h2 i{color:var(--teal);margin-right:6px}
.apq .np-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:8px 0}
.apq .np-row small{display:block;color:var(--muted);font-size:.8rem}
.apq .np-un{margin-top:8px} .apq .np-un summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--teal)}
.apq .np-un select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:10px;max-width:100%;margin:6px 8px 6px 0}
.apq .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.apq .rules2{font-size:.82rem;color:var(--muted);background:var(--paper);border-radius:12px;padding:10px 14px;margin:16px 0}
.apq .rules2 li{margin:2px 0}
/* The Undo bar (walk-through step 2, 2026-10-03): GOLD with ink text so it stands out on the cream page AND the dark
   footer; fixed to the bottom of the window above everything (z 1000 > phone tab bar 60); on phones it sits above the
   tab bar. "Undo (6)" counts down; .line shrinks over the 6 seconds (approvals.js restarts it with .run). */
.apq .apq-bar{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:1000;display:none;gap:14px;align-items:center;max-width:min(560px,calc(100vw - 32px));width:max-content;overflow:hidden;
  background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:14px 18px 16px;font:700 1.02rem var(--font-body);
  box-shadow:0 12px 36px rgba(0,0,0,.45)}
/* It appears INSTANTLY in its final place (no slide-in, 2026-10-03): a bar that moves is a moving target for a quick Undo. */
.apq .apq-bar.show{display:flex}
.apq .apq-bar i{font-size:1.2rem}
.apq .apq-bar button{background:var(--ink);color:var(--gold);border:0;border-radius:999px;padding:9px 18px;font:800 .98rem var(--font-body);cursor:pointer;white-space:nowrap}
.apq .apq-bar button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.apq .apq-bar.plain button{display:none}
.apq .apq-bar .line{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--ink);transform-origin:left}
.apq .apq-bar.run .line{animation:apq-shrink 6s linear forwards}
.apq .apq-bar.plain .line{display:none}
@keyframes apq-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:999px){ .apq .apq-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }   /* above the phone tab bar */
@media (prefers-reduced-motion:reduce){ .apq .apq-bar.run .line{animation:none} }
/* our confirm box (NEW — the mockup used the browser's confirm()) */
.apq .apq-ask{border:0;border-radius:var(--radius);padding:20px 22px;max-width:min(460px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.apq .apq-ask::backdrop{background:rgba(4,3,2,.55)}
.apq .apq-ask h3{margin:0 0 8px} .apq .apq-ask p{margin:0 0 14px;line-height:1.5}
.apq .apq-ask .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .apq .apq-ask .btn{margin:0}
@media (min-width:700px){ .apq .tiles3{grid-template-columns:repeat(4,1fr)} .apq .dup .pair{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .apq .cmp{grid-template-columns:1fr 1fr} }
/* the gold count badge on Leadership ▸ Approvals (members-only.twig) */
.mo-badge{display:inline-block;min-width:20px;border-radius:999px;background:var(--gold);color:var(--ink);font:800 .72rem var(--font-body);padding:1px 6px;margin-left:6px;text-align:center}

/* =============================================================================
   P19. APPLICATIONS (applications-mockup-v1.html, approved 2026-10-04)
   Phase 5 part 5b. Page: members-only-applications.twig · js/applications.js.
   Scoped to .apl (site-wide classes would leak in). Visual language = the approved
   renewal mockup (votes box, discussion box, outcome bars).
   ============================================================================= */
.apl .ap2-head{padding:8px 0 4px}
.apl .ap2-head h1{font-size:1.9rem;margin:0}
.apl .ap2-head p{margin:4px 0 0;color:var(--muted)}
.apl .tiles3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.apl .t3{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.apl .t3 b{display:block;font:700 1.5rem var(--font-head);color:var(--teal);line-height:1.1}
.apl .t3 span{font-size:.8rem;color:var(--muted)}
.apl .t3.me b{color:#a84a00}
.apl h2.apl-step{font-size:1.35rem;margin:22px 0 4px}
.apl .hint{color:var(--muted);font-size:.88rem;margin:0 0 10px}
.apl .hint.tight,.apl p.tight{margin:6px 0 0} .apl .hint.inline{margin:0 0 0 6px}
.apl .muted{color:var(--muted)}
.apl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.apl .apl-err{background:#fde8e4;color:var(--red);border-radius:10px;padding:10px 12px;font-weight:600;margin:0 0 10px}
.apl .apl-err[hidden]{display:none}
.apl .btnR{border:0;border-radius:999px;padding:9px 16px;font:700 .88rem var(--font-body);cursor:pointer;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.apl .btnR.sm{padding:4px 10px;font-size:.78rem;margin-left:6px}
.apl .btnR.gold{background:var(--gold);color:var(--ink)} .apl .btnR.ok{background:#2f7a27;color:#fff} .apl .btnR.no{background:var(--red);color:#fff}
.apl .btnR.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)} .apl .btnR:disabled{opacity:.45;cursor:default}
.apl .pill{display:inline-block;border-radius:999px;padding:2px 9px;font:700 .7rem var(--font-body);text-transform:uppercase;white-space:nowrap}
.apl .pill.voting{background:#e3f3f2;color:var(--teal)} .apl .pill.closed{background:#fff3c4;color:#7a5a00}
.apl .pill.approved{background:#dcefd9;color:#245b1e} .apl .pill.disapproved{background:#fde2dd;color:var(--red)}
.apl .pill.private{background:#eceee4;color:var(--ink)}
/* one application */
.apl .ac{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px;border-left:6px solid var(--teal);scroll-margin-top:140px}
.apl .ac.closed{border-left-color:var(--amber)} .apl .ac.approved{border-left-color:#2f7a27} .apl .ac.disapproved{border-left-color:var(--red)}
.apl .ac .top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.apl .ac .top b.nm{font:700 1.2rem var(--font-head)}
.apl .ac .top .sub{color:var(--muted);font-size:.9rem;width:100%}
.apl .clock{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;font-weight:700;color:var(--teal)}
.apl .clock.soon{color:#a84a00}
.apl .facts{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin:12px 0}
.apl .facts div{background:#f4f5ef;border-radius:10px;padding:6px 10px;font-size:.8rem;color:var(--muted)}
.apl .facts b{display:block;font:700 .98rem var(--font-head);color:var(--ink)}
.apl .facts b.mail{font-size:.85rem;word-break:break-all}
.apl details.full{border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 12px}
.apl details.full summary{cursor:pointer;padding:10px 12px;font-weight:700}
.apl details.full dl{display:grid;grid-template-columns:1fr;gap:2px 14px;margin:0;padding:0 12px 12px;font-size:.88rem}
.apl details.full dt{color:var(--muted);font-weight:600} .apl details.full dd{margin:0 0 6px;overflow-wrap:anywhere}
.apl .cols{display:grid;gap:14px;grid-template-columns:1fr}
.apl .box{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.apl .box h3{margin:0 0 8px;font-size:1rem}
.apl .vt{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:.88rem;padding:6px 0;border-top:1px solid var(--line)}
.apl .vt:first-of-type{border-top:0}
.apl .vt small{color:var(--muted);font-size:.72rem;display:block}
.apl .vt .sp{display:inline-block;background:var(--gold);color:var(--ink);border-radius:999px;font:800 .62rem var(--font-body);padding:1px 7px;margin-left:5px;text-transform:uppercase;vertical-align:1px}
.apl .v{font:700 .72rem var(--font-body);text-transform:uppercase;border-radius:999px;padding:2px 9px;white-space:nowrap}
.apl .v.yes{background:#dcefd9;color:#245b1e} .apl .v.no{background:#fde2dd;color:var(--red)} .apl .v.none{background:#eceee4;color:var(--muted)}
.apl .tally{margin-top:8px;font-size:.9rem;font-weight:700}
.apl .myvote{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.apl .lock{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--muted);margin-top:8px}
.apl .cm{border-top:1px solid var(--line);padding:7px 0;font-size:.9rem;overflow-wrap:anywhere}
.apl .cm:first-of-type{border-top:0}
.apl .cm small{color:var(--muted);display:block;font-size:.74rem}
.apl .box textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;min-height:60px;margin-top:6px}
.apl .outcome{border-radius:12px;padding:12px 14px;margin-top:12px;font-size:.92rem}
.apl .outcome.wait{background:#fff8e1;border:1px solid #f0d27a} .apl .outcome.in{background:#dcefd9} .apl .outcome.out{background:#fde2dd}
.apl .outcome h4{margin:0 0 6px;font:700 1rem var(--font-head)}
.apl .outcome .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.apl .newm{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:.88rem;overflow-x:auto}
.apl .newm table{border-collapse:collapse;width:100%} .apl .newm td{padding:3px 6px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.apl .newm td:first-child{color:var(--muted);width:150px}
.apl .money{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:8px}
.apl .money b{font:700 1.4rem var(--font-head);color:#a84a00}
.apl .refuse{background:#fde2dd;border-radius:10px;padding:8px 10px;margin-top:8px;color:var(--red);font-weight:600;font-size:.88rem}
.apl .past{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:auto;margin-bottom:14px}
.apl table.pt{border-collapse:collapse;width:100%;font-size:.88rem}
.apl .pt th{background:var(--teal);color:#fff;text-align:left;padding:8px;white-space:nowrap}
.apl .pt td{padding:8px;border-bottom:1px solid var(--line)}
.apl .empty{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:24px;text-align:center;color:var(--muted)}
.apl .empty i{font-size:1.8rem;color:#2f7a27;display:block;margin-bottom:6px}
.apl .apl-ask{border:0;border-radius:var(--radius);padding:20px 22px;max-width:min(460px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.apl .apl-ask::backdrop{background:rgba(4,3,2,.55)}
.apl .apl-ask h3{margin:0 0 8px} .apl .apl-ask p{margin:0 0 14px;line-height:1.5}
.apl .apl-ask .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .apl .apl-ask .btn{margin:0}
/* Extend / Reopen voting (2026-10-04): the dialog's fields, the label next to the countdown, automatic notes */
.apl .apl-ask .fl{display:block;font-weight:700;font-size:.88rem;margin:10px 0 4px}
.apl .apl-ask input[type=date],.apl .apl-ask textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.apl .apl-ask .apl-err{margin:10px 0 0}
.apl .pill.reopen{background:#fff3c4;color:#7a5a00}
.apl .bobacts{display:flex;flex-wrap:wrap;gap:8px}
.apl .cm.auto{background:#fff8e1;border-radius:8px;padding:7px 9px;border-top:0;margin-top:4px}
/* Item 1 (2026-10-04): your current vote = solid + check mark; the other choice = an outline you can still click */
.apl .btnR.chosen{cursor:default;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.apl .btnR.ok.outline{background:#fff;color:#2f7a27;border:1px solid #2f7a27}
.apl .btnR.no.outline{background:#fff;color:var(--red);border:1px solid var(--red)}
/* Item 9: how it was decided */
.apl .outcome .how{display:block;margin-top:4px;color:var(--ink);opacity:.8}
.apl .outcome a{color:inherit}
@media (min-width:700px){ .apl .tiles3{grid-template-columns:repeat(4,1fr)} .apl .facts{grid-template-columns:repeat(4,1fr)} .apl details.full dl{grid-template-columns:200px 1fr} }
@media (min-width:1000px){ .apl .cols{grid-template-columns:1fr 1.2fr} }

/* =============================================================================
   P20. REPORTS — Activity + Attendance (reports-mockup-v1.html, approved;
        Phase 6, 2026-10-04). Page: builder/pages/members-only-reports.twig ·
        script: js/reports.js. Everything scoped to .rp (no site-wide leaks).
   ============================================================================= */
.rp .rp-head{padding:4px 0 4px}
.rp .view{padding:0}   /* cancel the site-wide section padding (as the mockup does) */
.rp .rp-head h1{font-size:1.9rem;margin:0}
.rp .rp-head p{margin:4px 0 0;color:var(--muted)}
/* view tabs — links between the separate report pages */
.rp .vtabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 10px}
.rp .vtabs a{border:2px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font:700 .92rem var(--font-body);color:var(--ink);text-decoration:none}
.rp .vtabs a i{margin-right:6px;color:var(--teal)}
.rp .vtabs a[aria-current=page]{background:var(--teal);border-color:var(--teal);color:#fff}
.rp .vtabs a[aria-current=page] i{color:var(--gold)}
/* shared controls */
.rp .ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px;margin-bottom:14px}
.rp .ctl select,.rp .ctl input[type=search],.rp .ctl input[type=date]{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.rp .ctl input[type=search]{flex:1;min-width:150px}
/* walk-through fix 1: greyed out while "Just mine" is ticked (the search is ignored then) */
.rp .ctl input:disabled{background:#eceee4;color:var(--muted);cursor:not-allowed}
.rp .rt tr.note td{text-align:left;color:var(--muted);font-style:italic;padding:14px 10px}
.rp .seg2{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.rp .seg2 button{border:0;background:none;padding:8px 12px;font:600 .88rem var(--font-body);cursor:pointer;color:var(--ink)}
.rp .seg2 button[aria-pressed=true]{background:var(--teal);color:#fff}
.rp .mine{display:flex;gap:6px;align-items:center;font-weight:700;font-size:.9rem;cursor:pointer}
.rp .mine input{width:18px;height:18px;accent-color:var(--teal)}
.rp .ctl .btn{margin:0;padding:8px 14px}
.rp .custom{display:none;gap:6px;align-items:center}
.rp .custom.on{display:flex}
/* summary tiles */
.rp .tiles2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.rp .t2{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.rp .t2 b{display:block;font:700 1.5rem var(--font-head);color:var(--teal);line-height:1.1}
.rp .t2 span{font-size:.8rem;color:var(--muted)}
.rp .t2.money b{color:var(--orange)}
.rp .t2.below b{color:#7a5a00}
.rp .t2.probation b{color:var(--red)}
.rp .t2 small{display:block;font-size:.75rem;color:var(--muted);margin-top:3px}
/* tables: scroll sideways on phones, the member column sticks */
.rp .tbl{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:auto;max-height:75vh}
.rp table.rt{border-collapse:separate;border-spacing:0;width:100%;font-size:.88rem}
.rp .rt th{position:sticky;top:0;z-index:2;background:var(--teal);color:#fff;font-weight:700;text-align:right;padding:9px 8px;cursor:pointer;user-select:none;vertical-align:bottom;line-height:1.2;white-space:nowrap}
.rp .rt th:first-child,.rp .rt td:first-child{position:sticky;left:0;text-align:left;z-index:1}
.rp .rt th:first-child{z-index:3}
.rp .rt th small{display:block;font-weight:400;font-size:.68rem;opacity:.85}
.rp .rt th.sorted::after{content:" ▾";color:var(--gold)}
.rp .rt td{padding:8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;background:var(--paper)}
.rp .rt td:first-child{min-width:170px}
.rp .rt tr.me td{background:#fff3c4}
.rp .rt tr.org td{background:#e3f3f2}
.rp .rt tr.tot td{background:#eef1e0;font-weight:700}
.rp .rt tr.past td:first-child{color:var(--muted)}
.rp .who2{display:flex;align-items:center;gap:8px}
.rp .who2 img,.rp .who2 .ini{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rp .who2 .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.65rem}
.rp .who2 small{color:var(--muted);font-size:.72rem}
.rp .zero{color:#b9bdb0}
.rp .legend2{font-size:.78rem;color:var(--muted);margin:8px 2px 30px;line-height:1.5}
.rp .pill{display:inline-block;border-radius:999px;padding:1px 8px;font:700 .7rem var(--font-body);text-transform:uppercase}
.rp .pill.newp{background:#e3f3f2;color:var(--teal)}   /* new-member period (2026-10-05) */
.rp .pill.ok{background:#dcefd9;color:#245b1e} .rp .pill.below{background:#fff3c4;color:#7a5a00} .rp .pill.probation{background:#fde2dd;color:var(--red)}
/* Fix 6: a former member's own record — grey, not a status */
.rp .rt td.former{color:var(--muted)}
.rp .pill.former{background:#eceee4;color:var(--muted)}
@media (min-width:700px){ .rp .tiles2{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .rp .tiles2{grid-template-columns:repeat(6,1fr)} .rp .tiles2:has(.t2:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)} }
@media print{
  .rp .ctl,.rp .vtabs{display:none!important}
  .rp .tbl{max-height:none;overflow:visible;box-shadow:none}
}

/* =============================================================================
   P21. RAW DATA (reports-mockup-v1.html › Raw data, approved; Phase 6, 2026-10-04).
        Page: builder/pages/members-only-raw-data.twig · script: js/raw-data.js.
        Uses P20 (.rp) for the head, tabs and controls; the lists are scoped to .rw.
   ============================================================================= */
.rw small.nc{color:var(--muted);font-style:italic;font-weight:400}   /* "(never completed membership)" — Phase 7 part 6 */
.rw .rawtypes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rw .rawtypes a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:600 .85rem var(--font-body);color:var(--ink);text-decoration:none}
.rw .rawtypes a[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}
.rw .rawsum{font-size:.9rem;margin:0 2px 10px;color:var(--muted)}
.rw .rawsum b{color:var(--ink)}
.rw .rawsum select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;margin-left:4px}
.rw .rows2{display:grid;gap:6px;margin-bottom:12px}
.rw .r2{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;display:grid;grid-template-columns:86px 1fr;gap:4px 10px;align-items:center;font-size:.9rem}
.rw .r2.me{outline:2px solid var(--gold)}
.rw .r2 .d{font-weight:700;color:var(--teal);font-size:.85rem}
.rw .r2 .flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rw .r2 .flow i.arrow{color:var(--muted)}
.rw .r2 .x{grid-column:2;color:var(--muted);font-size:.84rem}
.rw .r2 .amt{font:700 1.05rem var(--font-head);color:var(--orange)}
.rw .r2 .joined{color:var(--green)}
.rw .r2 .noname{color:var(--muted);font-style:italic}
.rw .r2 .st.a{color:var(--red);font-weight:700} .rw .r2 .st.m,.rw .r2 .st.s{color:#7a5a00}
.rw .more{display:block;margin:0 auto 30px}
/* the slips page's "See it in Raw Data" button: .btn sets a display, so [hidden] needs saying */
.sl .done .rawlink[hidden]{display:none}
/* attendance: one meeting */
.rw .rw-meet{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px;margin-bottom:30px}
.rw .rw-meet h3{margin:0 0 10px}
.rw .grp{margin-bottom:10px} .rw .grp b{display:block;font-size:.85rem;margin-bottom:6px}
.rw .chips3{display:flex;flex-wrap:wrap;gap:6px}
.rw .chips3 span{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;font-size:.84rem}
.rw .chips3 span.me{border-color:var(--gold);background:#fff3c4}
.rw .chips3 span.two{border-color:var(--red);background:#fde2dd}
.rw .twoflag{background:#fde2dd;color:var(--red);border-radius:8px;padding:6px 10px;font-size:.86rem;margin:0 0 10px}
.rw .orgnote{font-size:.8rem;color:var(--muted);margin:6px 0 0;font-style:italic}
.rw .chips3 span.empty{border:0;background:none;color:var(--muted)}
.rw .chips3 img,.rw .chips3 .ini{width:24px;height:24px;border-radius:50%;object-fit:cover}
.rw .chips3 .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.6rem}
@media (min-width:700px){ .rw .r2{grid-template-columns:100px 1fr auto} .rw .r2 .x{grid-column:auto;text-align:right} .rw .r2.long .x{grid-column:2 / -1;text-align:left} }
@media print{ .rw .rawtypes,.rw .more{display:none!important} }

/* =============================================================================
   P22. MEMBERSHIP REVIEW (attendance-review-mockup-v2.html — v2 is the spec;
        Phase 6, 2026-10-04). Page: builder/pages/members-only-membership-review.twig ·
        script: js/membership-review.js. Leadership only. Everything scoped to .rv.
   ============================================================================= */
.rv .rv-head{padding:4px 0 6px}
.rv .rv-head h1{font-size:1.9rem;margin:0}
.rv .rv-head p{margin:4px 0 0;color:var(--muted)}
.rv .who-sees{display:inline-block;margin-top:8px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);background:#dff0ee;border-radius:999px;padding:3px 10px}
.rv .rv-head .rv-basis{background:#dff0ee;color:var(--teal);border-radius:10px;padding:8px 12px;font-size:.88rem;margin:12px 0 0;line-height:1.4}
.rv .muted{color:var(--muted)}
/* summary tiles double as filters */
.rv .sum{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
.rv .sum button{background:var(--paper);border:2px solid transparent;border-radius:14px;padding:12px;text-align:left;cursor:pointer;box-shadow:var(--shadow);font:inherit;color:var(--ink)}
.rv .sum button b{display:block;font:700 1.7rem var(--font-head);line-height:1}
.rv .sum button span{font-size:.82rem;color:var(--muted)}
.rv .sum button[aria-pressed=true]{border-color:var(--teal)}
.rv .sum .t-ok b{color:var(--green)} .rv .sum .t-below b{color:#8a5d00} .rv .sum .t-probation b{color:var(--red)} .rv .sum .t-never b{color:var(--orange)} .rv .sum .t-up b{color:var(--green)}
/* tools: search · period (with custom range) · sort · print */
.rv .tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rv .tools input,.rv .tools select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.rv .tools input[type=search]{flex:1;min-width:180px}
.rv .tools .btn{margin:0;padding:9px 16px}
.rv .range{display:none;align-items:center;gap:6px;flex-wrap:wrap;background:#fff3c4;border-radius:10px;padding:6px 10px;font-size:.88rem}
.rv .range.on{display:flex}
.rv .range input{padding:6px 8px}
/* member rows: stacked cards on phones, a table-like grid on desktop */
.rv .rows{display:grid;gap:10px;padding-bottom:40px}
.rv #rv-rows{display:grid;gap:10px}
.rv .hdr{display:none}
.rv .row{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:grid;gap:8px;border-left:6px solid var(--green);cursor:pointer}
.rv .row:focus-visible{outline:3px solid var(--gold)}
.rv .row.below{border-left-color:var(--amber)} .rv .row.probation{border-left-color:var(--red)}
.rv .row.newp{border-left-color:var(--teal)} .rv .pill.newp{background:#e3f3f2;color:var(--teal)} .rv .row.newp .meter i{background:var(--teal)}   /* new-member period (2026-10-05) */
.rv .row.fresh{border-left-color:var(--line)} .rv .row.fresh .att .pct{font:600 1rem var(--font-body)}   /* not started yet: grey, no bar */
.rv .mwho{display:flex;gap:10px;align-items:flex-start}
.rv .mwho img,.rv .mwho .ini{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rv .mwho .ini{display:grid;place-items:center;background:var(--teal);color:#fff;font-size:.8rem}
.rv .mwho b{display:block} .rv .mwho small{color:var(--muted);font-size:.8rem;display:block;line-height:1.3}
.rv .mwho .rep{color:var(--teal);font-weight:600}
.rv .att{display:grid;gap:4px}
.rv .att .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rv .att .pct{font:700 1.2rem var(--font-head)}
.rv .att .basis{font:700 .66rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rv .row.ok .pct{color:var(--green)} .rv .row.below .pct{color:#8a5d00} .rv .row.probation .pct{color:var(--red)}
.rv .pill{display:inline-block;border-radius:999px;padding:1px 8px;font:700 .7rem var(--font-body);text-transform:uppercase}
.rv .pill.ok{background:#dcefd9;color:#245b1e} .rv .pill.below{background:#fff3c4;color:#7a5a00} .rv .pill.probation{background:#fde2dd;color:var(--red)}
.rv .meter{height:10px;background:#e3e6d6;border-radius:999px;position:relative;overflow:hidden}
.rv .meter i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--green)}
.rv .row.below .meter i{background:var(--amber)} .rv .row.probation .meter i{background:var(--red)}
.rv .meter::before,.rv .meter::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(4,3,2,.45);z-index:1}
.rv .meter::before{left:50%} .rv .meter::after{left:75%}
.rv .cnt{font-size:.78rem;color:var(--muted)}
.rv .ownline{font-size:.8rem;background:#f3f5ea;border-radius:8px;padding:4px 8px;line-height:1.35}
.rv .ownline b{white-space:nowrap}
.rv .fwd{font-size:.86rem;line-height:1.35}
.rv .fwd b{white-space:nowrap}
.rv .per,.rv .rec{font-size:.9rem}
.rv .per small,.rv .rec small{display:block;color:var(--muted);font-size:.74rem}
.rv .rec .up,.rv .rec .down,.rv .rec .flat{display:block;font-size:.8rem}
.rv .rec .up{color:var(--green);font-weight:700} .rv .rec .down{color:var(--red);font-weight:700} .rv .rec .flat{color:var(--muted)}
.rv .improving{display:inline-block;background:#e3f3e8;color:var(--green);border-radius:6px;padding:1px 6px;font-size:.72rem;font-weight:700;margin-top:3px}
.rv .actv{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.8rem;color:var(--muted)}
.rv .actv b{color:var(--ink)}
/* meeting-by-meeting strip (opens when a row is tapped) */
.rv .detail{display:none;grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px}
.rv .row.open .detail{display:block}
.rv .yr{display:flex;gap:8px;align-items:center;margin:2px 0}
.rv .yr b{width:38px;font-size:.75rem;color:var(--muted);flex:0 0 auto}
.rv .yr small{font-size:.72rem;color:var(--muted);margin-left:4px;white-space:nowrap}
.rv .mstrip{display:flex;flex-wrap:wrap;gap:2px}
.rv .mstrip span{width:9px;height:14px;border-radius:2px;display:block}
.rv .mstrip .p,.rv .mlegend i.p{background:var(--teal)} .rv .mstrip .m,.rv .mlegend i.m{background:var(--amber)} .rv .mstrip .s,.rv .mlegend i.s{background:#6b8f8f}
.rv .mstrip .a,.rv .mlegend i.a{background:var(--red)} .rv .mstrip .x,.rv .mlegend i.x{background:#e3e6d6}
.rv .mstrip .pre,.rv .mlegend i.pre{opacity:.4}                         /* the earlier representative's meetings */
.rv .mstrip .cut,.rv .mlegend i.cut{width:3px;background:var(--ink);border-radius:0}   /* the day the representative changed */
.rv .mlegend{font-size:.75rem;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 12px}
.rv .mlegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.rv .flag{display:inline-block;background:#fff3c4;color:#6b4f00;border-radius:6px;padding:1px 6px;font-size:.74rem;margin-top:6px;margin-right:6px}
.rv .flag.spk{background:#dff0ee;color:var(--teal)}
.rv .none-match{display:none;text-align:center;color:var(--muted);padding:30px}
.rv .foot{font-size:.82rem;color:var(--muted)}
@media (min-width:700px){ .rv .sum{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){
  .rv .sum{grid-template-columns:repeat(6,1fr)}
  .rv .hdr,.rv .row{grid-template-columns:230px 215px 150px 95px 110px 1fr;align-items:start;column-gap:16px}
  .rv .hdr{display:grid;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:0 20px}
}
@media print{
  .rv .tools{display:none!important}
  .rv .row{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}

/* =============================================================================
   P23. MEMBER STATUS (member-reports-mockup-v1.html › Member Status, approved
        2026-09-28; Phase 6, 2026-10-04). Page: builder/pages/members-only-member-status.twig ·
        script: js/member-status.js. Uses P20 (.rp) for the head, tabs and controls;
        this page's own parts are scoped to .ms.
   ============================================================================= */
.ms .vtabs .soon{border:2px dashed var(--line);border-radius:999px;padding:9px 16px;font:700 .92rem var(--font-body);color:var(--muted);cursor:default}
.ms .vtabs .soon i{margin-right:6px}
.ms .vtabs .soon small{font:700 .66rem var(--font-body);text-transform:uppercase;letter-spacing:.04em;background:#eceee4;border-radius:999px;padding:1px 7px;margin-left:4px}
.ms .seg2{flex-wrap:wrap}
.ms .intro{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:14px;font-size:.93rem}
.ms .intro i{color:var(--teal);margin-right:6px}
/* tiles */
.ms .tiles3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.ms .t3{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.ms .t3 b{display:block;font:700 1.5rem var(--font-head);color:var(--teal);line-height:1.1}
.ms .t3 span{font-size:.8rem;color:var(--muted)}
.ms .t3.ok b{color:var(--green)} .ms .t3.below b{color:#7a5a00} .ms .t3.bad b{color:var(--red)}
/* the roster table */
.ms table.mt{border-collapse:separate;border-spacing:0;width:100%;font-size:.88rem}
.ms .mt th{position:sticky;top:0;z-index:2;background:var(--teal);color:#fff;font-weight:700;text-align:left;padding:9px 8px;cursor:pointer;user-select:none;white-space:nowrap}
.ms .mt th.r,.ms .mt td.r{text-align:right}
.ms .mt th.sorted::after{content:" ▾";color:var(--gold)}
.ms .mt th:first-child,.ms .mt td:first-child{position:sticky;left:0;z-index:1}
.ms .mt th:first-child{z-index:3}
.ms .mt td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper);vertical-align:middle}
.ms .mt tr.me td{background:#fff3c4}
.ms .mt td small{display:block;color:var(--muted);font-size:.74rem}
.ms .mt td.wrap{white-space:normal;min-width:150px}
.ms .who2 img,.ms .who2 .ini{width:30px;height:30px}
.ms .who2 small.you{display:inline;color:var(--muted)}
.ms .pill{padding:2px 9px;white-space:nowrap}
.ms .pill.fresh{background:#eceee4;color:var(--muted)}   /* "Not started yet" (no meetings) */
.ms .pill.newp{background:#e3f3f2;color:var(--teal)}      /* new-member period (2026-10-05) */
/* chairs */
.ms .chk{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:14px}
.ms .chk label{font-weight:700;display:block;margin-bottom:6px}
.ms .chk input{width:100%;font:inherit;padding:10px 12px;border:2px solid var(--teal);border-radius:10px;box-sizing:border-box}
.ms .chk .ans{margin-top:8px;font-size:.92rem}
.ms .chk .taken{color:var(--red)} .ms .chk .free{color:#245b1e}
.ms .letter{font:700 1.1rem var(--font-head);color:var(--teal);margin:14px 0 6px;border-bottom:2px solid var(--gold);padding-bottom:2px}
.ms .chairs{display:grid;gap:6px;grid-template-columns:1fr}
.ms .ch{background:var(--paper);border-radius:10px;box-shadow:var(--shadow);padding:8px 10px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.9rem}
.ms .ch .who2{font-size:.85rem;text-align:right;justify-content:flex-end}
.ms .ch .who2 img,.ms .ch .who2 .ini{width:26px;height:26px}
/* join history */
.ms .yrb{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:12px}
.ms .yrb h3{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ms .yrb h3 span{font:600 .8rem var(--font-body);color:var(--muted)}
.ms .ev{display:grid;grid-template-columns:78px 1fr;gap:3px 10px;padding:6px 0;border-top:1px solid var(--line);font-size:.88rem;align-items:center}
.ms .ev .d{font-weight:700;color:var(--teal);font-size:.8rem}
.ms .ev .x{grid-column:2;color:var(--muted);font-size:.8rem}
.ms .ev.out .d{color:var(--muted)}
.ms .tag{display:inline-block;border-radius:6px;padding:0 6px;font:700 .68rem var(--font-body);text-transform:uppercase;margin-right:6px}
.ms .tag.in{background:#dcefd9;color:#245b1e} .ms .tag.out{background:#eceee4;color:var(--muted)} .ms .tag.change{background:#dff0ee;color:var(--teal)}
/* new members */
.ms .nm{display:grid;gap:10px;grid-template-columns:1fr}
.ms .nmc{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;border-left:5px solid var(--gold)}
.ms .nmc .who2 img,.ms .nmc .who2 .ini{width:44px;height:44px}
.ms .nmc b{font-size:1rem} .ms .nmc small{display:block;color:var(--muted);font-size:.8rem}
.ms .nmc p{margin:8px 0 0;font-size:.85rem}
@media (min-width:700px){ .ms .tiles3{grid-template-columns:repeat(4,1fr)} .ms .chairs{grid-template-columns:1fr 1fr} .ms .nm{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .ms .nm{grid-template-columns:repeat(3,1fr)} }
@media print{ .ms .chk{display:none!important} }

/* =============================================================================
   P24. MY PROFILE (profile-mockup-v1.html, approved 2026-09-28; Phase 7, 2026-10-04).
        Page: builder/pages/members-only-profile.twig · script: js/profile.js.
        Everything scoped to .pf (site-wide .row / .card / .done / .badge exist elsewhere).
   ============================================================================= */
.pf .pf-head{padding:4px 0 4px}
.pf .pf-head h1{font-size:1.9rem;margin:0}
.pf .pf-head p{margin:4px 0 0;color:var(--muted)}
.pf .pf-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin:14px 0 30px}   /* minmax: mobile audit 2026-10-06 */
.pf .pending{background:#fff3c4;border-left:6px solid var(--amber);border-radius:12px;padding:12px 14px;font-size:.92rem;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px}
.pf .pending b{color:#7a5a00}
.pf .pending button{margin-left:auto}
.pf .lastdec{background:#eef7f6;border-left:6px solid var(--teal);border-radius:12px;padding:10px 14px;font-size:.9rem;display:flex;gap:10px;margin-bottom:12px}
.pf .lastdec i.fa-circle-info{color:var(--teal);margin-top:3px}
.pf .sec{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:12px}
/* Phase 8 part 5 — "Dates I'm regularly unavailable" (panel 10) */
.pf .rd{max-width:760px;margin-top:14px}
.pf .rd .hint{color:var(--muted);font-size:.85rem;margin:4px 0 10px}
.pf .rd label.f{display:grid;gap:4px;font-weight:700;max-width:280px}
.pf .rd select,.pf .rd input[type=date]{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pf .rd .rd-l{font-weight:700;margin:12px 0 4px}
.pf .rd-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf .rd-chips button{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font:600 .84rem var(--font-body);background:#fff;cursor:pointer}
.pf .rd-add{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pf .rd-add small{color:var(--red)}
.pf .rd-count{background:var(--cream);border-radius:12px;padding:10px 12px;margin-top:12px}
.pf .rd-count h3{font-size:1rem;margin:0 0 6px}
.pf .rd-dates{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.9rem}
.pf .rd-dates li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pf .sec h2{font-size:1.2rem;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf .sec h2 i{color:var(--teal)}
.pf .hint{color:var(--muted);font-size:.84rem;margin:0 0 10px}
.pf .badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font:700 .68rem var(--font-body);text-transform:uppercase;letter-spacing:.03em}
.pf .badge.pub{background:#fff3c4;color:#7a5a00}
.pf .badge.priv{background:#dcefd9;color:#245b1e}
.pf .sec h2 .badge i{color:inherit}
.pf .row{display:grid;gap:10px;grid-template-columns:1fr}
.pf .f{display:grid;gap:4px;font-size:.88rem;font-weight:700}
.pf .f input,.pf .f textarea,.pf .lk input{font:inherit;font-weight:400;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%;min-width:0;box-sizing:border-box}
.pf .f textarea{min-height:120px;resize:vertical}
.pf .f small{font-weight:400;color:var(--muted)}
.pf .changed input,.pf .changed textarea{border-color:var(--amber);background:#fffbea}
.pf .f.changed > span::after{content:" · changed";color:#b07a00;font-weight:600}
.pf .tog.changed,.pf .choice.changed{outline:2px solid var(--amber);outline-offset:4px;border-radius:10px}
.pf .ro{display:grid;gap:8px;grid-template-columns:1fr}
.pf .ro div{background:#f4f5ef;border-radius:10px;padding:8px 10px;font-size:.9rem}
.pf .ro small{display:block;font:700 .7rem var(--font-body);text-transform:uppercase;color:var(--muted)}
.pf .ro a{font-size:.8rem;font-weight:700;color:var(--teal)}
.pf .photo{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pf .photo figure{margin:0;display:inline-grid;justify-items:center;gap:4px;margin-right:6px}
.pf .photo figcaption{font-size:.72rem;color:var(--muted)}
.pf .photo img,.pf .photo .ini{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--teal)}
.pf .photo .ini{display:grid;place-items:center;color:#fff;font:700 1.4rem var(--font-head)}
.pf .sbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:7px 14px;font:700 .85rem var(--font-body);cursor:pointer}
.pf .sbtn.solid{background:var(--teal);color:#fff}
.pf .sbtn.red{border-color:var(--red);color:var(--red)}
.pf .ok{color:#245b1e} .pf .err{color:var(--red)}
.pf .tog{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.pf .tog input{width:20px;height:20px;accent-color:var(--teal);margin-top:2px;flex:0 0 auto}
.pf .tog small{display:block;color:var(--muted);font-size:.82rem}
.pf .choice{display:grid;gap:8px;grid-template-columns:1fr;margin-top:10px}
.pf .choice label{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font-size:.9rem}
.pf .choice label:has(input:checked){border-color:var(--teal);background:#eef7f6}
.pf .choice input{margin-top:3px;accent-color:var(--teal)}
.pf .choice small{display:block;color:var(--muted)}
.pf details.help{font-size:.85rem;margin-top:6px}
.pf details.help summary{cursor:pointer;color:var(--teal);font-weight:700}
.pf details.help ol{margin:6px 0 0;padding-left:20px}
.pf .pgood{display:grid;gap:10px;grid-template-columns:1fr;margin-top:12px;font-size:.86rem}
.pf .pgood > div{background:#f4f5ef;border-radius:10px;padding:8px 12px}
.pf .pgood ul{margin:4px 0 0;padding-left:18px} .pf .pgood li{margin:2px 0}
/* links editor: icon · address · label · site name · remove */
.pf .lk{display:grid;grid-template-columns:34px 1fr;gap:6px 8px;align-items:center;margin-top:6px}
.pf .lk .ic{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
.pf .lk .t{grid-column:2}
.pf .lk .nm{grid-column:2;font:600 .75rem var(--font-body);color:var(--muted)}
.pf .lk .x{grid-column:2;justify-self:start;border:0;background:none;color:var(--red);font-size:1.3rem;cursor:pointer;line-height:1}
/* sticky save bar */
.pf .savebar{position:sticky;bottom:0;z-index:4;background:var(--ink);color:#fff;border-radius:14px 14px 0 0;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;box-shadow:0 -6px 20px rgba(0,0,0,.2)}
.pf .savebar .msg{font-size:.88rem;flex:1;min-width:200px}
.pf .savebar .msg b{color:var(--gold)}
.pf .savebar button{border:0;border-radius:999px;padding:9px 18px;font:800 .92rem var(--font-body);cursor:pointer;background:var(--gold);color:var(--ink)}
.pf .savebar button:disabled{opacity:.4;cursor:default}
.pf .savebar .undo{background:none;color:#fff;border:1px solid rgba(255,255,255,.4)}
.pf .done,.pf .errbox{border-radius:12px;padding:10px 14px;font-size:.92rem;margin-bottom:12px}
.pf .done{background:#dcefd9;border-left:6px solid #2f7a27}
.pf .errbox{background:#fde2dd;border-left:6px solid var(--red)}
/* live preview of the public card */
.pf .pv h3{font-size:1rem;margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pf .pv .seg2{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.pf .pv .seg2 button{border:0;background:none;padding:5px 10px;font:600 .78rem var(--font-body);cursor:pointer;color:var(--ink)}
.pf .pv .seg2 button[aria-pressed=true]{background:var(--teal);color:#fff}
.pf .card{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;border-top:5px solid var(--gold)}
.pf .card .ph{display:flex;gap:12px;align-items:center;padding:14px 14px 6px}
.pf .card .ph img,.pf .card .ph .ini{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--teal);flex:0 0 auto}
.pf .card .ph .ini{display:grid;place-items:center;color:#fff;font:700 1.2rem var(--font-head)}
.pf .card .nm{font:700 1.15rem var(--font-head);line-height:1.15}
.pf .card .co2{font-size:.9rem}
.pf .card .co{color:var(--muted);font-size:.85rem}
.pf .card .chair{display:inline-block;margin-top:4px;background:var(--teal);color:#fff;border-radius:999px;padding:1px 10px;font:700 .7rem var(--font-body)}
.pf .card .body{padding:4px 14px 14px;font-size:.88rem;display:grid;gap:6px}
.pf .card .tag{font-style:italic;color:var(--orange);font-weight:600}
.pf .card .desc{color:#333;white-space:pre-wrap}
.pf .card .desc.none,.pf .card .tag.none{color:#b9bdb0;font-style:italic;font-weight:400}
.pf .card .ct span{display:block;color:var(--teal);font-weight:600}
.pf .card .soc{display:flex;gap:8px;flex-wrap:wrap}
.pf .card .soc span{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;position:relative}
.pf .card .soc span::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font:600 .72rem var(--font-body);padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.pf .card .soc span:hover::after{opacity:1}
/* in-page confirm (never the browser's own dialog) */
.pf .pf-ask{position:fixed;inset:0;z-index:50;background:rgba(4,3,2,.55);display:grid;place-items:center;padding:16px}
.pf .pf-ask[hidden]{display:none}
.pf .pf-ask .box{background:#fff;border-radius:16px;padding:18px;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pf .pf-ask .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
@media (max-width:699px){ .pf .savebar{bottom:64px} }
@media (min-width:700px){
  .pf .row.two{grid-template-columns:1fr 1fr} .pf .row.three{grid-template-columns:90px 1fr 1fr} .pf .row.addr{grid-template-columns:2fr 1fr 70px 110px}
  .pf .ro{grid-template-columns:1fr 1fr} .pf .choice{grid-template-columns:1fr 1fr} .pf .pgood{grid-template-columns:1fr 1fr}
  .pf .lk{grid-template-columns:34px 2fr 1.2fr auto} .pf .lk .t{grid-column:auto} .pf .lk .nm{grid-column:2 / 4;order:5} .pf .lk .x{grid-column:auto}
}
@media (min-width:1000px){ .pf .pf-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start} .pf .pv{position:sticky;top:130px} }

/* =============================================================================
   P25. PROFILE CHANGE REVIEW (profile-mockup-v1.html #review; Phase 7, 2026-10-04).
        Page: builder/pages/members-only-profile-review.twig · script: js/profile-review.js.
        Dr. Bob only. Everything scoped to .prv.
   ============================================================================= */
.prv .back{margin:0 0 8px} .prv .back a{font-weight:700;color:var(--teal);text-decoration:none}
.prv .box{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin:6px 0 30px}
.prv .box h1{margin:0 0 4px;font-size:1.5rem} .prv .box h1 i{color:var(--teal)}
.prv .hint{color:var(--muted);font-size:.86rem;margin:0 0 6px}
.prv table{width:100%;border-collapse:collapse;font-size:.9rem;margin:10px 0}
.prv th,.prv td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.prv th{background:var(--teal);color:#fff}
.prv td.old{color:var(--muted);text-decoration:line-through}
.prv td.new{background:#fffbea}
.prv .none{color:#b9bdb0}
.prv .lnk{display:block;margin:2px 0;word-break:break-all} .prv .lnk i{color:var(--teal);width:18px}
/* links compared one by one (walk-through fix): only REMOVED links are struck through; added ones say "+ new" */
.prv td.old.links{text-decoration:none;color:inherit}
.prv .lnk.gone{text-decoration:line-through;color:var(--muted)}
.prv .lnk .plus,.prv .lnk .minus{font:700 .66rem var(--font-body);text-transform:uppercase;border-radius:6px;padding:0 5px;margin-left:4px;text-decoration:none;display:inline-block}
.prv .lnk .plus{background:#dcefd9;color:#245b1e} .prv .lnk .minus{background:#fde2dd;color:var(--red)}
.prv .f{display:grid;gap:4px;font-size:.88rem;font-weight:700;margin-top:6px}
.prv textarea{width:100%;font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:10px;min-height:60px;box-sizing:border-box}
.prv .finish{margin:12px 0 0}
.prv .sbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:8px 16px;font:700 .88rem var(--font-body);cursor:pointer}
.prv .sbtn.solid{background:var(--teal);color:#fff} .prv .sbtn:disabled{opacity:.5;cursor:default}
.prv .phrev{display:grid;gap:12px;grid-template-columns:1fr;align-items:start}
.prv .phrev small{display:block;font:700 .7rem var(--font-body);text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.prv .phrev small.fp{text-transform:none;font-weight:600;margin-top:4px}
.prv .phrev small.fp.dir{font-weight:400;color:var(--muted);max-width:150px}   /* "This photo is tall, so only up/down…" */
.prv .circ{width:100px;height:100px;border-radius:50%;object-fit:cover;background:var(--teal);display:block}
.prv .circ.ini{display:grid;place-items:center;color:#fff;font:700 1.4rem var(--font-head)}
.prv .circ.big{width:140px;height:140px}
/* the photo box is exactly the picture (no empty bands), so a click's position = its percentage on the photo */
.prv .fwrap{position:relative;display:inline-block;max-width:100%;cursor:crosshair;border-radius:10px;overflow:hidden;line-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.prv .fwrap:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.prv .fwrap img{display:block;max-width:100%;max-height:420px;width:auto;height:auto;pointer-events:none}
.prv .fcrop{position:absolute;border:2px dashed #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.35);pointer-events:none}   /* what the Members page keeps */
.prv .fdot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid var(--gold);border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.5);pointer-events:none}
.prv .circ.fprev{position:relative;overflow:hidden}
.prv .circ.fprev img{position:absolute;max-width:none;display:block}
.prv .dec{display:inline-flex;margin-top:8px;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.prv .dec button{border:0;background:#fff;padding:5px 12px;font:700 .78rem var(--font-body);cursor:pointer;color:var(--muted)}
.prv .dec button[data-d=approved][aria-pressed=true]{background:#2f7a27;color:#fff}
.prv .dec button[data-d=sent_back][aria-pressed=true]{background:var(--red);color:#fff}
.prv .reasons{display:none;flex-wrap:wrap;gap:6px;margin-top:8px} .prv .reasons.on{display:flex}
.prv .rchip{border:1px dashed var(--red);background:#fff;color:var(--red);border-radius:999px;padding:4px 10px;font:600 .78rem var(--font-body);cursor:pointer}
.prv .done,.prv .errbox{border-radius:12px;padding:10px 14px;font-size:.92rem;margin-top:12px}
.prv .done{background:#dcefd9;border-left:6px solid #2f7a27} .prv .errbox{background:#fde2dd;border-left:6px solid var(--red)}
.prv .prv-ask{position:fixed;inset:0;z-index:50;background:rgba(4,3,2,.55);display:grid;place-items:center;padding:16px}
.prv .prv-ask[hidden]{display:none}
.prv .prv-ask .inner{background:#fff;border-radius:16px;padding:18px;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.35);line-height:1.5}
.prv .prv-ask .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
@media (min-width:700px){ .prv .phrev{grid-template-columns:110px 1fr 150px} }

/* =============================================================================
   P26. MAILING ADDRESSES = the card list (member-reports-mockup-v1.html › Mailing
        Addresses, approved 2026-09-28; Phase 7 part 3, 2026-10-04).
        Page: builder/pages/members-only-mailing-addresses.twig · script: js/mailing-addresses.js.
        Uses P20 (.rp) for the head, tabs and controls; the rest is scoped to .ma.
   ============================================================================= */
.ma .vtabs .soon{border:2px dashed var(--line);border-radius:999px;padding:9px 16px;font:700 .92rem var(--font-body);color:var(--muted);cursor:default}
.ma .vtabs .soon i{margin-right:6px}
.ma .intro{display:flex;gap:10px;align-items:flex-start;background:#eef7f6;border-radius:12px;padding:10px 14px;font-size:.92rem;margin-bottom:12px}
.ma .intro i{color:var(--teal);margin-top:3px}
.ma .intro a{color:var(--teal);font-weight:700}
/* the signed-in member's own entry */
.ma .myent{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);border-left:5px solid var(--gold);padding:12px 14px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:.92rem}
.ma .myent .st{font-weight:700} .ma .myent .st.on{color:#245b1e} .ma .myent .st.off{color:var(--muted)}
.ma .myent a{margin-left:auto;font-weight:700;color:var(--teal);text-decoration:none}
.ma .act{border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:7px 14px;font:700 .85rem var(--font-body);cursor:pointer}
.ma .act.solid{background:var(--teal);color:#fff}
.ma .sum{font-size:.85rem;color:var(--muted)}
/* the cards */
.ma .addrs{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:30px}
.ma .ad{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;font-size:.92rem;line-height:1.35;position:relative}
.ma .ad .mn{font-weight:700;font-family:var(--font-head);font-size:1.02rem;padding-right:70px}
.ma .ad .co{color:var(--muted);font-size:.85rem}
.ma .ad .src{position:absolute;right:10px;top:10px}
.ma .ad .src span{font:700 .64rem var(--font-body);text-transform:uppercase;border-radius:6px;padding:1px 6px}
.ma .ad .src .home{background:#dcefd9;color:#245b1e} .ma .ad .src .biz{background:#eceee4;color:var(--muted)}
.ma .miss{color:var(--orange);font-weight:600;font-size:.85rem}
.ma .ad button.copy{margin-top:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;font:600 .75rem var(--font-body);cursor:pointer}
@media (min-width:700px){ .ma .addrs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .ma .addrs{grid-template-columns:repeat(3,1fr)} }
/* printing: just the addresses, three across, no buttons / own entry / intro */
@media print{
  .ma .intro,.ma .myent,.ma .ad button.copy{display:none!important}
  .ma .addrs{grid-template-columns:repeat(3,1fr);gap:6px}
  .ma .ad{box-shadow:none;border:1px solid #ccc;break-inside:avoid;font-size:10pt;padding:6px 8px}
}

/* =============================================================================
   P27. FINANCES (finance-mockup-v1.html, approved 2026-09-28; Phase 7 part 4, 2026-10-04).
        Pages: members-only-finance-reports / -finance-bank / -finance-upload (+ partials/
        finance-head.twig) · script: js/finance.js. Uses P20 (.rp) for the head, tabs,
        controls; the rest is scoped to .fin.
   ============================================================================= */
.fin .vtabs .lock{font-size:.7rem;margin-left:6px;opacity:.8}
.fin .intro{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:14px;font-size:.93rem}
.fin .intro > i{color:var(--teal)} .fin .intro > span:first-of-type{flex:1;min-width:240px}
.fin .badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.03em}
.fin .badge.all{background:#dcefd9;color:#245b1e}
.fin .err{color:var(--red)}
/* year blocks + report cards */
.fin .yr{margin:18px 0 8px;display:flex;align-items:baseline;gap:10px}
.fin .yr h2{margin:0;font-size:1.35rem} .fin .yr span{color:var(--muted);font-size:.85rem}
.fin .qgrid{display:grid;gap:10px;grid-template-columns:1fr}
.fin .qc{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:4px;border-top:5px solid var(--teal)}
.fin .qc.full{border-top-color:var(--gold)}
.fin .qc .q{font:700 1.3rem var(--font-head);color:var(--teal);line-height:1}
.fin .qc .rng{color:var(--muted);font-size:.85rem}
.fin .qc .t{font-weight:700;margin-top:6px}
.fin .qc .up{font-size:.78rem;color:var(--muted)}
.fin .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.fin .qc.none{border-top-color:var(--line);background:#fafbf5} .fin .qc.none .q{color:#a3a597} .fin .qc.none .t{font-weight:400;color:var(--muted);font-style:italic}
.fin .sbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:6px 12px;font:700 .82rem var(--font-body);cursor:pointer;text-decoration:none}
.fin .sbtn.solid{background:var(--teal);color:#fff}
.fin .sbtn.sm{padding:4px 10px;font-size:.76rem}
/* bank statement months */
.fin .ctl label{font-weight:700;font-size:.9rem;display:flex;gap:6px;align-items:center}
.fin .ctl .sum{margin-left:auto;font-size:.88rem;color:var(--muted)}
.fin .mgrid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-bottom:30px}
.fin .mc{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.fin .mc b{font:700 1.05rem var(--font-head)}
.fin .mc small{font-size:.75rem;color:var(--muted)}
.fin .mc .ok{color:#245b1e;font-size:.8rem;font-weight:700}
.fin .mc .acts{margin-top:4px}
.fin .mc.none{background:#fafbf5} .fin .mc.none b{color:#a3a597}
.fin .mc .miss{color:var(--orange);font-size:.8rem;font-weight:700}
.fin .mc.future{opacity:.45}
.fin .mc > .sbtn{margin-top:4px;align-self:flex-start}
/* upload */
.fin .todo{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px}
.fin .todo h3{margin:0 0 8px;font-size:1.1rem}
.fin .todo ul{margin:0;padding-left:20px;columns:2 260px} .fin .todo li{margin:3px 0}
.fin .todo button{border:0;background:none;color:var(--teal);font:700 .88rem var(--font-body);cursor:pointer;text-decoration:underline;padding:0;text-align:left}
.fin .fn-form{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:16px;display:grid;gap:14px;margin-bottom:30px}
.fin .fn-form h2{margin:0;font-size:1.3rem}
.fin .fld{display:grid;gap:6px}
.fin .fld > span{font-weight:700;font-size:.92rem}
.fin .fld select,.fin .fld input[type=text]{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.fin .row2{display:flex;gap:8px;flex-wrap:wrap} .fin .row2 select{flex:1;min-width:120px}
.fin .kind{display:grid;gap:8px;grid-template-columns:1fr}
.fin .kind label{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.fin .kind label:has(input:checked){border-color:var(--teal);background:#eef7f6}
.fin .kind input{margin-top:4px;accent-color:var(--teal)}
.fin .kind small{display:block;color:var(--muted)}
.fin .drop{border:2px dashed var(--teal);border-radius:14px;padding:22px;text-align:center;background:#f6faf9;cursor:pointer}
.fin .drop i{font-size:1.8rem;color:var(--teal)}
.fin .drop.has{border-style:solid;background:#eef7f6} .fin .drop.over{background:#dcefd9}
.fin .drop small{display:block;color:var(--muted);margin-top:4px}
.fin .named{font-size:.88rem;background:#f4f5ef;border-radius:10px;padding:8px 10px;line-height:1.6}
.fin .named code{font-size:.85rem}
.fin .warnbox{background:#fff3c4;border-left:5px solid var(--amber);border-radius:10px;padding:10px 12px;font-size:.9rem}
.fin .okbox{background:#dcefd9;border-left:5px solid #2f7a27;border-radius:10px;padding:10px 12px;font-size:.9rem}
.fin .okbox a{color:var(--teal);font-weight:700}
/* the PDF viewer pop-up: only its own body scrolls (Safari) */
dialog.fin-pdf{border:0;border-radius:16px;padding:0;width:min(900px,94vw);height:min(88vh,1100px);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
dialog.fin-pdf::backdrop{background:rgba(4,3,2,.55)}
dialog.fin-pdf .bar2{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--teal);color:#fff}
dialog.fin-pdf .bar2 b{flex:1;font-family:var(--font-head)}
dialog.fin-pdf .bar2 button{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
dialog.fin-pdf .bar2 a{color:#fff;font-size:.85rem;text-decoration:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:4px 10px}
dialog.fin-pdf iframe{display:block;width:100%;height:calc(100% - 48px);border:0;background:#6b6b60}
html.fin-noscroll,html.fin-noscroll body{overflow:hidden}
/* in-page confirm for a replace (never the browser's own dialog) */
.fin .fin-ask{position:fixed;inset:0;z-index:50;background:rgba(4,3,2,.55);display:grid;place-items:center;padding:16px}
.fin .fin-ask[hidden]{display:none}
.fin .fin-ask .inner{background:#fff;border-radius:16px;padding:18px;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.35);line-height:1.5}
.fin .fin-ask .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
@media (min-width:700px){ .fin .qgrid{grid-template-columns:repeat(2,1fr)} .fin .mgrid{grid-template-columns:repeat(4,1fr)} .fin .kind{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .fin .qgrid{grid-template-columns:repeat(5,1fr)} .fin .mgrid{grid-template-columns:repeat(6,1fr)} }
@media print{ .fin .acts,.fin .mc > .sbtn,.fin .intro .badge{display:none!important} .fin .qc,.fin .mc{box-shadow:none;border:1px solid #ccc;break-inside:avoid} }

/* =============================================================================
   P28. DUES (member-reports-mockup-v1.html › Dues, approved 2026-09-28; Phase 7 part 5, 2026-10-04).
        Page: builder/pages/members-only-dues.twig · script: js/dues.js.
        Uses P20 (.rp) for the head, tabs and controls; the rest is scoped to .du.
   ============================================================================= */
.du .ctl label{font-weight:700;font-size:.9rem;display:flex;gap:6px;align-items:center}
.du .ctl select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.du .mydues{background:var(--teal);color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:14px;display:grid;gap:4px}
.du .mydues small{color:var(--cream);text-transform:uppercase;font:600 .78rem var(--font-body);letter-spacing:.05em}
.du .mydues b{font:700 1.8rem var(--font-head);color:var(--gold)}
.du .mydues p{margin:4px 0 0;font-size:.9rem}
.du .mydues .nb2{font:600 1rem var(--font-body);color:var(--cream)}   /* "$100.00 · not billed yet" */
.du .pill{display:inline-block;border-radius:999px;padding:2px 10px;font:700 .72rem var(--font-body);text-transform:uppercase}
.du .pill.paid{background:#dcefd9;color:#245b1e} .du .pill.due{background:#fff3c4;color:#7a5a00} .du .pill.late{background:#fde2dd;color:var(--red)} .du .pill.nb{background:#eceee4;color:var(--muted)}
.du .tiles3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.du .t3{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.du .t3.wide{grid-column:1 / -1}
.du .t3 b{display:block;font:700 1.5rem var(--font-head);color:var(--teal);line-height:1.1}
.du .t3 span{font-size:.8rem;color:var(--muted)}
.du .t3.money b{color:var(--orange)} .du .t3.bad b{color:var(--red)}
.du .tbl{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:auto;margin-bottom:14px}
.du table.mt{width:100%;border-collapse:collapse;font-size:.9rem}
.du table.mt th{background:var(--teal);color:#fff;text-align:left;padding:9px 10px;font-weight:700}
.du table.mt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.du table.mt .r{text-align:right}
.du table.mt small{display:block;color:var(--muted);font-size:.76rem}
.du table.mt tr.note td{color:var(--muted);font-style:italic;text-align:left}
.du .act{border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:5px 12px;font:700 .8rem var(--font-body);cursor:pointer}
.du .act.solid{background:var(--teal);color:#fff}
.du .act.danger{border-color:var(--red);color:var(--red)}
.du .act:disabled{opacity:.5;cursor:default}
.du .linkb{border:0;background:none;color:var(--teal);font:700 .88rem var(--font-body);cursor:pointer;text-decoration:underline;padding:0}
.du .mk{margin:0 0 12px} .du .mk small{color:var(--muted)}
.du .mkbox{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);border-left:5px solid var(--gold);padding:14px 16px;margin-bottom:14px}
.du .mkbox h3{margin:0 0 4px} .du .mkbox .hint{color:var(--muted);font-size:.86rem;margin:0 0 8px}
.du .picks{display:grid;gap:4px 14px;grid-template-columns:1fr;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-size:.9rem}
.du .picks input{accent-color:var(--teal);margin-right:6px}
.du .pays{list-style:none;margin:6px 0 0;padding:0;font-size:.8rem;display:grid;gap:2px}   /* payments (Record a payment) */
.du .mydues .pays{color:var(--cream)} .du .mydues .pays b{font:700 .9rem var(--font-body);color:#fff}
.du .pays .rc{background:#dcefd9;color:#245b1e;border-radius:6px;padding:0 5px;font:700 .65rem var(--font-body);text-transform:uppercase}
.du .linkb.danger{color:var(--red)}
.du table.mt td.owe{color:var(--red);font-weight:700}
.du td.acts{text-align:right}   /* stays a table cell (its border lines up with the row); the flex is on the inner div */
.du td.acts .acts-in{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.du table.mt small.rmd{margin-top:5px;color:#7a5a00}   /* "Reminded Oct 4, 2026 (by Dr. Bob) · 2 reminders so far" */
.du .pz{font-size:.76rem;color:var(--muted);display:flex;gap:4px;align-items:center;white-space:nowrap}
.du .du-box .sub{margin:0;color:var(--muted);font-size:.86rem} .du .du-box .note{margin:0;color:var(--muted);font-size:.8rem}
.du .du-box label small{font-weight:400;color:var(--muted)}
.du .flash{background:#dcefd9;border-left:5px solid #2f7a27;border-radius:10px;padding:8px 12px;font-size:.9rem;margin:0 0 12px}
.du .sched{font-size:.86rem;color:var(--muted);margin:0 2px 10px}   /* the year's reminder schedule */
.du .rules{font-size:.85rem;color:var(--muted);background:var(--paper);border-radius:12px;padding:10px 12px;margin:14px 0 30px}
/* in-page boxes: Mark paid + "are you sure?" (never the browser's own dialog) */
.du .du-box{position:fixed;inset:0;z-index:50;background:rgba(4,3,2,.55);display:grid;place-items:center;padding:16px}
.du .du-box[hidden]{display:none}
.du .du-box .inner{background:#fff;border-radius:16px;padding:18px;width:min(440px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35);display:grid;gap:10px;line-height:1.5}
.du .du-box h2{margin:0;font-size:1.2rem}
.du .du-box label{display:grid;gap:4px;font-weight:700;font-size:.9rem}
.du .du-box input,.du .du-box select{font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.du .du-box .err{color:var(--red);margin:0;min-height:1em;font-size:.88rem}
.du .btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px} .du .btns .sp{flex:1}
@media (min-width:700px){ .du .tiles3{grid-template-columns:repeat(4,1fr)} .du .picks{grid-template-columns:repeat(3,1fr)} }
@media print{ .du td.acts,.du #du-create,.du .du-box{display:none!important} .du .tbl{box-shadow:none;overflow:visible} }

/* =============================================================================
   P29. RENEWAL REVIEW (renewal-mockup-v1.html, approved 2026-09-28; Phase 7 part 7, 2026-10-04).
        Page: builder/pages/members-only-renewal-review.twig · script: js/renewal.js. Scoped to .rr.
   ============================================================================= */
.rr .rr-head{padding:4px 0}
.rr .rr-head h1{font-size:1.9rem;margin:0} .rr .rr-head p{margin:4px 0 0;color:var(--muted)}
.rr .rr-err{background:#fde2dd;border-left:5px solid var(--red);border-radius:10px;padding:8px 12px}
.rr .tl{display:grid;gap:8px;grid-template-columns:1fr;margin:14px 0}
.rr .tl div{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;border-top:4px solid var(--line);font-size:.85rem}
.rr .tl div.now{border-top-color:var(--gold)}
.rr .tl b{display:block;font:700 .95rem var(--font-head);color:var(--teal)} .rr .tl small{color:var(--muted)}
.rr .tiles3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.rr .t3{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.rr .t3 b{display:block;font:700 1.5rem var(--font-head);color:var(--teal);line-height:1.1} .rr .t3 span{font-size:.8rem;color:var(--muted)}
.rr .t3.flag b{color:var(--orange)} .rr .t3.ok b{color:#2f7a27} .rr .t3.drop b{color:var(--red)}
.rr h2.step{font-size:1.35rem;margin:22px 0 4px}
.rr h2.step span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:var(--gold);font-size:1rem;margin-right:8px}
.rr .hint{color:var(--muted);font-size:.88rem;margin:0 0 10px}
.rr .bar3{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0} .rr .bar3 .hint{margin:0}
.rr .btnR{border:0;border-radius:999px;padding:9px 16px;font:700 .88rem var(--font-body);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.rr .btnR.gold{background:var(--gold);color:var(--ink)} .rr .btnR.ok{background:#2f7a27;color:#fff} .rr .btnR.no{background:var(--red);color:#fff}
.rr .btnR.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)} .rr .btnR:disabled{opacity:.45;cursor:default}
.rr .tbl{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:auto;max-height:70vh}
.rr table.rt{border-collapse:separate;border-spacing:0;width:100%;font-size:.86rem}
.rr .rt th{position:sticky;top:0;z-index:2;background:var(--teal);color:#fff;text-align:right;padding:8px;white-space:nowrap}
.rr .rt th:nth-child(-n+3),.rr .rt td:nth-child(-n+3){text-align:left}
.rr .rt td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;background:var(--paper)}
.rr .rt td:first-child{white-space:normal;max-width:230px} .rr .rt td small{display:block;color:var(--muted);font-size:.72rem}
.rr .rt tr.flagged td{background:#fff3e6} .rr .rt tr.renewed td{color:var(--muted)}
.rr .pill{display:inline-block;border-radius:999px;padding:1px 8px;font:700 .68rem var(--font-body);text-transform:uppercase;white-space:nowrap}
.rr .pill.ok{background:#dcefd9;color:#245b1e} .rr .pill.below{background:#fff3c4;color:#7a5a00} .rr .pill.probation{background:#fde2dd;color:var(--red)} .rr .pill.new{background:#e3f3f2;color:var(--teal)}
.rr .pill.renew{background:#dcefd9;color:#245b1e} .rr .pill.drop{background:#fde2dd;color:var(--red)}
.rr .flagbtn{border:1px solid var(--orange);color:var(--orange);background:#fff;border-radius:999px;padding:3px 10px;font:700 .75rem var(--font-body);cursor:pointer}
.rr .flagbtn[aria-pressed=true]{background:var(--orange);color:#fff}
.rr .flagby{display:block;font-size:.68rem;color:var(--muted);margin-top:2px}
.rr .zero{color:#b9bdb0} .rr .warn{color:var(--orange)}
.rr .rv{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px;border-left:6px solid var(--orange)}
.rr .rv.decided-in{border-left-color:#2f7a27} .rr .rv.decided-out{border-left-color:var(--red)}
.rr .rv .top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center} .rr .rv .top .hint{margin:0}
.rr .rv .top b.nm{font:700 1.15rem var(--font-head)} .rr .rv .top small{display:block;color:var(--muted);font-size:.8rem}
.rr .rv .facts{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin:12px 0}
.rr .rv .facts div{background:#f4f5ef;border-radius:10px;padding:6px 10px;font-size:.8rem;color:var(--muted)}
.rr .rv .facts b{display:block;font:700 1.05rem var(--font-head);color:var(--ink)}
.rr .cols{display:grid;gap:14px;grid-template-columns:1fr}
.rr .box{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.rr .box h3{margin:0 0 8px;font-size:1rem} .rr .box ul{margin:6px 0 0;padding-left:18px;font-size:.88rem;max-height:260px;overflow:auto}
.rr .cm{border-top:1px solid var(--line);padding:6px 0;font-size:.88rem;white-space:pre-wrap} .rr .cm small{color:var(--muted);display:block;font-size:.74rem;white-space:normal}
.rr .box textarea{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;min-height:56px;margin-top:6px}
.rr .vt{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:.88rem;padding:5px 0;border-top:1px solid var(--line)}
.rr .vt small{color:var(--muted);font-size:.72rem;display:block}
.rr .v{font:700 .72rem var(--font-body);text-transform:uppercase;border-radius:999px;padding:2px 9px;white-space:nowrap}
.rr .v.in{background:#dcefd9;color:#245b1e} .rr .v.out{background:#fde2dd;color:var(--red)} .rr .v.none{background:#eceee4;color:var(--muted)}
.rr .myvote{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .rr .tally{margin-top:8px;font-size:.88rem;font-weight:700}
.rr .outcome{border-radius:12px;padding:10px 12px;margin-top:12px;font-size:.92rem} .rr .outcome.in{background:#dcefd9} .rr .outcome.out{background:#fde2dd}
.rr .email{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:.9rem}
.rr .email .hd{font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:6px}
.rr .email textarea{width:100%;box-sizing:border-box;min-height:210px;font:inherit;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.rr .email label{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:.88rem;margin-top:8px}
.rr .email input[type=date]{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.rr .fin{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:30px}
.rr .rr-box{position:fixed;inset:0;z-index:50;background:rgba(4,3,2,.55);display:grid;place-items:center;padding:16px}
.rr .rr-box[hidden]{display:none}
.rr .rr-box .inner{background:#fff;border-radius:16px;padding:18px;width:min(460px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35);line-height:1.5}
.rr .rr-box .btns{display:flex;gap:8px;align-items:center;margin-top:12px} .rr .rr-box .btns .sp{flex:1}
@media (min-width:700px){ .rr .tl{grid-template-columns:repeat(4,1fr)} .rr .tiles3{grid-template-columns:repeat(4,1fr)} .rr .rv .facts{grid-template-columns:repeat(6,1fr)} .rr .fin{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .rr .cols{grid-template-columns:1.3fr 1fr} }

/* =============================================================================
   PRINT — report pages (walk-through fix 2, Dr. Bob 2026-10-04): Activity, Attendance,
   Raw Data, Member Status, Membership Review. On paper: no site header, gold bar, phone
   tab bar, menus, filters, buttons or footer; a small heading instead (#print-head:
   report · period · filters · print date — written by each page's script); landscape,
   the full page width, and the desktop column layout (a printed page is narrower than
   the desktop breakpoint, so the phone layout would otherwise be used).
   Scoped with body:has(.rp / .rv) — other pages keep their own print rules.
   ============================================================================= */
.print-head{display:none}
@page report{size:landscape;margin:10mm}
@media print{
  .rp,.rv{page:report}
  body:has(.rp),body:has(.rv){background:#fff;padding:0;font-size:11px}
  body:has(.rp) :is(.site-header,.mo-bar,.tabbar,.site-footer,.mo-sheet,.skip-link),
  body:has(.rv) :is(.site-header,.mo-bar,.tabbar,.site-footer,.mo-sheet,.skip-link){display:none!important}
  body:has(.rp) .mo-page,body:has(.rv) .mo-page{padding:0;margin:0;background:#fff}
  /* a small inner margin on paper (walk-through, Dr. Bob 2026-10-04: the heading's first letters were clipped at the left edge) */
  body:has(.rp) .mo-page .wrap,body:has(.rv) .mo-page .wrap{max-width:none;width:auto;padding:0 4mm;margin:0;box-sizing:border-box}
  .print-head{display:block;font:700 12px var(--font-body);color:var(--ink);border-bottom:2px solid var(--teal);padding:2mm 0 4px 1mm;margin:0 0 8px}
  .rp .rp-head,.rv .rv-head,.rp .ctl,.rp .vtabs,.rw .rawtypes,.rv .tools,.rw .more,.ms .chk,.rp button,.rv button.btn{display:none!important}
  .rw .rawsum select{border:0;padding:0;background:none;-webkit-appearance:none;appearance:none}
  /* tables: whole, not scrolling; headers not sticky (they repeat on each page by themselves) */
  .rp .tbl{max-height:none;overflow:visible;box-shadow:none;border-radius:0}
  .rp .rt th,.ms .mt th,.rp .rt td:first-child,.ms .mt td:first-child{position:static}
  .rp .rt,.ms .mt{font-size:10px}
  .rp .rt th,.rp .rt td,.ms .mt th,.ms .mt td{padding:4px 5px}
  .rp .rt td:first-child{min-width:0}
  .rp .rt tr,.ms .mt tr,.rw .r2,.ms .nmc,.rv .row{break-inside:avoid}
  /* Join history (Dr. Bob, 2026-10-04): years follow each other and a long year may continue on the next page
     (it used to start every year on a new sheet — 13 sheets); only a year's heading stays with its first entry */
  .ms .yrb{break-inside:auto;margin-bottom:8px}
  .ms .yrb h3{break-after:avoid;break-inside:avoid}
  .ms .yrb h3 + .ev{break-before:avoid}
  .ms .ev{break-inside:avoid}
  .rp .who2 img,.rp .who2 .ini,.ms .who2 img,.ms .who2 .ini{width:20px;height:20px}
  .rp .t2,.ms .t3,.rw .r2,.rw .rw-meet,.ms .ch,.ms .yrb,.ms .nmc,.ms .intro,.rv .sum button{box-shadow:none;border:1px solid #ccc}
  /* the desktop column layouts on paper */
  .rp .tiles2{grid-template-columns:repeat(6,1fr)} .rp .tiles2:has(.t2:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  .ms .tiles3{grid-template-columns:repeat(4,1fr)} .ms .chairs{grid-template-columns:1fr 1fr} .ms .nm{grid-template-columns:repeat(3,1fr)}
  .rw .r2{grid-template-columns:100px 1fr auto} .rw .r2 .x{grid-column:auto;text-align:right} .rw .r2.long .x{grid-column:2 / -1;text-align:left}
  .rv .sum{grid-template-columns:repeat(6,1fr)}
  .rv .hdr,.rv .row{grid-template-columns:200px 190px 140px 90px 100px 1fr;align-items:start;column-gap:12px}
  .rv .hdr{display:grid;font:700 9px var(--font-body);text-transform:uppercase;color:var(--muted);padding:0 12px}
  .rv .row{padding:6px 10px;font-size:10px}
  .rv .mwho img,.rv .mwho .ini{width:28px;height:28px}
}

/* =============================================================================
   10. TABLET (≥ 700px)
   ============================================================================= */
@media (min-width:700px){
  /* Seating chart generator (P13): capacity strip + table picker 10 across */
  .st .caps{grid-template-columns:repeat(10,1fr)}
  .st .tpick{grid-template-columns:repeat(10,1fr)}
  /* Members' Seating view (P14): your table — number beside the tablemates */
  .se .mytbl{grid-template-columns:auto 1fr;align-items:center}
  /* Meeting tally (P12): report tiles 4 across, bigger numbers */
  .mt-tiles{grid-template-columns:repeat(4,1fr)}
  .mt-tile b{font-size:2.4rem}
  /* Thursday check-in (P11): 6 counters in a row (+ Attendance %, 2026-10-08), 2 columns of cards */
  .ci-bar{grid-template-columns:repeat(6,1fr)}
  .ci-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:3rem}
  .hero .tagline{font-size:1.45rem}
  .hero .eyebrow{display:block}
  .banner h1{font-size:2.8rem}
  .foot-grid{grid-template-columns:2fr 1fr 1fr}
  .foot-brand{flex-direction:row;align-items:center;text-align:left;gap:22px}
  .foot-logo{width:180px;height:180px;flex:0 0 auto}
  .foot-social{justify-content:flex-start}
  /* Home (P1) */
  .stats{grid-template-columns:repeat(3,1fr)}
  .meet{grid-template-columns:1fr 1fr}
  .meet .map{grid-column:1/-1}
  .speaker-list{columns:2}
  .people{grid-template-columns:repeat(3,1fr)}
  .two{grid-template-columns:1fr 1fr}
  /* Members (P2) */
  .grid{grid-template-columns:1fr 1fr}
  /* Member page (P3) */
  .mp-hero{grid-template-columns:200px 1fr}
  .mp-id{text-align:left}
  .mp-actions,.mp-social{justify-content:flex-start}
  .pros{grid-template-columns:repeat(3,1fr)}
  /* Our Story (P4) */
  .chips{grid-template-columns:repeat(3,1fr)}
  .tables th,.tables td{padding:10px 14px;font-size:1rem}
  .tables .swipe{display:none}
  .structure{grid-template-columns:repeat(3,1fr)}
  /* Events (P5) */
  .ev-feature{grid-template-columns:1.1fr 1fr}
  .ev-feature img{height:100%;min-height:240px}
  .ev-feature.no-img{grid-template-columns:1fr}
  .grid7 .cell{min-height:92px}
  .grid7 .dots{display:none}
  .grid7 .chipev{display:block;font-size:.72rem;line-height:1.2;color:var(--ct);background:var(--c);border-radius:4px;
    padding:2px 4px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .week{grid-template-columns:repeat(7,1fr)}
  .wday{min-height:160px}
  .wday .item.small{display:block;padding:4px 6px}
  .wday .item.small .dbox{display:none}
  /* Apply (P6) */
  .ap .row2{grid-template-columns:1fr 1fr}
}


/* =============================================================================
   11. DESKTOP (≥ 1000px) — full menu replaces the hamburger
   ============================================================================= */
@media (min-width:1000px){
  .nav-btn,.nav-toggle{display:none}   /* no hamburger → checkbox leaves the tab order too */
  .site-nav{position:static;display:flex;flex-direction:row;align-items:center;gap:6px;
    background:none;padding:0}
  .site-nav a{border:0;padding:8px 12px}
  .site-nav .members-only{margin:0 0 0 10px;padding:9px 18px}
  .hero h1{font-size:3.6rem}
  .hero .tagline{font-size:1.6rem}
  .banner h1{font-size:3.2rem}
  /* Members-Only Dashboard (P10): two columns */
  .dash-grid{grid-template-columns:1fr 1fr;align-items:start}
  /* Members-Only layout (P9): desktop menus replace the phone tab bar */
  .mo-links{display:flex}
  .mo-bar .who .long{display:inline}
  .mo-bar .who .short{display:none}
  .tabbar{display:none}
  body:has(.tabbar){padding-bottom:0}
  /* Home (P1) */
  .stats{grid-template-columns:repeat(6,1fr)}
  .meet{grid-template-columns:1.2fr 1fr 1fr}
  .meet .map{grid-column:auto}
  .speaker-list{columns:3}
  .agenda-grid{grid-template-columns:1fr 1.1fr;align-items:start}
  .people{grid-template-columns:repeat(5,1fr)}
  .join-grid{grid-template-columns:1fr 1.25fr;align-items:start}
  /* Members (P2) */
  .grid{grid-template-columns:repeat(3,1fr)}
  /* Member page (P3) */
  .mp-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .mp-photo{width:200px;height:200px}
  .pros{grid-template-columns:repeat(2,1fr)}
  /* Our Story (P4) */
  .timeline{padding-left:34px}
  .step::before{left:-45px}
  .step{grid-template-columns:1fr 1fr;align-items:center;gap:34px}
  .step:nth-child(even) figure{order:-1}
  .step img{height:300px}
  /* Events (P5) */
  .ev-hero{grid-template-columns:1.1fr 1fr}
  .ev-hero.no-img{grid-template-columns:1fr}
}

/* =============================================================================
   P30. DUES REDESIGN (Dr. Bob, 2026-10-04 — handoff 07; dues-redesign-mockup-v1.html, approved with 6 fixes)
   Reports ▸ Dues additions (.du), the contact-note box (.cn-box), Leadership ▸ Contact report (.cr),
   Leadership ▸ Billing checklist (.bc), Finance uploads › Dues invoices (.fin .inv-*).
   ============================================================================= */
/* --- Reports ▸ Dues --- */
.du .also{display:inline-block;background:var(--red);color:#fff;border-radius:6px;padding:1px 7px;font:700 .68rem var(--font-body);text-transform:uppercase;margin-left:6px;vertical-align:1px;white-space:nowrap}
.du .bell{display:flex;gap:6px;align-items:flex-start;margin-top:6px;color:#7a5a00;font-size:.8rem;text-decoration:underline}
.du .bell i{margin-top:3px}
.du table.mt small.inv{color:var(--teal);font-weight:600;margin-top:3px} .du small.inv a{color:inherit}
.du .act.gold{background:var(--gold);border-color:var(--gold);color:var(--ink);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.du .myinv{margin:8px 0 0!important;color:var(--cream)} .du .myinv-b{margin:6px 0 0!important;display:flex;gap:8px;flex-wrap:wrap}
.du .readybar{background:#fff3c4;border-left:5px solid var(--gold);border-radius:10px;padding:9px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.du .readybar .amb,.du .amb{color:#7a5a00;font-weight:700}
.du .mk2{margin:0 0 12px;font-size:.85rem;color:var(--muted)} .du .pz.att{display:inline-flex;white-space:normal}
.du tr.amber td{background:#fff6dc} .du small.bad,.bc small.bad{color:var(--red)!important;font-weight:700}
.du .warnbox2{background:#fdeeea;border-left:5px solid var(--red);border-radius:10px;padding:9px 12px;font-size:.88rem;margin:0 0 10px}
.du .warnbox2 ul{margin:6px 0 0 18px;padding:0}
.du .preview{margin:10px 0} .du .preview summary{cursor:pointer;font-weight:700;color:var(--teal)}
.du .mailprev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.88rem;margin-top:6px}
.du .mailprev p{margin:6px 0}
@media print{ .du #du-ready,.du .bell{display:none!important} }

/* --- the contact-note box (contact-note.js) — an in-page box, never the browser's own dialog --- */
.cn-box{position:fixed;inset:0;z-index:60;background:rgba(4,3,2,.55);display:grid;place-items:center;padding:16px}
.cn-box[hidden]{display:none}
.cn-box .inner{background:#fff;border-radius:16px;padding:18px;width:min(480px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);display:grid;gap:10px;line-height:1.5}
.cn-box h2{margin:0;font-size:1.2rem} .cn-box .sub{margin:0;color:var(--muted);font-size:.86rem}
.cn-box label{display:grid;gap:4px;font-weight:700;font-size:.9rem}
.cn-box input[type=date],.cn-box input[type=time],.cn-box select,.cn-box textarea{font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:10px;width:100%;box-sizing:border-box}
.cn-box .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cn-box fieldset{border:0;margin:0;padding:0} .cn-box legend{font-weight:700;font-size:.9rem;padding:0;margin-bottom:4px}
.cn-box .chips{display:flex;flex-wrap:wrap;gap:6px}
.cn-box .chips label{display:inline-flex;font-weight:600}
.cn-box .chips input{position:absolute;opacity:0;pointer-events:none}
.cn-box .chips span{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.86rem;cursor:pointer}
.cn-box .chips input:checked + span{background:var(--teal);border-color:var(--teal);color:#fff}
.cn-box .chips input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.cn-box .note{margin:0;color:var(--muted);font-size:.8rem} .cn-box .err{color:var(--red);margin:0;min-height:1em;font-size:.88rem}
.cn-box .btns{display:flex;gap:8px;align-items:center} .cn-box .btns .sp{flex:1}
.cn-box .act{border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:6px 14px;font:700 .85rem var(--font-body);cursor:pointer}
.cn-box .act.solid{background:var(--teal);color:#fff} .cn-box .act:disabled{opacity:.5}
@media (max-width:480px){ .cn-box .two{grid-template-columns:1fr} }

/* --- Leadership ▸ Contact report --- */
.cr .cr-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin:6px 0 14px}
.cr .cr-head h1{margin:2px 0}
.cr .eyebrow{margin:0;font:700 .75rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--orange)}
.cr .who{margin:0;color:var(--muted);font-size:.92rem}
.cr .btns{display:flex;gap:8px;flex-wrap:wrap}
.cr .act{border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:6px 13px;font:700 .85rem var(--font-body);cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.cr .act.solid{background:var(--teal);color:#fff} .cr .act.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cr .linkb{border:0;background:none;color:var(--teal);font:700 .85rem var(--font-body);cursor:pointer;text-decoration:underline;padding:0}
.cr .linkb.danger{color:var(--red)}
.cr .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 16px}
.cr .t3{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.cr .t3 b{display:block;font:700 1.4rem var(--font-head);color:var(--teal);line-height:1.1} .cr .t3 span{font-size:.8rem;color:var(--muted)}
.cr .t3.bad b{color:var(--red)}
.cr h2{font-size:1.2rem;margin:6px 0 8px}
.cr .tbl{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:auto}
.cr table.mt{width:100%;border-collapse:collapse;font-size:.88rem}
.cr table.mt th{background:var(--teal);color:#fff;text-align:left;padding:8px 10px}
.cr table.mt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.cr table.mt .r{text-align:right} .cr table.mt small{display:block;color:var(--muted);font-size:.74rem}
.cr table.mt td.owe{color:var(--red);font-weight:700}
.cr tr.unpaid td{background:#fdeeea} .cr tr.unpaid td:first-child{box-shadow:inset 4px 0 0 var(--red)}
.cr .pill{display:inline-block;border-radius:999px;padding:2px 10px;font:700 .7rem var(--font-body);text-transform:uppercase}
.cr .pill.paid{background:#dcefd9;color:#245b1e} .cr .pill.due{background:#fff3c4;color:#7a5a00} .cr .pill.late{background:#fde2dd;color:var(--red)}
.cr .note{color:var(--muted);font-size:.8rem;margin:6px 0 0}
.cr .filters{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 10px;align-items:center}
.cr .filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;font:700 .84rem var(--font-body);cursor:pointer}
.cr .filters button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.cr .filters .auto{margin-left:auto;font-size:.84rem;display:flex;gap:5px;align-items:center}
.cr .tl{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:8px}
.cr .tl li{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:start}
.cr .tl li.none{display:block;color:var(--muted);font-style:italic}
.cr .tl .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e7ecef;color:var(--teal)}
.cr .tl li.auto{background:#f4f5ee;box-shadow:none;border:1px dashed var(--line)} .cr .tl li.auto .ic{background:#fff;color:var(--muted)}
.cr .tl .when{font-weight:700} .cr .tl .meta{color:var(--muted);font-size:.82rem}
.cr .tl p{margin:4px 0 0;font-size:.92rem}
.cr .tl .acts{display:flex;gap:10px}
.cr .tag{display:inline-block;border-radius:6px;padding:0 6px;font:700 .68rem var(--font-body);text-transform:uppercase;margin-left:4px}
.cr .tag.due{background:#fff3c4;color:#7a5a00} .cr .tag.due.gen{background:#eceee4;color:var(--muted)} .cr .tag.auto{background:#e7ecef;color:var(--teal)}
.cr .undo{background:var(--gold);border-radius:12px;padding:8px 12px;display:flex;gap:10px;align-items:center;font-weight:700;margin:0 0 10px}
.cr .undo .sp{flex:1}
.cr .flash{background:#dcefd9;border-left:5px solid #2f7a27;border-radius:10px;padding:8px 12px;font-size:.9rem;margin:0 0 12px}
.cr .cr-pick{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.cr .cr-pick select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;max-width:100%}
@media (min-width:760px){ .cr .tiles{grid-template-columns:repeat(4,1fr)} }
/* on paper: portrait, no site chrome, no buttons (the PDF download has the same parts) */
@media print{
  body:has(.cr){background:#fff;padding:0;font-size:11px}
  body:has(.cr) :is(.site-header,.mo-bar,.tabbar,.site-footer,.mo-sheet,.skip-link){display:none!important}
  body:has(.cr) .mo-page{padding:0;margin:0;background:#fff}
  body:has(.cr) .mo-page .wrap{max-width:none;width:auto;padding:0 4mm;margin:0}
  .cr .print-head{display:block;font:700 12px var(--font-body);color:var(--ink);border-bottom:2px solid var(--teal);padding:2mm 0 4px 1mm;margin:0 0 8px}
  .cr .btns,.cr .filters button,.cr .filters .auto,.cr .tl .acts,.cr .undo,.cr .flash,.cr .eyebrow{display:none!important}
  .cr .t3,.cr .tbl,.cr .tl li{box-shadow:none;border:1px solid #ccc} .cr .tbl{overflow:visible}
  .cr .tl li,.cr tr{break-inside:avoid} .cr .tiles{grid-template-columns:repeat(4,1fr)}
}

/* --- Leadership ▸ Billing checklist (prints with the report rules: .rp) --- */
.bc .bc-sum{margin:0 0 10px;font-size:.95rem}
.bc code{font:600 .82rem ui-monospace,Menlo,Consolas,monospace;background:#f4f5ee;border-radius:6px;padding:2px 6px;word-break:break-all}
.bc .linkb{border:0;background:none;color:var(--teal);font:700 .84rem var(--font-body);cursor:pointer;text-decoration:underline;padding:0;white-space:nowrap}
.bc .ok{color:#2f7a27;font-weight:700}
.bc .act{border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:999px;padding:5px 12px;font:700 .8rem var(--font-body);cursor:pointer}
.bc .tbl{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:auto;margin-bottom:10px}
.bc table.mt{width:100%;border-collapse:collapse;font-size:.9rem}
.bc table.mt th{background:var(--teal);color:#fff;text-align:left;padding:9px 10px}
.bc table.mt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.bc table.mt .r{text-align:right} .bc table.mt small{display:block;color:var(--muted);font-size:.76rem}
.bc .note{color:var(--muted);font-size:.82rem}
.bc .flash{background:#dcefd9;border-left:5px solid #2f7a27;border-radius:10px;padding:8px 12px;font-size:.9rem;position:sticky;bottom:12px}
@media print{ .bc .linkb,.bc .flash,.bc .note{display:none!important} .bc .tbl{box-shadow:none;overflow:visible} .bc table.mt{font-size:10px} }

/* --- Finance uploads › Dues invoices --- */
.fin .fin-single{display:grid;gap:14px}
.fin .inv-area{display:grid;gap:10px}
.fin .inv-prog{margin:0;font-weight:700;color:var(--teal)} .fin .inv-prog .bad{color:var(--red)}
.fin .inv-bad{background:#fdeeea;border-left:5px solid var(--red);border-radius:10px;padding:10px 12px;font-size:.9rem;margin-bottom:10px}
.fin .inv-bad ul{margin:6px 0 0 18px;padding:0}
.fin code{font:600 .8rem ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.fin table.inv-t{width:100%;border-collapse:collapse;font-size:.88rem}
.fin table.inv-t th{background:var(--teal);color:#fff;text-align:left;padding:8px 10px}
.fin table.inv-t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.fin table.inv-t .r{text-align:right} .fin table.inv-t small{display:block;color:var(--muted);font-size:.74rem}
.fin table.inv-t tr.warn td{background:#fff6dc} .fin table.inv-t tr.nomatch td{background:#fdeeea}
.fin .amt-warn{display:block;color:var(--red);font-weight:700;font-size:.76rem}
.fin .inv-in{font:inherit;padding:5px 8px;border:1px solid var(--red);border-radius:8px;width:110px;margin-top:3px}
.fin .inv-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px} .fin .inv-bar .sp{flex:1}
.fin .inv-bar .bad{color:var(--red)} .fin .inv-bar .amb{color:#7a5a00}
.fin .inv-area .note{color:var(--muted);font-size:.8rem;margin:6px 0 0}
.fin .pz{font-size:.8rem;display:flex;gap:4px;align-items:center;white-space:nowrap}
.fin .kind label:has(input[value=inv]){border-style:dashed}
@media (min-width:700px){ .fin .kind{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .fin .kind{grid-template-columns:repeat(4,1fr)} }
/* Approvals (P18) — dues redesign: "Also owes" tags + the "Contact report" link on member cards */
.apq .also{display:inline-block;background:var(--red);color:#fff;border-radius:6px;padding:1px 7px;font:700 .68rem var(--font-body);text-transform:uppercase;margin:3px 4px 0 0}
.apq .crlink{white-space:nowrap;color:var(--teal);font-weight:700;margin-left:4px}
@media print{ .ms .crl{display:none!important} }
/* elements shown with display:grid/flex must still obey the hidden attribute (dues redesign) */
.cr .undo[hidden],.fin .inv-area[hidden],.fin .fin-single[hidden]{display:none}
.cr .tl .tag.due{background:#ffe7a0;color:#4f3a00;font-size:.7rem} .cr .tl .tag.due.gen{background:#e3e6da;color:#3f423a}
/* dues redesign walk-through fixes (Dr. Bob, 2026-10-04) */
/* 3 — the confirmation is a toast at the bottom of the screen, seen wherever the button was */
.du .flash{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;width:min(560px,calc(100% - 32px));box-shadow:0 10px 30px rgba(0,0,0,.25);margin:0;font-weight:600}
.du .flash[hidden]{display:none}
.du small.okp{color:#245b1e!important;font-weight:700}
/* 1 — what is missing before Save */
.fin .inv-msg{background:#fdeeea;border-left:5px solid var(--red);border-radius:10px;padding:8px 12px;margin:8px 0 0;font-weight:700;color:var(--red)}
.fin .inv-msg[hidden]{display:none}
/* 5 — the timeline tags with real contrast: dark teal (a dues year), dark grey (General), gold (automatic). The class is
   "due", NOT "about": .about is the site-wide section style (a background picture + overlay) that washed the tag out. */
.cr .tl .tag.due{background:var(--teal);color:#fff;font-size:.7rem}
.cr .tl .tag.due.gen{background:#4a4d45;color:#fff}
.cr .tl .tag.auto{background:var(--gold);color:var(--ink)}
@media print{ .cr .tl .tag{border:1px solid #333} }

/* =============================================================================
   P31. EVERY BUTTON GIVES FEEDBACK (Dr. Bob, 2026-10-04 — site-wide; js/amrp-busy.js)
   1 pressed at once · 2 spinner + "Saving…" + disabled while working · 3 "✓ Saved" / "✗ Not saved" · the bottom bar
   ============================================================================= */
:is(button, input[type=submit], input[type=button], a.act, a.btn, a.sbtn, a.btnA, a.btnR, [role=button]):is(:active, .is-pressed):not(:disabled){
  transform:translateY(1px) scale(.98);filter:brightness(.86);transition:none}
:is(button, input[type=submit], input[type=button], a.act, a.btn, a.sbtn, a.btnA, a.btnR){transition:transform .08s, filter .08s}
.is-busy{cursor:progress!important;opacity:.85}
.is-busy,.is-done,.is-failed{white-space:nowrap}
.is-done{background-image:none!important;outline:2px solid #2f7a27;outline-offset:1px}
.is-failed{outline:2px solid var(--red);outline-offset:1px}
.amrp-spin{display:inline-block;width:.9em;height:.9em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-.12em;animation:amrp-spin .7s linear infinite}
@keyframes amrp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .amrp-spin{animation-duration:2s} }
.amrp-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;width:min(520px,calc(100% - 32px));box-sizing:border-box;
  background:var(--teal);color:#fff;border-radius:12px;padding:10px 14px;font:600 .95rem var(--font-body);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.amrp-bar[hidden]{display:none} .amrp-bar.ok{background:#2f7a27} .amrp-bar.err{background:var(--red)}
@media print{ .amrp-bar{display:none!important} }
/* Finance uploads — earlier versions kept (a replaced PDF is never lost; Dr. Bob, 2026-10-04) */
.fin .kept{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin:0 0 30px;display:grid;gap:8px}
.fin .kept[hidden]{display:none}
.fin .kept h2{margin:0;font-size:1.15rem}
.fin .kept .kv{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:8px}
.fin .kept .kv > span{flex:1 1 260px} .fin .kept .kv small{display:block;color:var(--muted);font-size:.8rem}
.fin .okbox .sbtn{margin-left:4px}
/* Renewal review walk-through fixes (Dr. Bob, 2026-10-05) */
.rr .box ul.all{max-height:none;overflow:visible;columns:2 180px;column-gap:18px}   /* every name invited back, no scrolling box */
.rr .box ul.all li{break-inside:avoid}
.rr .sentl{display:inline} .rr .sentl summary{display:inline;cursor:pointer;color:var(--teal);text-decoration:underline;font-weight:600}
.rr .sentl pre{white-space:pre-wrap;font:inherit;background:#f4f5ee;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0 0}
.rr .email.next{border-left:5px solid var(--gold)}
.rr .email .nx{display:grid;gap:12px;margin-top:10px}
.rr .email .nx > div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rr .email .nx label{font-weight:700;font-size:.88rem}
.rr .email .nx input[type=text]{flex:1 1 260px;font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:10px}
.rr .email .nx input[type=date]{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.rr .email .nx .hint{flex-basis:100%}
@media (min-width:900px){ .rr .email .nx{grid-template-columns:1fr 1fr} }
.rr .outcome.over{background:#eceee4;color:#5b5f55;border:1px solid var(--line)}   /* an overridden committee vote — history, not the current status (2026-10-05) */
/* =============================================================================
   P32. THE UNDO BAR — one for the whole site (Dr. Bob, 2026-10-05; js/amrp-busy.js › AMRPUndo)
   Fixed at the TOP of the window (always where you're looking), large and gold, "Undo (10)" counting down, a shrinking
   line over the 10 seconds. Above the site header + menus (z 1100). Appears instantly in place (no slide).
   ============================================================================= */
.amrp-undo{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:1100;display:none;
  gap:16px;align-items:center;width:min(640px,calc(100vw - 24px));box-sizing:border-box;overflow:hidden;
  background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:16px 20px 20px;
  font:800 1.15rem var(--font-body);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.amrp-undo.show{display:flex}
.amrp-undo i{font-size:1.4rem}
.amrp-undo .txt{flex:1}
.amrp-undo .u{background:var(--ink);color:var(--gold);border:0;border-radius:999px;padding:12px 22px;font:900 1.1rem var(--font-body);cursor:pointer;white-space:nowrap}
.amrp-undo .u:focus-visible{outline:3px solid #fff;outline-offset:2px}
.amrp-undo.plain .u,.amrp-undo.plain .line{display:none}
.amrp-undo .line{position:absolute;left:0;bottom:0;height:6px;width:100%;background:var(--ink);transform-origin:left}
.amrp-undo.run .line{animation:amrp-undo-shrink var(--undo-secs,10s) linear forwards}
@keyframes amrp-undo-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){ .amrp-undo.run .line{animation:none} }
@media print{ .amrp-undo{display:none!important} }
.fin .waitbox{background:#fff3c4;border-left:5px solid var(--gold);border-radius:10px;padding:10px 12px;font-size:.92rem} .fin .waitbox .err{color:var(--red);font-weight:700}   /* "Checking and masking…" (PDF job, 2026-10-05) */
.fin .worker{font-size:.85rem;color:var(--muted);margin:0 0 12px} .fin .worker.stale{color:var(--red);font-weight:600}   /* PDF checker heartbeat (option c) */

/* =============================================================================
   P33. EMAIL PREVIEWS (Phase 8 part 1, 2026-10-05 — Leadership ▸ Email previews, Dr. Bob only)
   Every email the site sends, shown at computer width and phone width; "Send me" buttons.
   ============================================================================= */
.ep .lead{max-width:860px}
.ep-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 16px}
.ep-status{color:var(--muted);font-size:.92rem}
.ep-lay{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}   /* mobile audit 2026-10-06 */
@media (min-width:1100px){.ep-lay{grid-template-columns:260px minmax(0,1fr)}}
.ep-nav{background:#fff;border-radius:12px;padding:10px;align-self:start;box-shadow:0 6px 24px rgba(3,54,55,.12)}
@media (min-width:1100px){.ep-nav{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto}}
.ep-nav h2{font:700 .72rem var(--font-body,sans-serif);text-transform:uppercase;letter-spacing:.06em;color:#777;margin:12px 6px 4px}
.ep-nav button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--teal)}
.ep-nav button[aria-pressed=true]{background:var(--teal);color:#fff}
.ep-nav button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.ep-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px 14px;margin-bottom:12px}
.ep-head .sp{flex:1} .ep-head .muted{color:var(--muted);font-size:.85rem}
.ep-views{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ep-desk{width:680px;max-width:100%;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.15);overflow:hidden}
.ep-phone{width:375px;max-width:100%;border:10px solid #111;border-radius:28px;overflow:hidden;background:#fff}
.ep iframe{border:0;width:100%;display:block;min-height:400px}
/* P33 (cont.) — Recent emails (the send log) */
.ep-h2{margin-top:28px}
.ep-log{background:#fff;border-radius:12px;overflow:auto;box-shadow:0 6px 24px rgba(3,54,55,.12)}
.ep-log table{width:100%;border-collapse:collapse;font-size:.88rem}
.ep-log th{background:var(--teal);color:#fff;text-align:left;padding:8px 10px}
.ep-log td{padding:7px 10px;border-bottom:1px solid #e3e6d6;vertical-align:top}
.ep-log small{display:block;color:#777;font-size:.76rem}
.ep-log .good{color:#245b1e} .ep-log .bad{color:var(--red)} .ep-log .skip{color:#7a5a00}
.ep-last{color:var(--muted);font-size:.9rem;margin:-6px 0 14px}   /* P33: the last 5 AM summary */

/* =============================================================================
   P34. MEMBER FEEDBACK (Phase 8 part 10, 2026-10-06 — phase8-pages-mockup-v2.html panels 1–4)
   Members Only ▸ Feedback (the form + "My feedback") and Leadership ▸ Feedback (Dr. Bob's list).
   Everything scoped to .fbk; the Members-Only footer line is .mo-foot.
   ============================================================================= */
.fbk{max-width:860px}
.fbk .lead{color:var(--muted)}
.fbk .review-note{margin:12px 0 0}
.fbk-done{background:#e8f3e3;border:1px solid #9cc68f;color:#245b1e;border-radius:10px;padding:10px 14px;margin:14px 0 0}
.fbk-form{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:16px 0 26px}
.fbk-kinds{border:0;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fbk-kinds legend{font-weight:700;margin-bottom:8px;padding:0}
.fbk-kind{position:relative;cursor:pointer}
.fbk-kind input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fbk-kind span{display:inline-flex;gap:6px;align-items:center;border:2px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;background:#fff}
.fbk-kind input:checked + span{border-color:var(--teal);background:var(--teal);color:var(--cream)}
.fbk-kind input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px}
.fbk .field{margin:0 0 14px}
.fbk .field label{display:block;font-weight:700;margin-bottom:6px}
.fbk .field small{font-weight:400;color:var(--muted)}
.fbk textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px;font:1rem var(--font-body);background:#fff}
.fbk .help{font-size:.85rem;color:var(--muted);margin:4px 0 0}
.fbk .req{color:var(--red)}
.fbk-auto{font-size:.9rem;color:var(--muted);margin:0 0 12px}
.fbk-auto code{font-size:.85rem}
.fbk-err{background:#fde8e4;border:1px solid var(--red);color:var(--red);border-radius:10px;padding:8px 12px}
.fbk-actions{display:flex;flex-wrap:wrap;gap:10px}
.fbk-actions .btn{margin:0}
.fbk-mine h2{font-family:var(--font-head);color:var(--teal)}
.fbk-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fbk-item{background:var(--paper);border-radius:12px;box-shadow:0 2px 10px rgba(3,54,55,.08);padding:14px 16px}
.fbk-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fbk-kindtag{font-weight:700;font-size:.85rem}
.fbk-kindtag.k-broken{color:var(--red)}
.fbk-kindtag.k-idea{color:var(--orange)}
.fbk-kindtag.k-question{color:var(--teal)}
.fbk-st{margin-left:auto;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700}
.fbk-st.st-new{background:var(--gold);color:var(--ink)}
.fbk-st.st-look{background:#ffe1c2;color:#7a3a00}
.fbk-st.st-plan{background:#dde9f7;color:#1f4a7a}
.fbk-st.st-done{background:#e2f0dc;color:#245b1e}
.fbk-st.st-wont{background:#eee;color:#555}
.fbk-text{margin:8px 0 4px}
.fbk-meta{font-size:.85rem;color:var(--muted);margin:0}
.fbk-meta a{color:var(--orange)}
.fbk-reply{background:#fff;border-left:3px solid var(--teal);padding:6px 10px;margin:8px 0 0;border-radius:0 8px 8px 0}
.fbk-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0}
.fbk-filter .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font:600 .85rem var(--font-body);cursor:pointer}
.fbk-filter .chip[aria-pressed="true"]{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.fbk-filter .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.fbk-shot{display:inline-block;margin:10px 0 0}
.fbk-shot img{max-width:240px;max-height:180px;border:1px solid var(--line);border-radius:8px}
.fbk-status{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.fbk-sbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font:600 .82rem var(--font-body);cursor:pointer}
.fbk-sbtn[aria-pressed="true"]{border-color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.fbk-box{margin:8px 0 0}
.fbk-box summary{cursor:pointer;font-weight:600;color:var(--teal)}
.fbk-box textarea{margin:8px 0}
.fbk-box .btn{margin:0;padding:8px 16px}
.fbk-done-box{display:block;margin:0 0 8px;font-size:.9rem}
.fbk-hist{list-style:none;padding:0;margin:8px 0 0;font-size:.88rem}
.fbk-hist li{padding:3px 0;border-bottom:1px dashed var(--line)}
.fbk-hist .when{color:var(--muted)}
.fbk-admin .fbk-err{margin:8px 0 0}
/* the Members-Only footer line (every Members-Only page): Feedback (+ later Getting Started) */
.mo-foot{font-size:.88rem;color:var(--muted);text-align:center;margin:28px 0 8px}
.mo-foot a{color:var(--orange);font-weight:600}
/* the gold Feedback tile on Approvals (only when something is New) */
.fbk-tile{display:inline-flex;gap:8px;align-items:center;background:var(--gold);color:var(--ink);border-radius:12px;padding:10px 16px;margin:12px 0 0;text-decoration:none;font-weight:600}
.fbk-tile:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* =============================================================================
   P35. MEMBER GUIDE (/members-only/help — go-live, 2026-10-06) + the Dashboard "Start here" card + the sign-in steps
   ============================================================================= */
.guide{max-width:820px}
.guide .lead{color:var(--muted)}
.guide-toc{background:var(--paper);border-radius:12px;box-shadow:0 2px 10px rgba(3,54,55,.08);padding:12px 18px;margin:14px 0 22px}
.guide-toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:28px}
@media (max-width:620px){.guide-toc ol{columns:1}}
.guide-toc li{margin:3px 0}
.guide-toc a,.guide a{color:var(--orange);font-weight:600}
.guide section{scroll-margin-top:calc(var(--header-h) + 12px);border-top:1px solid var(--line);padding:6px 0 10px}
.guide h2{font-family:var(--font-head);color:var(--teal);display:flex;gap:10px;align-items:center}
.guide h2 .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:var(--cream);font:700 .95rem var(--font-body);flex:none}
.guide li{margin:5px 0}
.guide-steps{padding-left:1.4em}
.guide-steps > li{margin:7px 0}   /* NOT the site-wide .steps (Home's numbered gold circles) */
.guide-slips dd p{margin:6px 0 0}
.guide-tip{background:#fff8dc;border-left:3px solid var(--gold);padding:8px 12px;border-radius:0 8px 8px 0}
.guide-slips dt{font-weight:700;color:var(--teal);margin:12px 0 2px}
.guide-slips dt i{width:1.3em;color:var(--orange)}
.guide-slips dd{margin:0 0 0 1.6em}
.guide-top{text-align:right;margin:18px 0 0}
@media print{.guide-toc,.guide-top{display:none}.guide section{break-inside:avoid}}
.start-here{display:flex;gap:12px;align-items:flex-start;background:#fff8dc;border:1px solid var(--gold);border-radius:12px;padding:10px 14px;margin:0 0 14px}
.start-here[hidden]{display:none}
.start-here > i{color:var(--orange);margin-top:3px}
.start-here p{margin:0;flex:1}
.start-here a{color:var(--orange);font-weight:700}
.start-here .x{border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.si-first{margin:14px 0 0;text-align:left;font-size:.92rem}
.si-first summary{cursor:pointer;font-weight:600;color:var(--teal)}
.si-first ol{padding-left:1.3em;margin:8px 0 0}

/* =============================================================================
   P40. Leadership ▸ Sign-ins (2026-10-09) — builder/pages/members-only-sign-ins.twig, js/sign-ins.js
   Scoped to .si (the page also uses the shared report look .rp).
   ============================================================================= */
.si .si-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.si .si-tiles div{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;color:var(--muted)}
.si .si-tiles b{display:block;font:700 1.8rem/1.1 var(--font-head);color:var(--teal)}
.si .si-tiles .warn b{color:var(--red)}
.si .seg2{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.si .seg2 button{font:inherit;font-size:.85rem;border:0;background:none;padding:7px 12px;cursor:pointer;color:var(--ink)}
.si .seg2 button[aria-pressed=true]{background:var(--teal);color:#fff;font-weight:700}
.si .si-wrap{overflow-x:auto;background:var(--paper);border-radius:14px;box-shadow:var(--shadow)}
.si .si-t{width:100%;border-collapse:collapse;font-size:.92rem}
.si .si-t th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px;border-bottom:2px solid var(--line);white-space:nowrap}
.si .si-t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.si .si-t td small{display:block;color:var(--muted);font-size:.75rem}
.si .si-t .n{text-align:right}
.si .si-t tr.never td{background:#fdf3f1}
.si .pill{display:inline-block;border-radius:999px;padding:1px 8px;font:700 .72rem var(--font-body)}
.si .pill.new{background:#fff3c4;color:#7a5a00}
.si .pill.never{background:#fde2dd;color:var(--red)}
.si .muted{color:var(--muted)}
.si details summary{cursor:pointer;color:var(--orange);font-weight:600;white-space:nowrap}
.si details ul{margin:6px 0 0;padding-left:18px;font-size:.85rem;max-height:220px;overflow:auto}
.si .note{color:var(--muted);font-size:.85rem;margin-top:10px}
@media (max-width:640px){ .si .si-tiles{grid-template-columns:1fr} }