/* Samadhi — My Account. Scoped to .acc, tokens re-declared with the same values
   as the supporters/booking modules so it drops onto the live account page. */
.acc{
  --orange:#c46a26; --orange-dark:#a2551d; --orange-tint:#fbeee0;
  --cream:#faf8f4; --cream-deep:#f0eee9; --border:#e3e0d8; --border-soft:#eeece6;
  --ink:#33312e; --ink-soft:#615c53; --ink-faint:#948d80; --paper:#fff;
  --ok:oklch(0.55 0.12 150); --ok-tint:oklch(0.95 0.03 150);
  --low:oklch(0.62 0.14 70); --low-tint:oklch(0.96 0.04 70);
  --full:oklch(0.5 0.1 25); --full-tint:oklch(0.95 0.03 25);
  --radius:22px;
  /* Card geometry, matched to the practice library rather than invented here. The library's own card
     is 20px / 1.5px and lifts 2px on hover; these cards were 18px / 1px lifting 3px, which is what
     made a course in My Account feel like a different component from the same course in the library.
     The shadow's last alpha was .12 against the library's .14 — now byte-identical to
     `#se-library-root .lb{--shadow}`, so the two are one value in two places, not two values. */
  --radius-card:20px; --border-card:1.5px;
  --shadow-card:0 1px 2px rgba(51,49,46,.04),0 8px 24px -12px rgba(51,49,46,.14);
  color:var(--ink);font-family:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;text-align:left;container-type:inline-size;
}
/* Breathing room under the header and above the footer. There was none: "My Bookings" sat directly
   against the header band and the footer came up close underneath.
   34px / 90px, and 24px / 70px on a narrow screen, are the practice library's own `.page` values
   rather than a fresh judgement, so the two pages start at the same height down the screen.
   Vertical only. `.acc` is the container-query container, and horizontal padding here would change
   the inline-size every @container rule in this file is measured against.
   A @media and not a @container for the narrow value, deliberately: `.acc` IS that container, and an
   element cannot be styled by a query against itself, so it has to come from the viewport. */
.acc{padding:34px 0 90px}
@media (max-width:900px){.acc{padding:24px 0 70px}}
.acc *{box-sizing:border-box}
.acc a{color:var(--orange-dark)}
.acc a:hover{color:var(--orange)}

/* The theme's own stylesheet sets a bare `h3{color:#e4780d}`, and that is the single reason My Account
   read as a different site: every card title here came out theme-orange while the practice library and
   the events listing render theirs in ink. The library guards this inside #se-library-root; this is the
   same guard for .acc.
   `:where()` is load-bearing, not decoration. It contributes no specificity, so this rule scores as
   plain `.acc` — enough to beat a bare element selector, and low enough that every real rule still
   wins: `.acc-sec-h h3` keeps its ink-faint, and `.sup-history h3` in the supporter stylesheet (which
   loads BEFORE this one, so a same-specificity rule here would have silently overridden it) is
   untouched. Only h3 is actually bled on today; the rest are listed so the next heading added to this
   module cannot reintroduce the bug. */
.acc :where(h1,h2,h3,h4,h5,h6){color:var(--ink)}

/* ── shell ── */
.acc-shell{display:grid;grid-template-columns:268px 1fr;gap:34px;align-items:start}
.acc-shell>*{min-width:0}
@container (max-width:900px){.acc-shell{grid-template-columns:1fr;gap:20px}}

/* ── side nav ── */
.acc-side{position:sticky;top:88px}
@container (max-width:900px){.acc-side{position:static;min-width:0}}
.acc-me{display:flex;align-items:center;gap:13px;padding:0 4px 18px;border-bottom:1px solid var(--border-soft);margin-bottom:14px}
.acc-me .who .hi{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.acc-me .who .nm{font-size:18px;font-weight:900;letter-spacing:-.015em;line-height:1.2;margin-top:3px}
.acc-av{flex:none;width:54px;height:54px;border-radius:50%;background:var(--orange-tint);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;letter-spacing:-.01em;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.acc-av img{width:100%;height:100%;object-fit:cover}
.acc-av.lg{width:88px;height:88px;font-size:30px}
.acc-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.acc-nav button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:none;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink-soft);padding:11px 14px;border-radius:13px;cursor:pointer;line-height:1.35;transition:background .12s,color .12s}
.acc-nav button:hover{background:var(--cream-deep);color:var(--ink)}
.acc-nav button.on{background:var(--orange-tint);color:var(--orange-dark);font-weight:800}
.acc-nav button .dotflag{margin-left:auto;flex:none;width:8px;height:8px;border-radius:50%;background:var(--full)}
.acc-nav .sep{height:1px;background:var(--border-soft);margin:8px 12px}
.acc-nav button.out{color:var(--ink-faint)}

/* mobile: the nav becomes a row of pills.

   IT USED TO SCROLL SIDEWAYS AND IT HID FIVE OF ITS EIGHT ITEMS. `overflow-x:auto` with
   `scrollbar-width:none` and `::-webkit-scrollbar{display:none}` is a strip with no scrollbar and no
   other affordance: about three pills fit at phone width - and the third is "Samadhi Supporter
   Membership", which is wide enough on its own to leave nothing peeking past the edge to say the row
   continues. Everything after it was invisible to anyone who did not happen to swipe: Purchases,
   Donations, Credit & vouchers, Account, and Log Out.

   LOG OUT IS THE ONE THAT MADE IT SERIOUS. It is the LAST pill, it is the only route to signing out
   anywhere on the site, and it is `.out`, i.e. deliberately faint. Somebody signed in on a borrowed
   or family phone had no findable way to sign out of an account holding their bookings, their orders
   and their donations.

   So the row wraps instead of scrolling. Every item is on screen without knowing anything, no arrow
   or fade has to teach a gesture, and the cost is two extra lines of pills on a page that has no
   viewport budget to protect. `max-width:100%` with `white-space:normal` is what keeps the longest
   label inside the screen at 320px rather than pushing the page sideways: a pill sizes to its content
   and only wraps its text when that content cannot fit a whole line.

   The separator earns its keep now that there are lines to separate. It was hidden here because a
   1px rule is meaningless in a horizontal strip; as a zero-height, full-width flex item it forces a
   line break, so Log Out always begins a row of its own. That is the whole of its prominence - it
   stays faint, outlined and last, so it is found when looked for and not pressed by accident. */
@container (max-width:900px){
  .acc-nav{display:flex;flex-wrap:wrap;gap:8px;overflow-x:visible;padding-bottom:0}
  .acc-nav .sep{display:block;flex-basis:100%;height:0;background:none;margin:2px 0}
  .acc-nav li{flex:none;max-width:100%}
  .acc-nav button{white-space:normal;border:1.5px solid var(--border);border-radius:999px;padding:9px 15px;font-size:13.5px;min-height:38px}
  .acc-nav button.on{border-color:var(--orange)}
}

/* ── panels ── */
.acc-head{margin-bottom:22px}
.acc-h1{font-size:29px;font-weight:900;letter-spacing:-.025em;line-height:1.1;margin:0}
.acc-lede{font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin:7px 0 0;max-width:60ch}
.acc-stack{display:grid;gap:34px}
.acc-stack>section+section,.acc-stack>section{padding-top:0}
.acc-stack>section:not(:first-child){border-top:1px solid var(--border-soft);padding-top:30px}
.acc-sub{margin-bottom:14px}
.acc-sub h2{font-size:19px;font-weight:900;letter-spacing:-.02em;margin:0}
.acc-sub p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:5px 0 0;max-width:60ch}
.acc-sec{margin-top:30px}
.acc-sec:first-child{margin-top:0}
.acc-sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:13px}
.acc-sec-h h3{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);margin:0}
.acc-sec-h .after{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-faint)}

.acc-card{background:var(--paper);border:var(--border-card) solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 22px}
.acc-card.tight{padding:16px 18px}
.acc-rows{display:grid;gap:12px}
.acc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@container (max-width:680px){.acc-grid2{grid-template-columns:1fr}}

/* ── buttons (same family as .sup-btn) ── */
.acc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:11px 20px;font-weight:800;font-size:14px;cursor:pointer;min-height:44px;font-family:inherit;text-decoration:none;transition:transform .1s,background .12s,border-color .12s;white-space:nowrap}
.acc-btn.accent{background:var(--orange);color:#fff;box-shadow:0 8px 20px -8px rgba(196,106,38,.5)}
.acc-btn.accent:hover{background:var(--orange-dark);color:#fff;transform:translateY(-1px)}
.acc-btn.dark{background:var(--ink);color:#fff}
.acc-btn.dark:hover{background:#221f1c;color:#fff;transform:translateY(-1px)}
.acc-btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--border)}
.acc-btn.ghost:hover{border-color:var(--ink-faint);color:var(--ink)}
.acc-btn.sm{min-height:38px;padding:8px 15px;font-size:13.5px}
.acc-btn:disabled{opacity:.5;cursor:not-allowed}
.acc-link{background:none;border:none;padding:0;font-family:inherit;font-weight:800;font-size:13.5px;color:var(--orange-dark);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* 2026-09-16: .acc-link is a single class (0,1,0), so the theme kit's ".elementor-kit-8929 button"
   (post-8929.css, 0,1,1) beats it on background-color/color/border-radius while its own
   text-decoration:underline survives untouched — the "orange pill with an underlined 'Receipt'"
   report on the booking card. .acc-btn's variants already escape this because they chain two
   classes (e.g. .acc-btn.accent = 0,2,0), so only the plain link style needed a guard. Scoped to
   .acc, the class on the whole mounted app's root, same defensive pattern as se-sup-guards-v1.css. */
.acc .acc-link{background:none!important;border:none!important;padding:0!important;color:var(--orange-dark)!important;text-decoration:underline!important;border-radius:0!important}
.acc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ── pills ── */
.acc-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:var(--cream-deep);color:var(--ink-soft);white-space:nowrap}
.acc-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.acc-pill.ok{background:var(--ok-tint);color:var(--ok)}
.acc-pill.low{background:var(--low-tint);color:var(--low)}
.acc-pill.due{background:var(--full-tint);color:var(--full)}
.acc-pill.accent{background:var(--orange-tint);color:var(--orange-dark)}
.acc-pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

/* ── notices ── */
.acc-notice{display:flex;gap:13px;align-items:flex-start;border-radius:16px;padding:15px 18px;font-size:14px;line-height:1.55}
.acc-notice .ico{flex:none;width:34px;height:34px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center}
.acc-notice .nt{font-weight:900;font-size:14.5px;margin-bottom:2px}
.acc-notice .bd{opacity:.92}
.acc-notice.due{background:var(--full-tint);color:var(--full)}
.acc-notice.info{background:var(--cream);color:var(--ink-soft);border:1px solid var(--border-soft)}
.acc-notice.ok{background:var(--ok-tint);color:var(--ok)}
.acc-notice .go{margin-left:auto;align-self:center}
@container (max-width:600px){.acc-notice .go{margin-left:0;width:100%}}

/* ── continue / hero card ── */
.acc-continue{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--paper);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card)}
@container (max-width:600px){.acc-continue{grid-template-columns:1fr}}
.acc-continue .body{padding:20px 22px}
.acc-continue .t{font-size:19px;font-weight:900;letter-spacing:-.015em;line-height:1.2;margin:6px 0 4px}
.acc-continue .sub{font-size:13.5px;color:var(--ink-soft);font-weight:600}

/* Course/event still. The diagonal hatch stays as the background, exactly as the library keeps it
   behind .lb-thumb, so a slow or missing image still looks deliberate rather than broken. What has
   gone is the mock LABEL the handoff drew inside it: with no image it printed the literal words
   "course image (LearnDash featured image)" on the page. */
.acc-img{background:var(--cream-deep);background-image:repeating-linear-gradient(135deg,#fff 0 8px,transparent 8px 16px);display:flex;align-items:center;justify-content:center;min-height:118px;position:relative;overflow:hidden}
.acc-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* 16/10, which is the library's .lb-card .lb-thumb ratio. A fixed ratio rather than a min-height is
   what stops a row of cards from showing four different crop heights. */
.acc-img.ratio{aspect-ratio:16/10;min-height:0}
/* The format flag over the still, borrowed from the events listing card's .afmt so a booking reads
   the same way there as it does on What's On. */
.acc-fmt{position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;background:rgba(38,35,32,.82);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 10px;border-radius:999px}

/* The eyebrow. Two deliberate variants, because the site has two: the library's card eyebrow is
   ink-faint (.lb-card .kind) and the events listing's is orange with a dot (.acard .tlabel). A course
   card in My Account wears the library's, a booking wears the events one, so each points home. */
.acc-eyebrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:5px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.acc-eyebrow.warm{color:var(--orange-dark)}
.acc-eyebrow .cdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* The small dot between two facts, as `.lb-card .who` does it: "COURSE · 5 SESSIONS" rather than the
   two words sitting next to each other with nothing between them. Only fires where there are two
   spans, so the booking eyebrow (one .cdot plus a bare label) is untouched. */
.acc-eyebrow>span+span::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:7px}

/* ── progress ── */
.acc-prog{margin-top:14px}
.acc-prog .bar{height:8px;border-radius:999px;background:var(--cream-deep);overflow:hidden}
.acc-prog .bar i{display:block;height:100%;border-radius:999px;background:var(--orange);transition:width .4s cubic-bezier(.4,0,.2,1)}
.acc-prog .meta{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:800;color:var(--ink-soft);margin-bottom:6px}
.acc-prog .meta .pc{color:var(--orange-dark)}

/* ── course cards ── */
/* The library's own `.lb-grid.two` expression, not a fixed two-up.
   Matching the card's style was only half of it: once the page widened to the header's 1340 a fixed
   two-up gave 511px cards, and a 15.5px/800 title sized for the library's ~330px card is lost in one
   that wide. auto-fill lands on three columns of ~336px here, which is the same card the library
   draws, and it needs no breakpoint of its own to collapse. */
.acc-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
/* Matched to `#se-library-root .lb-card`: no resting shadow, the shadow arrives on hover along with a
   2px lift and an ink-faint border. The old card carried a resting shadow and lifted 3px into a much
   heavier one, which is the difference you could feel without being able to name it. */
.acc-course{background:var(--paper);border:var(--border-card) solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s,border-color .12s}
.acc-course:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--ink-faint)}
.acc-course .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
/* 15.5px/800 in ink, which is the library's `.lb-card .t`. It was 17px/900 and, thanks to the theme's
   bare h3 rule, orange. */
.acc-course .t{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:0}
.acc-course .lastlesson{font-size:13px;color:var(--ink-soft);line-height:1.45}
.acc-course .spacer{flex:1;min-height:4px}
.acc-course .acc-prog{margin-top:0}
.acc-course .acc-btn{width:100%;margin-top:10px}
/* The row under the shortlist that hands the rest of the list to the library. */
.acc-seeall{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.acc-seeall .note{font-size:13px;color:var(--ink-faint);font-weight:600}

/* ── booking cards ──
   Ported from the events listing card, `.sam-views .lcard`: still on the left, body in the middle,
   a cream meta rail on the right with orange icons and an orange pill at the bottom. Same 20px radius,
   same 1px border, same cream, same resting and hover shadows, same `.tlabel` eyebrow.
   Two deliberate departures, both forced by the frame rather than by taste. The columns are narrower
   (200/1fr/190 against the listing's 300/1fr/236) because My Account gives up 268px to its side nav,
   and the title is 18px rather than 23px for the same reason — weight, tracking and colour are the
   listing's untouched. And the rail's button toggles the details open in place instead of navigating,
   because that is what this card has always done and it is the useful thing here. */
.acc-book{display:grid;grid-template-columns:200px 1fr 190px;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 1px 2px rgba(51,49,46,.04);transition:transform .14s,box-shadow .14s}
.acc-book:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
/* A past booking is a record, not an offer: it keeps the shape and gives up the lift and the colour. */
.acc-book.past{box-shadow:none;border-color:var(--border-soft);background:var(--cream-deep)}
.acc-book.past:hover{transform:none;box-shadow:none}
.acc-book.past .acc-bk-img{filter:saturate(.55) opacity(.8)}
.acc-book .acc-bk-img{position:relative;min-height:170px}
.acc-book .acc-bk-body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.acc-book .t{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0}
/* The theme underlines links, and the listing card's title is not underlined; it simply warms on
   hover, which is `.lcard:hover .lc-body h3`. Same here. */
.acc-book .t a{color:inherit;text-decoration:none}
.acc-book:hover .t a{color:var(--orange-dark)}
.acc-book.past:hover .t a{color:inherit}
.acc-book .when{font-size:13.5px;color:var(--ink-soft);font-weight:600;line-height:1.5}
.acc-book .acc-bk-rail{background:var(--cream);border-left:1px solid var(--border-soft);padding:20px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.acc-book.past .acc-bk-rail{background:transparent}
.acc-book .rmeta{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-soft);font-weight:600}
.acc-book .rmeta svg{color:var(--orange);flex:none;margin-top:1px}
.acc-book .rmeta b{display:block;color:var(--ink);font-weight:800;font-size:13.5px}
.acc-book .rdiv{height:1px;background:var(--border)}
.acc-book .acc-bk-rail .acc-btn{width:100%}
/* Below the rail's own width the card becomes still-over-content and the rail drops under the body,
   which is what the listing card does at the same point. */
@container (max-width:760px){
  .acc-book{grid-template-columns:150px 1fr}
  .acc-book .acc-bk-rail{grid-column:1/-1;border-left:none;border-top:1px solid var(--border-soft);flex-direction:row;flex-wrap:wrap;gap:14px 20px;align-items:center}
  .acc-book .acc-bk-rail .acc-btn{width:auto;margin-left:auto}
}
@container (max-width:520px){
  .acc-book{grid-template-columns:1fr}
  .acc-book .acc-bk-img{min-height:0;aspect-ratio:16/9}
  .acc-book .acc-bk-rail .acc-btn{width:100%;margin-left:0}
}

/* retreat balance strip
   The card's padding now lives on its three columns rather than on the card, so anything spanning
   1/-1 has to bring its own gutter or it sits flush against the border. */
.acc-book>.acc-balance,.acc-book>.acc-detail,.acc-book>.acc-bk-note{margin-left:22px;margin-right:22px}
.acc-book>.acc-balance{margin-bottom:20px}
.acc-book>.acc-detail{margin-bottom:22px}
.acc-bk-note{grid-column:1/-1;font-size:12.5px;color:var(--ink-faint);margin-top:8px;margin-bottom:18px;line-height:1.5}
.acc-balance{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--border-soft);border-radius:14px;padding:13px 16px;margin-top:14px}
.acc-balance.warn{background:var(--full-tint);border-color:color-mix(in oklab,var(--full) 30%,transparent)}
@container (max-width:680px){.acc-balance{grid-template-columns:1fr 1fr}.acc-balance .acc-btn{grid-column:1/-1;width:100%}}
.acc-kv .k{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint)}
.acc-kv .v{font-size:15.5px;font-weight:900;margin-top:4px}
.acc-kv .v.due{color:var(--full)}
.acc-kv .v small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.acc-balance.warn .acc-kv .k{color:color-mix(in oklab,var(--full) 72%,#fff)}

/* ── data tables (orders, donations) ── */
.acc-table{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--paper)}
.acc-tr{display:grid;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-soft);font-size:14px}
.acc-tr:last-child{border-bottom:none}
.acc-tr.head{background:var(--cream);font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);padding:11px 18px}
.acc-tr .strong{font-weight:800}
.acc-tr .muted{color:var(--ink-soft)}
.acc-t-don{grid-template-columns:1.1fr 1.5fr .8fr auto auto}
.acc-t-pay{grid-template-columns:1.1fr 1.7fr .7fr auto}
.acc-t-dl{grid-template-columns:1fr auto}
@container (max-width:600px){
  .acc-tr{grid-template-columns:1fr auto!important;row-gap:5px}
  .acc-tr.head{display:none}
  .acc-tr>*:nth-child(2){grid-column:1}
  .acc-tr>.acc-pill{justify-self:start}
  .acc-tr>.acc-link{justify-self:end}
}

/* expanded booking details */
.acc-book.open{border-color:var(--orange)}
.acc-detail{grid-column:1/-1;margin-top:16px;padding-top:18px;border-top:1px dashed var(--border)}
.acc-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@container (max-width:680px){.acc-detail-grid{grid-template-columns:1fr;gap:18px}}
.acc-detail h4{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin:0 0 10px}
.acc-detail-pay{margin-top:20px}
.acc-dl{display:grid;gap:8px;font-size:14px}
.acc-dl>div{display:flex;justify-content:space-between;gap:14px;color:var(--ink-soft)}
.acc-dl>div b{color:var(--ink);font-weight:800;text-align:right}
.acc-dl>div.tot{border-top:1px solid var(--border-soft);padding-top:9px;margin-top:2px;font-weight:900;color:var(--ink)}
.acc-att{display:grid;gap:12px}
.acc-att-row{background:var(--cream);border:1px solid var(--border-soft);border-radius:13px;padding:12px 14px}
.acc-att-row .nm{font-size:14.5px;font-weight:900;letter-spacing:-.01em}
.acc-att-row .mt{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:3px}
.acc-att-row .mt b{color:var(--ink);font-weight:800}

/* order card */
.acc-order{background:var(--paper);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-card);overflow:hidden}
.acc-order .oh{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:15px 20px;background:var(--cream);border-bottom:1px solid var(--border-soft)}
.acc-order .oh .no{font-size:15px;font-weight:900}
.acc-order .oh .dt{font-size:13px;color:var(--ink-soft);font-weight:600}
.acc-order .oh .sp{margin-left:auto}
.acc-order .ob{padding:14px 20px 18px}
.acc-order .item{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:6px 0;color:var(--ink-soft)}
.acc-order .item b{font-weight:700;color:var(--ink)}
.acc-order .tot{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--border-soft);margin-top:8px;padding-top:11px;font-size:14.5px;font-weight:900}
.acc-order .track{font-size:12.5px;color:var(--ink-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:10px}

/* ── forms ── */
.acc-field{margin-bottom:15px}
.acc-field label{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
.acc-field input,.acc-field select{width:100%;border:1.5px solid var(--border);border-radius:13px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);background:var(--paper)}
.acc-field input:focus,.acc-field select:focus{border-color:var(--orange);outline:none}
.acc-field .hint{font-size:12.5px;color:var(--ink-faint);margin-top:6px;line-height:1.5}
.acc-addr{font-size:14.5px;line-height:1.62;color:var(--ink-soft)}
.acc-addr b{color:var(--ink);font-weight:800}

/* saved card row */
.acc-pm{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.acc-brand{flex:none;width:52px;height:34px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;letter-spacing:.02em}
.acc-pm .num{font-size:15.5px;font-weight:900;letter-spacing:.02em}
.acc-pm .exp{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-top:2px}
.acc-pm .sp{margin-left:auto;display:flex;gap:8px}

/* ── expandable panel (Gift Aid declaration) ── */
.acc-panel{border:1.5px solid var(--orange);background:var(--orange-tint);border-radius:20px;padding:20px 22px;margin-top:14px}
.acc-panel h3{font-size:16.5px;font-weight:900;letter-spacing:-.015em;margin:0 0 6px}
.acc-panel p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px}
.acc-panel .acc-field input{background:#fff}
.acc-check{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--border);border-radius:16px;padding:15px 17px;cursor:pointer;background:var(--paper)}
.acc-check.on{border-color:var(--orange)}
.acc-check input{margin-top:2px;width:19px;height:19px;accent-color:var(--orange);flex:none}
.acc-check .t{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.acc-cancel-line{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in oklab,var(--orange) 25%,transparent)}
.acc-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 12px 30px -8px rgba(51,49,46,.5);z-index:400;display:flex;gap:9px;align-items:center}

/* ── empty states ── */
.acc-empty{border:1.5px dashed var(--border);border-radius:18px;background:var(--cream);padding:30px 26px;text-align:center}
.acc-empty .ico{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--border-soft);color:var(--ink-faint);display:flex;align-items:center;justify-content:center;margin:0 auto 13px}
.acc-empty p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.6}
.acc-empty .acc-btn{margin-top:16px}

/* ── embed slot for the existing supporter-membership module ── */
.acc-slot{border:1.5px dashed var(--orange);border-radius:22px;padding:12px;background:linear-gradient(180deg,var(--orange-tint) 0,#fffdf9 120px)}
.acc-slot-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--orange-dark);text-align:center;padding:4px 8px 12px;line-height:1.5}
/* Samadhi Supporters — module styles. Self-contained: all colours resolve from
   vars scoped to .sup, so it drops into the live supporter page's palette.
   Mirrors the events booking module (booking-inline.css). */
.sup{
  --orange:#c46a26; --orange-dark:#a2551d; --orange-tint:#fbeee0;
  --cream:#faf8f4; --cream-deep:#f0eee9; --border:#e3e0d8; --border-soft:#eeece6;
  --ink:#33312e; --ink-soft:#615c53; --ink-faint:#948d80; --paper:#ffffff;
  --ok:oklch(0.55 0.12 150); --ok-tint:oklch(0.95 0.03 150);
  --low:oklch(0.62 0.14 70); --low-tint:oklch(0.96 0.04 70);
  --full:oklch(0.5 0.1 25); --full-tint:oklch(0.95 0.03 25);
  --radius:22px;
  --shadow-card:0 1px 2px rgba(51,49,46,.04),0 8px 24px -12px rgba(51,49,46,.12);
  color:var(--ink);font-family:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;text-align:left;container-type:inline-size;
}
.sup *{box-sizing:border-box;}

/* ── interval toggle ── */
.sup-toggle-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px;}
.sup-seg{display:inline-flex;background:var(--cream);border:1.5px solid var(--border);border-radius:999px;padding:5px;gap:3px;position:relative;}
.sup-seg button{border:none;background:transparent;padding:11px 26px;border-radius:999px;font-weight:800;font-size:15px;cursor:pointer;color:var(--ink-soft);transition:color .15s;font-family:inherit;position:relative;z-index:1;display:flex;align-items:center;gap:8px;}
.sup-seg button.on{color:#fff;}
.sup-seg .thumb{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--ink);box-shadow:0 3px 10px rgba(51,49,46,.25);transition:left .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1);z-index:0;}
.sup-save{font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--ok);background:var(--ok-tint);padding:3px 9px;border-radius:999px;}
.sup-toggle-note{font-size:13px;color:var(--ink-faint);text-align:center;}

/* ── tier grid ── */
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
@container (max-width:760px){
  .sup-grid{grid-template-columns:1fr;gap:12px;}
  .sup-card{padding:18px 18px 18px;}
  .sup-card:hover{transform:none;}
  .sup-amt{margin-top:8px;}
  .sup-amt .num{font-size:32px;}
  .sup-amt-sub{margin-top:3px;min-height:0;}
  .sup-gift{margin-top:11px;padding:10px 12px;font-size:12.5px;}
  .sup-spacer{display:none;}
  .sup-more{margin-top:12px;padding-top:12px;}
  .sup-more .hint{margin-bottom:9px;}
  .sup-btn{margin-top:14px;min-height:46px;}
  .sup-flag{top:-11px;}
}

.sup-card{position:relative;background:var(--paper);border:2px solid var(--border);border-radius:var(--radius);padding:26px 24px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform .14s,box-shadow .14s,border-color .14s;}
.sup-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px -12px rgba(51,49,46,.28);}
.sup-card.popular{border-color:var(--orange);}
.sup-card.selected{border-color:var(--orange);background:linear-gradient(180deg,var(--orange-tint) 0%,var(--paper) 46%);box-shadow:0 14px 36px -14px rgba(196,106,38,.5);}
.sup-card.anchor{background:linear-gradient(180deg,#faf6f0 0%,var(--paper) 40%);}

.sup-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:6px 15px;border-radius:999px;box-shadow:0 6px 16px -4px rgba(196,106,38,.6);white-space:nowrap;}

.sup-tier-name{font-size:18px;font-weight:900;letter-spacing:-.01em;}
.sup-amt{display:flex;align-items:baseline;gap:4px;margin-top:12px;}
.sup-amt .num{font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1;}
.sup-amt .per{font-size:15px;font-weight:700;color:var(--ink-soft);}
.sup-amt-sub{font-size:13px;color:var(--ink-faint);font-weight:600;margin-top:6px;min-height:18px;}

.sup-gift{margin-top:16px;background:var(--cream);border:1px solid var(--border-soft);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.sup-gift b{color:var(--orange-dark);font-weight:900;white-space:nowrap;}
.sup-card.selected .sup-gift{background:#fff;}

.sup-spacer{flex:1;min-height:14px;}

/* ── bodhi give-more ── */
.sup-more{margin-top:16px;border-top:1px dashed var(--border);padding-top:16px;}
.sup-more .hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px;}
.sup-more-field{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;background:#fff;transition:border-color .12s;}
.sup-more-field:focus-within{border-color:var(--orange);}
.sup-more-field span{font-weight:900;font-size:22px;color:var(--ink);}
.sup-more-field input{border:none;font-size:22px;font-weight:900;width:100%;background:transparent;color:var(--ink);font-family:inherit;-moz-appearance:textfield;}
.sup-more-field input::-webkit-outer-spin-button,.sup-more-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.sup-more-field input:focus{outline:none;}
.sup-more-field .per{font-size:14px;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.sup-slider{width:100%;margin-top:14px;accent-color:var(--orange);}
.sup-ct-slider{display:block;width:100%;margin-top:10px;}
.sup-ct-slider .sup-slider{margin-top:0;}
.sup-ct-slider .amt{display:block;font-size:12.5px;font-weight:800;color:var(--orange-dark);margin-top:4px;}
.sup-slider-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-faint);font-weight:700;margin-top:2px;}

.sup-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:14px 22px;font-weight:800;font-size:15px;cursor:pointer;min-height:50px;width:100%;margin-top:20px;transition:transform .1s,box-shadow .12s,background .12s;font-family:inherit;text-decoration:none;}
.sup-btn.accent{background:var(--orange);color:#fff;box-shadow:0 8px 20px -6px rgba(196,106,38,.5);}
.sup-btn.accent:hover{background:var(--orange-dark);transform:translateY(-1px);}
.sup-btn.dark{background:var(--ink);color:#fff;}
.sup-btn.dark:hover{background:#221f1c;transform:translateY(-1px);}
.sup-btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--border);}
.sup-btn.ghost:hover{border-color:var(--ink-faint);}
.sup-btn.text{background:none;color:var(--orange-dark);min-height:0;width:auto;margin:0;padding:6px 2px;text-decoration:underline;font-weight:700;}
.sup-btn:disabled{opacity:.5;cursor:not-allowed;}
.sup-btn.sm{min-height:42px;padding:10px 18px;font-size:14px;width:auto;margin-top:0;}

.sup-reassure{text-align:center;font-size:14px;color:var(--ink-soft);margin-top:22px;display:flex;align-items:center;justify-content:center;gap:8px;}
.sup-reassure svg{color:var(--ok);flex:none;}

/* ── inline subscribe flow (Screen B) ── shares .sup vars ── */
.sup-flow{background:var(--paper);border:1.5px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(51,49,46,.04),0 24px 60px -28px rgba(51,49,46,.35);scroll-margin-top:90px;margin-top:8px;}
.sup-flow-head{padding:22px 26px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 72%);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.sup-flow-head .t{font-size:20px;font-weight:900;letter-spacing:-.015em;}
.sup-flow-head .s{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:3px;}
.sup-flow-body{padding:26px;}
@container (max-width:560px){.sup-flow-body{padding:20px;}}

.sup-h1{font-size:23px;font-weight:900;letter-spacing:-.015em;margin:0 0 6px;line-height:1.15;}
.sup-lead{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:18px;}

/* stepper (same shape as booking) */
.sup-stepper{display:flex;align-items:flex-start;margin-bottom:26px;}
.sup-step{flex:1;text-align:center;position:relative;}
.sup-step .dot{width:32px;height:32px;border-radius:50%;background:var(--border);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;position:relative;z-index:2;}
.sup-step.done .dot,.sup-step.active .dot{background:var(--orange);color:#fff;box-shadow:0 3px 10px rgba(196,106,38,.35);}
.sup-step .lbl{display:block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--ink-faint);}
.sup-step.active .lbl{color:var(--orange-dark);}
.sup-step.done .lbl{color:var(--ink-soft);}
.sup-step::before{content:'';position:absolute;top:16px;left:-50%;width:100%;height:3px;background:var(--border);z-index:1;border-radius:3px;}
.sup-step:first-child::before{display:none;}
.sup-step.done::before{background:var(--orange);}

/* gift summary block */
.sup-gift-summary{background:var(--cream-deep);border:1px solid var(--border-soft);border-radius:18px;padding:20px 22px;}
.sup-gift-summary .row{display:flex;justify-content:space-between;gap:14px;font-size:15px;color:var(--ink-soft);padding:6px 0;}
.sup-gift-summary .row .k{font-weight:700;color:var(--ink);}
.sup-gift-summary .row.big{align-items:baseline;}
.sup-gift-summary .row.big .amt{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.02em;}
.sup-gift-summary .row.big .amt small{font-size:14px;font-weight:700;color:var(--ink-soft);}
.sup-gift-summary .ga{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-size:14px;color:var(--ink-soft);}
.sup-gift-summary .ga b{color:var(--orange-dark);}

.sup-alert{background:var(--cream);border:1.5px solid var(--border);border-radius:18px;padding:16px 20px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.sup-alert b{color:var(--ink);}

/* fields */
.sup-field{margin-bottom:16px;}
.sup-field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px;}
.sup-field .req{color:var(--orange-dark);}
.sup-field input{width:100%;border:1.5px solid var(--border);border-radius:14px;padding:13px 15px;font-size:15.5px;font-family:inherit;color:var(--ink);background:var(--paper);transition:border-color .12s;}
.sup-field input:focus{border-color:var(--orange);outline:none;}
.sup-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@container (max-width:560px){.sup-grid2{grid-template-columns:1fr;}}

.sup-block{background:var(--cream-deep);border-radius:18px;padding:20px 22px;margin:16px 0;}
.sup-block h3{font-size:15px;margin:0 0 8px;font-weight:900;}
.sup-block p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}
.sup-check{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--border);border-radius:16px;padding:16px 18px;margin-top:14px;cursor:pointer;background:var(--paper);}
.sup-check.on{border-color:var(--orange);background:var(--orange-tint);}
.sup-check input{margin-top:3px;width:19px;height:19px;accent-color:var(--orange);flex:none;}
.sup-check .t{font-size:13px;line-height:1.55;color:var(--ink-soft);}
.sup-check .t b{color:var(--ink);}

/* stripe mount region (mock) */
.sup-pay-express{display:flex;gap:10px;margin-bottom:14px;}
.sup-pay-express button{flex:1;border:none;border-radius:12px;padding:14px;font-weight:800;font-size:15px;background:#000;color:#fff;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;}
.sup-pay-divider{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:14px 0;}
.sup-pay-divider::before,.sup-pay-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.sup-card-panel{border:1.5px solid var(--border);border-radius:16px;padding:18px;background:var(--cream);}
.sup-card-panel .stripe-note{font-size:11px;color:var(--ink-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em;text-align:center;padding:6px 0 12px;}
.sup-card-panel .crow{display:flex;gap:10px;margin-bottom:10px;}
.sup-card-panel input{flex:1;border:1.5px solid var(--border);border-radius:12px;padding:12px 13px;font-size:15px;background:#fff;font-family:inherit;color:var(--ink);}
.sup-card-panel input:focus{outline:none;border-color:var(--orange);}
.sup-skel{height:52px;border-radius:12px;background:linear-gradient(100deg,var(--cream-deep) 30%,#fff 50%,var(--cream-deep) 70%);background-size:200% 100%;animation:supShimmer 1.3s infinite;margin-bottom:10px;}
@keyframes supShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sup-pay-error{background:var(--full-tint);border:1.5px solid var(--full);border-radius:16px;padding:16px 18px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;}
.sup-pay-error .ico{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--full);display:flex;align-items:center;justify-content:center;}
.sup-pay-error .nt{font-weight:800;color:var(--full);font-size:14.5px;margin-bottom:2px;}
.sup-pay-error .bd{font-size:13.5px;color:var(--full);line-height:1.5;opacity:.9;}

.sup-actions{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px;}
.sup-privacy{font-size:12.5px;color:var(--ink-faint);line-height:1.55;margin:16px 0;}

/* confirmation */
.sup-conf-icon{width:72px;height:72px;border-radius:50%;background:var(--ok-tint);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:18px;}
.sup-conf-h{font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px;}
.sup-conf-thanks{font-size:17px;color:var(--orange-dark);font-weight:800;margin-bottom:14px;}
.sup-conf-body{font-size:15.5px;color:var(--ink-soft);line-height:1.62;margin-bottom:18px;}
.sup-next{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px;}
.sup-next li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.sup-next li::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-tint);margin-top:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23347a4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center;}

/* ── Screen C: membership ── */
.sup-mem{background:var(--paper);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card);}
.sup-mem-head{padding:24px 26px;background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 74%);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.sup-mem-head .tier{font-size:22px;font-weight:900;letter-spacing:-.015em;}
.sup-mem-head .amt{font-size:15px;color:var(--ink-soft);font-weight:700;margin-top:4px;}
.sup-mem-head .amt b{color:var(--ink);font-size:18px;}
.sup-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;padding:7px 14px;border-radius:999px;letter-spacing:.01em;}
.sup-status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.sup-status.active{background:var(--ok-tint);color:var(--ok);}
.sup-status.paused{background:var(--low-tint);color:var(--low);}
.sup-status.past_due{background:var(--full-tint);color:var(--full);}

.sup-mem-body{padding:24px 26px;}
@container (max-width:560px){.sup-mem-head,.sup-mem-body{padding:20px;}}

.sup-notice{border-radius:16px;padding:16px 18px;margin-bottom:22px;display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.55;}
.sup-notice .ico{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#fff;}
.sup-notice .nt{font-weight:800;font-size:15px;margin-bottom:2px;}
.sup-notice.paused{background:var(--low-tint);color:var(--low);}
.sup-notice.past_due{background:var(--full-tint);color:var(--full);}
.sup-notice .resume{margin-top:10px;}

.sup-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
@container (max-width:560px){.sup-facts{grid-template-columns:1fr 1fr;}}
.sup-fact{background:var(--cream);border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px;}
.sup-fact .k{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);}
.sup-fact .v{font-size:15.5px;font-weight:800;margin-top:5px;}
.sup-fact .v.on{color:var(--ok);}
.sup-fact .v.off{color:var(--ink-faint);}

.sup-mem-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.sup-mem-actions .sup-btn{width:auto;margin-top:0;flex:1;min-width:150px;}
@container (max-width:560px){.sup-mem-actions .sup-btn{flex:1 1 100%;}}

.sup-cancel-line{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft);}
.sup-cancel-line b{color:var(--ink);}
.sup-cancel-line a{font-weight:800;}

/* expandable panels inside membership */
.sup-panel{border:1.5px solid var(--orange);background:var(--orange-tint);border-radius:18px;padding:20px 22px;margin-top:16px;}
.sup-panel h3{font-size:16px;font-weight:900;margin:0 0 6px;}
.sup-panel p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px;}
.sup-pause-opts{display:flex;gap:10px;flex-wrap:wrap;}
.sup-pause-opts button{flex:1;min-width:120px;border:2px solid var(--border);background:#fff;border-radius:14px;padding:16px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .12s,transform .1s;}
.sup-pause-opts button:hover{border-color:var(--orange);transform:translateY(-1px);}
.sup-pause-pick{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:16px 18px;}
.sup-pause-val{display:flex;flex-direction:column;gap:2px;margin-bottom:4px;}
.sup-pause-val .n{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--ink);}
.sup-pause-val .sub{font-size:13px;font-weight:700;color:var(--orange-dark);}
.sup-pause-pick .sup-slider{margin-top:14px;}

/* payment history */
.sup-history{margin-top:26px;}
.sup-history h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:12px;}
.sup-htable{border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.sup-hrow{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-soft);font-size:14px;}
.sup-hrow:last-child{border-bottom:none;}
.sup-hrow.head{background:var(--cream);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);padding:11px 18px;}
.sup-hrow .hdate{font-weight:700;color:var(--ink);}
.sup-hrow .hamt{font-weight:800;}
.sup-hrow .hga{font-size:12px;font-weight:800;}
.sup-hrow .hga.on{color:var(--ok);}
.sup-hrow .hga.off{color:var(--ink-faint);}
.sup-hrow .hrec a{font-weight:800;font-size:13.5px;color:var(--orange-dark);text-decoration:none;white-space:nowrap;}
.sup-hrow .hrec a:hover{text-decoration:underline;}
@container (max-width:560px){.sup-hrow{grid-template-columns:1fr auto;row-gap:4px;}.sup-hrow .hga{grid-column:1;}.sup-hrow .hrec{grid-column:2;grid-row:1/3;align-self:center;}.sup-hrow.head{display:none;}}

.sup-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 12px 30px -8px rgba(51,49,46,.5);z-index:400;display:flex;gap:9px;align-items:center;}

/* ── receipt modal ── */
.sup-modal-scrim{position:fixed;inset:0;z-index:500;background:rgba(35,31,28,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
.sup-modal{background:#fff;border-radius:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);}
/* 44px, and padding:0 explicitly: hello-elementor's reset.css puts a bare `button` rule on
   the page (padding:.5rem 1rem;border:1px solid #c36) that is LESS specific than this class and
   loses on every property we set -- except the ones we don't set. We never set padding, so its
   .5rem 1rem survived inside a box already fixed at width/height, squeezing the 18px x icon down
   to a sliver -- the "tiny dot" on mobile. Same fix pattern as .se-head-toggle in se-chrome. */
.sup-modal-close{position:absolute;top:10px;right:10px;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);z-index:2;}
/* .sup-modal itself is deliberately unpadded (the receipt supplies its own via .sup-receipt, and print resets it to 0), so the nav-avatar-in-a-modal use (commit cb2df75, 2026-08-23) needs its own padded wrapper -- without it, the heading and hint text rendered flush against the modal's own rounded corners, which visually cut into the first few characters of each line. 58px top clears the 44px close button (top:10px) plus a gap. */
.sup-modal-pad{padding:58px 30px 26px;}
.sup-modal-close:hover{border-color:var(--ink-faint);color:var(--ink);}
.sup-receipt{padding:34px 36px 20px;}
.rc-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:2px solid var(--ink);}
.rc-logo{height:38px;width:auto;}
.rc-org-name{font-weight:900;font-size:17px;letter-spacing:-.01em;}
.rc-org-meta{font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin-top:3px;}
.rc-title{font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.16em;color:var(--orange-dark);margin:22px 0 18px;}
.rc-meta-row{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px;}
.rc-meta-row .k,.rc-to .k{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:3px;}
.rc-meta-row .v{font-size:14px;font-weight:800;}
.rc-to{margin-bottom:22px;}
.rc-donor{font-size:15.5px;font-weight:800;margin-top:2px;}
.rc-donor-addr{font-size:13px;color:var(--ink-soft);margin-top:2px;}
.rc-table{border-top:1px solid var(--border);}
.rc-trow{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:14px;color:var(--ink-soft);}
.rc-trow span:last-child{font-weight:700;white-space:nowrap;color:var(--ink);}
.rc-thead{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);padding-top:10px;}
.rc-thead span:last-child{font-weight:800;color:var(--ink-faint);}
.rc-ga span{color:var(--ok)!important;}
.rc-ga-block{background:var(--cream);border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px;margin-top:18px;}
.rc-ga-head{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-dark);margin-bottom:6px;}
.rc-ga-block p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0;}
.rc-ga-block p b{color:var(--ink);}
.rc-ga-block .rc-tax{font-size:11px;color:var(--ink-faint);margin-top:8px;}
.rc-total{border-bottom:none;border-top:2px solid var(--ink);margin-top:2px;font-size:16px;font-weight:900;color:var(--ink);}
.rc-total span:last-child{font-weight:900;}
.rc-note{font-size:11.5px;color:var(--ink-faint);line-height:1.55;margin-top:14px;}
.rc-thanks{font-size:14px;color:var(--ink);line-height:1.65;margin-top:16px;font-style:italic;}
.rc-foot{font-size:10.5px;color:var(--ink-faint);line-height:1.6;margin-top:18px;padding-top:14px;border-top:1px solid var(--border-soft);text-align:center;}
.sup-receipt-actions{display:flex;gap:10px;justify-content:flex-end;padding:4px 36px 26px;}
.rc-link{background:none;border:none;padding:0;font-family:inherit;font-weight:800;font-size:13.5px;color:var(--orange-dark);cursor:pointer;white-space:nowrap;}
.rc-link:hover{text-decoration:underline;}
@media(max-width:560px){.sup-receipt{padding:24px 20px 16px;}.sup-receipt-actions{padding:4px 20px 20px;}}
@media print{
  body.printing-receipt{background:#fff!important;}
  body.printing-receipt *{visibility:hidden!important;}
  /* The receipt was absolutely positioned inside .sup-modal, which keeps its screen-only
     max-height:90vh/overflow:auto in print too -- so anything below one clipped box vanished,
     leaving a mostly blank page with a cut-off fragment at the bottom. Take the scrim and modal
     out of the way entirely (static, unclipped, unstyled) so the receipt flows in normal
     document layout and paginates like any other printed content. */
  body.printing-receipt .sup-modal-scrim,body.printing-receipt .sup-modal{position:static!important;inset:auto!important;overflow:visible!important;max-height:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;display:block!important;}
  body.printing-receipt #sup-receipt-doc,body.printing-receipt #sup-receipt-doc *{visibility:visible!important;}
  body.printing-receipt #sup-receipt-doc{position:static!important;width:100%!important;padding:0!important;}
  body.printing-receipt .sup-receipt-actions{display:none!important;}
  /* That static/unclipped fix (above) put the scrim+modal back into NORMAL DOCUMENT FLOW, and
     visibility:hidden does NOT remove an element from flow -- it just paints it blank, box and
     all. So the site's own header and footer (both full of nav/social/footer-menu markup) still
     occupied their full rendered height either side of the receipt, in document order. The
     result: a blank page 1 until the header's height ran out and the receipt started partway
     down, then the footer's height ran on into a wholly blank trailing page after the receipt
     finished. Confirmed against the real deployed chrome+account markup in a standalone harness:
     2 pages (blank gap + blank trailing) before this rule, 1 page after it, for both a booking
     and a Gift Aid donation receipt. Collapsing the surrounding chrome with display:none (which
     DOES remove it from flow, unlike visibility) leaves the receipt as the only thing that
     contributes height to the printed document. */
  body.printing-receipt .se-chrome,
  body.printing-receipt .page-header,
  body.printing-receipt .se-anav,
  body.printing-receipt .se-anav-tabbar{display:none!important;}
  body.printing-receipt .proto-bar{display:none!important;}
}

/* Guest inline login (mirrors the booking/donate login; no wp-admin redirect). */
.acc-guest{display:flex;justify-content:center;padding:64px 20px;font-family:Mulish,system-ui,sans-serif}
.acc-login{width:100%;max-width:420px;background:var(--paper,#fff);border:1px solid var(--border,#e3e0d8);border-radius:var(--radius,22px);box-shadow:var(--shadow-card,0 8px 24px -12px rgba(51,49,46,.12));padding:36px 32px}
.acc-login h2{margin:0 0 6px;font-size:24px;font-weight:800;color:var(--ink,#33312e)}
.acc-login .lede{margin:0 0 22px;color:var(--ink-soft,#615c53);font-size:15px;line-height:1.5}
.acc-login label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft,#615c53);margin:0 0 14px}
.acc-login input{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--border,#e3e0d8);border-radius:12px;background:var(--cream,#faf8f4);font-size:15px;font-family:inherit;color:var(--ink,#33312e);box-sizing:border-box}
.acc-login input:focus{outline:none;border-color:var(--orange,#c46a26);box-shadow:0 0 0 3px var(--orange-tint,#fbeee0)}
.acc-login button{width:100%;margin-top:6px;padding:13px 20px;border:0;border-radius:999px;background:var(--orange,#c46a26);color:#fff;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer}
.acc-login button:hover{background:var(--orange-dark,#a2551d)}
.acc-login button:disabled{opacity:.6;cursor:default}
.acc-login-err{background:var(--orange-tint,#fbeee0);color:var(--orange-dark,#a2551d);border-radius:12px;padding:10px 14px;font-size:14px;margin:0 0 16px}
.acc-login-forgot{display:inline-block;margin-top:16px;color:var(--ink-soft,#615c53);font-size:13px;text-decoration:underline}
.acc-login-forgot:hover{color:var(--orange,#c46a26)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CREDIT & VOUCHERS  (the "Credit & vouchers" tab)

   Lifted verbatim from Claude Design's own `_build-src/chrome/design_handoff_vouchers_credit/
   vouchers.css`, which is the handoff for this feature. Only the rules the ACCOUNT screen uses are
   here: the .gv token block, the code face, and the credit card, history, expiry warning and total.
   The buy page (/gift-vouchers) and the checkout field are another session's, and vouchers.css stays
   the source of truth for those - see COORDINATION.md, "who owns which half". If you are changing a
   shared value, change it there and copy, do not diverge.

   Two things worth knowing rather than rediscovering:
   `.gv` re-declares the tokens with the same values `.acc` already uses, which is what Design means by
   "drop-in", so the duplication is deliberate and not drift.
   `.gv` is also its own `container-type: inline-size`, nested inside `.acc`'s. That is intended: the
   560px credit-card breakpoint below measures the card's own column, not the page.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.gv{
  --orange:#c46a26; --orange-dark:#a2551d; --orange-tint:#fbeee0;
  --cream:#faf8f4; --cream-deep:#f0eee9; --border:#e3e0d8; --border-soft:#eeece6;
  --ink:#33312e; --ink-soft:#615c53; --ink-faint:#948d80; --paper:#fff;
  --ok:oklch(0.55 0.12 150); --ok-tint:oklch(0.95 0.03 150);
  --low:oklch(0.62 0.14 70); --low-tint:oklch(0.96 0.04 70);
  --full:oklch(0.5 0.1 25); --full-tint:oklch(0.95 0.03 25);
  color:var(--ink);font-family:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;text-align:left;container-type:inline-size;
}
.gv *{box-sizing:border-box}

/* ── the code itself: read aloud, written down, printed ── */
.gv-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.08em;font-variant-ligatures:none;white-space:nowrap}

/* ── one credit ── */
.gv-credit{border:1px solid var(--border);border-radius:18px;background:var(--paper);box-shadow:0 1px 2px rgba(51,49,46,.04),0 8px 24px -12px rgba(51,49,46,.12);overflow:hidden}
.gv-credit.spent{background:var(--cream);box-shadow:none;border-color:var(--border-soft)}
.gv-credit-top{display:grid;grid-template-columns:1fr auto;gap:16px;padding:20px 22px}
@container (max-width:560px){.gv-credit-top{grid-template-columns:1fr;padding:18px}}
.gv-credit .bal{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1}
.gv-credit.spent .bal{color:var(--ink-faint)}
.gv-credit .of{font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:5px}
.gv-credit .src{font-size:14.5px;color:var(--ink);line-height:1.5;margin-top:12px;max-width:52ch}
.gv-credit .src .who{color:var(--ink-soft)}
.gv-credit .meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:13px;color:var(--ink-soft);align-items:center}
.gv-credit .meta .gv-code{font-size:13.5px;color:var(--ink)}
.gv-credit-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
@container (max-width:560px){.gv-credit-right{align-items:flex-start}}
.gv-credit-foot{border-top:1px solid var(--border-soft);background:var(--cream);padding:10px 22px}
.gv-credit.spent .gv-credit-foot{background:transparent}
.gv-hist-toggle{background:none;border:none;font-family:inherit;font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:7px;-webkit-tap-highlight-color:transparent}
/* David, 2026-08-22: this toggle was left wearing a bright pink background after a tap -
   the same hello-elementor reset.css collision as the checkout's own gv-redeem-toggle
   (see se-credit-field-v3.css): [type=button]:focus / button:focus set
   background-color:#c36, and that ties or beats a single bare class depending on load
   order. Qualifying with the .gv-credit-foot ancestor plus the pseudo-class below
   outranks the theme selector outright, so it no longer depends on which stylesheet the
   page happens to print last. */
.gv-credit-foot .gv-hist-toggle:hover,
.gv-credit-foot .gv-hist-toggle:focus,
.gv-credit-foot .gv-hist-toggle:active{background:none;color:var(--ink)}
.gv-credit-foot .gv-hist-toggle:focus-visible{outline:2px solid var(--orange,#c46a26);outline-offset:3px;border-radius:4px}
.gv-credit-foot .gv-hist-toggle:focus:not(:focus-visible){outline:none}
.gv-hist{padding:4px 0 14px}
.gv-hist-row{display:grid;grid-template-columns:96px 1fr auto;gap:14px;padding:10px 0;border-top:1px solid var(--border-soft);font-size:13.5px;align-items:baseline}
@container (max-width:560px){.gv-hist-row{grid-template-columns:1fr auto}.gv-hist-row .dt{grid-column:1/-1}}
.gv-hist-row .dt{color:var(--ink-faint);font-weight:700;font-size:12.5px}
.gv-hist-row .what{color:var(--ink-soft);line-height:1.5}
.gv-hist-row .what b{color:var(--ink);font-weight:800;display:block}
.gv-hist-row .what .by{font-size:12px;color:var(--ink-faint);display:block;margin-top:2px}
.gv-hist-row .amt{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.gv-hist-row .amt.minus{color:var(--full)}
.gv-hist-row .amt.plus{color:var(--ok)}
.gv-warn{display:flex;gap:11px;align-items:flex-start;background:var(--low-tint);border:1.5px solid color-mix(in oklab,var(--low) 40%,transparent);border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.55;color:color-mix(in oklab,var(--low) 80%,#000)}
.gv-warn .ico{flex:none;margin-top:1px}
.gv-warn.tight{margin-top:12px}
.gv-total{display:flex;align-items:baseline;gap:10px;background:var(--orange-tint);border-radius:16px;padding:14px 18px;margin-bottom:18px}
.gv-total .v{font-size:24px;font-weight:900;letter-spacing:-.025em;color:var(--orange-dark)}
.gv-total .k{font-size:14px;font-weight:700;color:var(--ink-soft)}