/*
 * NYC 2026 Platform - portal-m3.css: the whole site on a phone
 *
 * On a phone every page, signed in or not, looks like a Pixel app: Google's
 * Material 3 (Expressive), generated from the NYC red, in Google Sans Flex,
 * following the phone's own light or dark theme. On a computer nothing in
 * this file applies: portal/_topbar.php and each public page load it with
 * media="(max-width:820px)", so the website design (adcce-theme.css +
 * portal-theme.css + each page's own styles) is untouched. The status bar
 * colour is set by portal/_topbar.php on signed-in pages and by pwa.js on
 * the rest.
 *
 * How it works, so a new page fits in without extra work:
 *   1. Tokens. The Material colour roles (--m3-*) for light and for dark.
 *   2. Old names. The pages colour themselves with a small shared set of
 *      variables (--red, --text, --soft, --border, --white ...). Those names
 *      are pointed at the Material roles here, so a page written for the
 *      website turns light or dark with the phone without being edited.
 *   3. Parts. App bar, navigation drawer, cards, buttons, text fields, chips.
 *   4. Pages. What is left that only one page has.
 *   5. Public pages. The website before signing in, whose own styles fix
 *      colours with #hex, so its rules carry :root in front to win.
 *
 * A new page joins by adding, at the end of its <head>, the two links the
 * public pages carry (Google Sans Flex and this file, both with
 * media="(max-width:820px)"); signed-in pages get them from _topbar.php.
 *
 * Rules for a new page: colour with the variables, never with a fixed #hex;
 * give surfaces a class the Parts section knows (card, panel, box, tile).
 * A website cannot read the wallpaper colours an Android phone picks, so the
 * palette is the NYC red in both themes; light or dark is the phone's choice.
 *
 * @package   Nyc
 * @author    Sofdas Technologies Ltd
 * @copyright 2026 Sofdas Technologies Ltd
 * @license   Proprietary
 */

/* ===================================================================
   1. Tokens - Material 3 roles, seed colour NYC red #c0232f
   =================================================================== */
html:root{
  color-scheme:light dark;
  --m3-font:'Google Sans Flex','Google Sans',Roboto,system-ui,-apple-system,'Segoe UI',sans-serif;
  --m3-primary:#c0232f; --m3-on-primary:#ffffff;
  --m3-primary-container:#ffdad8; --m3-on-primary-container:#410006;
  --m3-secondary-container:#ffdad8; --m3-on-secondary-container:#410006;
  --m3-tertiary:#755b00; --m3-on-tertiary:#ffffff;
  --m3-tertiary-container:#ffdf93; --m3-on-tertiary-container:#241a00;
  --m3-error:#ba1a1a; --m3-on-error:#ffffff;
  --m3-error-container:#ffdad6; --m3-on-error-container:#410002;
  --m3-ok:#0b7a3b; --m3-ok-container:#c4f0cf; --m3-on-ok-container:#00210c;
  --m3-surface:#fff8f7; --m3-surface-bright:#ffffff; --m3-surface-low:#fff0ef;
  --m3-surface-container:#fceae8; --m3-surface-high:#f6e4e2; --m3-surface-highest:#f1dedc;
  --m3-on-surface:#231918; --m3-on-surface-variant:#534341;
  --m3-outline:#857371; --m3-outline-variant:#d8c2bf;
  --m3-inverse-surface:#382e2d; --m3-inverse-on-surface:#ffedeb;
  --m3-scrim:rgba(0,0,0,.32);
  --m3-bar:64px;                       /* height of the top app bar and of the navigation bar */
}
@media (prefers-color-scheme:dark){
  html:root{
    --m3-primary:#ffb3b0; --m3-on-primary:#680012;
    --m3-primary-container:#8f1220; --m3-on-primary-container:#ffdad8;
    --m3-secondary-container:#5d3f3d; --m3-on-secondary-container:#ffdad8;
    --m3-tertiary:#e9c349; --m3-on-tertiary:#3d2f00;
    --m3-tertiary-container:#584400; --m3-on-tertiary-container:#ffdf93;
    --m3-error:#ffb4ab; --m3-on-error:#690005;
    --m3-error-container:#93000a; --m3-on-error-container:#ffdad6;
    --m3-ok:#7ddc9a; --m3-ok-container:#00522a; --m3-on-ok-container:#9af6b4;
    --m3-surface:#1a1110; --m3-surface-bright:#423736; --m3-surface-low:#231918;
    --m3-surface-container:#271d1c; --m3-surface-high:#322827; --m3-surface-highest:#3d3231;
    --m3-on-surface:#f1dedc; --m3-on-surface-variant:#d8c2bf;
    --m3-outline:#a08c8a; --m3-outline-variant:#534341;
    --m3-inverse-surface:#f1dedc; --m3-inverse-on-surface:#382e2d;
    --m3-scrim:rgba(0,0,0,.55);
  }
}

/* ===================================================================
   2. Old names - what the pages already use, pointed at the roles.
      "--white" is both a page surface and the text on a red button, and
      "--black" both ink and a dark fill: mapped as a pair they stay
      readable on each other in either theme.
   =================================================================== */
html:root{
  --red:var(--m3-primary); --red-dark:var(--m3-primary);
  --gold:var(--m3-tertiary); --gold-lt:var(--m3-tertiary);
  --black:var(--m3-on-surface); --white:var(--m3-surface);
  --text:var(--m3-on-surface); --ink:var(--m3-on-surface);
  --soft:var(--m3-on-surface-variant); --muted:var(--m3-on-surface-variant);
  --border:var(--m3-outline-variant); --line:var(--m3-outline-variant);
  --surface:var(--m3-surface); --bg:var(--m3-surface); --page:var(--m3-surface);
  --paper:var(--m3-surface-container); --tint:var(--m3-surface-high); --ok:var(--m3-ok);
  --serif:var(--m3-font); --sans:var(--m3-font); --cond:var(--m3-font);
}

/* ===================================================================
   3. Parts
   =================================================================== */

/* ---- type: one family, sentence case, no letter-spacing tricks ---- */
:root body{background:var(--m3-surface)!important;color:var(--m3-on-surface)!important;font-family:var(--m3-font)!important;
  font-size:16px!important;line-height:1.5;-webkit-font-smoothing:antialiased}
:root body *:not(i):not([class*="iconly"]){font-family:var(--m3-font)!important;letter-spacing:normal!important}
:root body *:not(i):not(input):not([class*="iconly"]){text-transform:none!important}
:root h1,:root .section-title{font-size:28px!important;line-height:36px!important;font-weight:500!important;color:var(--m3-on-surface)!important}
:root h2{font-size:22px!important;line-height:28px!important;font-weight:500!important;color:var(--m3-on-surface)}
:root h3{font-size:18px!important;line-height:24px!important;font-weight:500!important;color:var(--m3-on-surface)}
:root h1 em,:root h2 em,:root h3 em{font-style:normal!important;color:var(--m3-primary)!important}
:root small,.section-sub,.box-step p,.slead,.page-hero-sub,.hint,.note,.muted,.help,.caption,.reg-mode .rm small,.mine,
.method-card small,.hero p,.page-hero p{color:var(--m3-on-surface-variant)!important}
.hero .kicker,.page-hero .kicker,.kicker,.eyebrow,.lbl,.section-label{font-size:14px!important;font-weight:500!important;color:var(--m3-primary)!important}
:root label,:root .fg label{font-size:14px!important;font-weight:500!important;color:var(--m3-on-surface-variant)}
:focus-visible{outline:3px solid var(--m3-primary)!important;outline-offset:2px}
::selection{background:var(--m3-primary-container);color:var(--m3-on-primary-container)}

/* ---- top app bar ---- */
.site-nav{background:var(--m3-surface)!important;border:0!important;transition:background-color .2s}
.site-nav.scrolled{background:var(--m3-surface-container)!important}
.site-nav .nav-wrap{min-height:var(--m3-bar);padding:8px 4px 8px 16px!important;gap:12px!important}
.site-nav .nav-brand{gap:12px;color:var(--m3-on-surface)!important}
.site-nav .nav-brand img{width:40px;height:40px;padding:3px;background:#fff;border-radius:12px!important}
.site-nav .nav-brand b{font-size:22px!important;line-height:28px!important;font-weight:500!important}
.site-nav .nav-brand small{display:none}
.ham-btn{width:48px;height:48px;display:grid!important;place-items:center;border-radius:50%!important;
  color:var(--m3-on-surface-variant)!important;font-size:24px!important}
.ham-btn:active{background:var(--m3-surface-high)}
.pnav-avatar{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;font-weight:500!important}

/* ---- navigation drawer (a modal sheet from the end edge) ---- */
.overlay{background:var(--m3-scrim)!important}
.drawer{width:min(320px,86vw)!important;right:-340px;background:var(--m3-surface-low)!important;border:0!important;
  border-radius:16px 0 0 16px!important;color:var(--m3-on-surface)}
.drawer.open{right:0}
.drawer-head{padding:16px 8px 8px 24px!important;border:0!important}
.drawer-user b{font-size:16px!important;line-height:24px;font-weight:500!important;color:var(--m3-on-surface)}
.drawer-user small{color:var(--m3-on-surface-variant)!important}
.drawer-close{width:48px;height:48px;display:grid;place-items:center;border-radius:50%!important;color:var(--m3-on-surface-variant)!important;font-size:22px!important}
.drawer-body{padding:0 12px 24px!important}
.drawer-lbl{padding:18px 16px 8px!important;font-size:14px!important;font-weight:500!important;color:var(--m3-on-surface-variant)!important}
.drawer-body a{min-height:56px;padding:0 24px 0 16px!important;gap:12px!important;border:0!important;border-radius:28px!important;
  font-size:14px!important;font-weight:500!important;color:var(--m3-on-surface-variant)!important}
.drawer-body a i{width:24px!important;font-size:22px;color:var(--m3-on-surface-variant)!important}
.drawer-body a.on{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important}
.drawer-body a.on i{color:var(--m3-on-secondary-container)!important}
.drawer-body a.drawer-out{margin-top:8px;color:var(--m3-primary)!important}
.drawer-body a.drawer-out i{color:var(--m3-primary)!important}

/* ---- page titles: the banner each page opens with, and the back-arrow headers ---- */
.page-hero,.hero,.ticket-hero,.phero{background:transparent!important;color:var(--m3-on-surface)!important;border:0!important;
  padding:16px!important;margin-bottom:8px!important}
body>header:not(.site-nav){background:transparent!important;border:0!important}
.hwrap{padding:8px 8px 8px 4px!important;gap:4px!important}
.hback,.hrefresh{width:48px!important;height:48px!important;flex-shrink:0;border-radius:50%!important;background:transparent!important;
  border:0!important;color:var(--m3-on-surface)!important;font-size:22px}
.hback:active,.hrefresh:active{background:var(--m3-surface-high)!important}
.htitle b{font-size:22px!important;line-height:28px!important;font-weight:500!important;color:var(--m3-on-surface)!important}
.htitle span{color:var(--m3-on-surface-variant)!important}

/* ---- cards and list surfaces ---- */
.menu-card,.card,.panel,.box,.post,.tile,.item,.ticket,.ticket-card,.pass,.pass-card,.update,.update-card,.episode,.ep,.session,
.qcard,.form-card,.info-card,.stat,.mcard,.profile-card,.pc,.wall-post,.wall-card,.composer,.live-card,.video-card,.prog-day,
.prog-item,.day-card,.schedule-card,.row-card,.box-step,.my-groups,.method-card,.waiting,.offline{
  background:var(--m3-surface-container)!important;color:var(--m3-on-surface);border:0!important;border-radius:20px!important;box-shadow:none!important}
[class*="card"],[class*="panel"],[class*="box"],[class*="tile"]{border-radius:20px!important;box-shadow:none!important}
[class*="card"]{border-color:var(--m3-outline-variant)}
.menu-row{background:transparent!important;border:0!important;border-radius:0!important}
.menu-row .ic,.ic{border-radius:50%!important;background:var(--m3-surface-bright)!important;color:var(--m3-primary)!important;border:0!important}
.player{border:0!important;border-radius:20px!important;overflow:hidden}
.qr,.qr-box,.qr-wrap{background:#fff!important;border:0!important;border-radius:16px!important}   /* a QR code is always read on white */
.trust{background:var(--m3-surface-container)!important;border:0!important;border-radius:16px;color:var(--m3-on-surface-variant)!important}
.trust b{color:var(--m3-on-surface)!important}
.trust img{border:0!important;border-radius:8px}

/* ---- buttons: pills; filled for the main action, outlined for the rest ---- */
button,.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-red,.btn-black,.btn-dark,.login-btn,.submit,.submit-btn,.action,.act,
a.btn,[class*="btn"],.cta,.cta-row a,.signout{border-radius:24px!important;font-weight:500!important;box-shadow:none!important}
.btn-primary,.btn-red,.login-btn,button.primary,.btn.primary,.submit,.submit-btn{background:var(--m3-primary)!important;
  color:var(--m3-on-primary)!important;border:0!important}
.btn-black,.btn-dark{background:var(--m3-inverse-surface)!important;color:var(--m3-inverse-on-surface)!important;border:0!important}
.btn-outline,.btn-secondary,.signout{background:transparent!important;color:var(--m3-primary)!important;border:1px solid var(--m3-outline)!important}
button:disabled,.btn:disabled{opacity:.45}

/* ---- text fields: outlined ---- */
input,select,textarea,.fg input,.fg select,.fg textarea{background-color:transparent!important;color:var(--m3-on-surface)!important;
  border:1px solid var(--m3-outline)!important;border-radius:4px!important;font-size:16px!important;accent-color:var(--m3-primary)}
input::placeholder,textarea::placeholder{color:var(--m3-outline)!important;opacity:1}
input:focus,select:focus,textarea:focus,.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--m3-primary)!important;
  box-shadow:inset 0 0 0 1px var(--m3-primary)!important;outline:0}
select,.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23857371' stroke-width='1.8' fill='none'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important}
select option{background:var(--m3-surface-container);color:var(--m3-on-surface)}
input[type=checkbox],input[type=radio],input[type=range],input[type=file]{border:0!important;box-shadow:none!important}

/* ---- chips, tabs and small markers ---- */
.refchip,.chip,.pill,.badge,.tag,.cchip,.tab,.tabs button,.filters .pill,.livedot,.switcher .sw{background:transparent!important;
  color:var(--m3-on-surface-variant)!important;border:1px solid var(--m3-outline-variant)!important;border-radius:8px!important}
.pill.on,.chip.on,.chip.active,.tab.on,.tab.active,.badge.on,.switcher .sw.on,.sw.active,.cchip.on{background:var(--m3-secondary-container)!important;
  color:var(--m3-on-secondary-container)!important;border-color:transparent!important}
.step-pill,.newpill{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border-radius:8px!important}
.newpill{border-radius:24px!important}
.avatar,.av,.user-avatar{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
.gold,.gold-lt{color:var(--m3-tertiary)!important}
.now-title{color:var(--m3-on-surface)!important}
.now-sub,.loading,.waiting,.offline{color:var(--m3-on-surface-variant)!important}

/* ---- snackbar ---- */
.toast,.toast.show{left:16px!important;right:16px!important;bottom:calc(var(--m3-bar) + 16px + env(safe-area-inset-bottom,0px))!important;
  width:auto!important;max-width:none!important;padding:14px 16px!important;border-radius:8px!important;justify-content:flex-start!important;
  background:var(--m3-inverse-surface)!important;color:var(--m3-inverse-on-surface)!important;font-size:14px!important;
  box-shadow:0 3px 8px rgba(0,0,0,.3)!important}
.toast *{font-size:14px!important;color:inherit!important}

/* ---- "pay for your pass" and "groups you lead" prompts ---- */
.pay-banner,.pay-banner.group{padding:8px 16px 0!important}
.pay-banner .pb-in{padding:16px!important;gap:12px 16px!important;background:var(--m3-surface-high)!important;border:0!important;border-radius:20px}
.pay-banner .pb-ic{border:0!important;border-radius:50%;background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
.pay-banner b{font-size:16px!important;line-height:24px;font-weight:500!important;color:var(--m3-on-surface)!important}
.pay-banner span{color:var(--m3-on-surface-variant)!important}
.pay-banner a{min-height:48px;padding:0 24px!important;border-radius:24px!important;background:var(--m3-primary)!important;
  color:var(--m3-on-primary)!important;font-size:14px!important;font-weight:500!important}
.my-groups{padding:20px 16px!important}
.my-groups .sub,.mg-row .info small,.mg-load,.mg-sum,.mg-m small{color:var(--m3-on-surface-variant)!important}
.mg-row,.mg-members,.mg-m,.mg-total{border-color:var(--m3-outline-variant)!important}
.mg-row .owed,.mg-total b{color:var(--m3-primary)}
.mg-row .owed.ok{color:var(--m3-ok)}
.mg-row button{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important}
.mg-more{background:transparent!important;color:var(--m3-primary)!important;border:1px solid var(--m3-outline)!important}
.mg-sum b{color:var(--m3-on-surface)!important}
.mg-remind{background:var(--m3-inverse-surface)!important;color:var(--m3-inverse-on-surface)!important}
.mg-dot{background:var(--m3-error)}
.mg-dot.ok{background:var(--m3-ok)}
.mg-st{color:var(--m3-error);border-color:var(--m3-outline-variant);border-radius:8px}
.mg-st.ok{color:var(--m3-ok);border-color:var(--m3-outline-variant)}

/* ---- payment method tiles (brand logos stay on white) ---- */
.p-card{background:var(--m3-surface)!important;border:1px solid var(--m3-outline-variant)!important;border-radius:16px!important}
.p-card.selected,.pay-method.active,.method.active,.method-card.active,.pm.active{background:var(--m3-secondary-container)!important;
  border-color:var(--m3-primary)!important;box-shadow:inset 0 0 0 1px var(--m3-primary)}
.p-card.selected::after{background:var(--m3-primary);color:var(--m3-on-primary);box-shadow:0 0 0 2px var(--m3-surface)}
.p-card.selected .p-name,.p-card.selected .p-sub{color:var(--m3-on-secondary-container)!important}

/* ---- the last word on each page: quiet, and clear of the navigation bar ---- */
footer.site-foot{background:transparent!important;color:var(--m3-on-surface-variant)!important;border:0!important;
  padding:24px 16px calc(24px + var(--m3-bar) + env(safe-area-inset-bottom,0px))!important;font-size:12px!important;line-height:1.5}
footer.site-foot *{font-size:12px!important}
footer.site-foot .f-nav{gap:4px 16px!important;margin-bottom:12px!important}
footer.site-foot .f-nav a{min-height:32px;display:inline-flex;align-items:center;color:var(--m3-on-surface-variant)!important;font-weight:500!important}

/* ---- registration steps (register others) ---- */
.reg-hero{background:transparent!important;border:0!important;color:var(--m3-on-surface)}
.reg-hero:before{display:none!important}
.reg-hero .hw{min-height:0!important;padding:8px 16px 16px!important;gap:8px!important}
.reg-hero .disc{display:none}
.reg-hero .kicker{font-size:14px!important;color:var(--m3-primary)!important}
.reg-hero .meta,.reg-hero .page-hero-sub{color:var(--m3-on-surface-variant)!important}
.stepbar{background:transparent!important;color:var(--m3-on-surface-variant)!important}
.stepbar .st{opacity:1!important}
.stepbar .st i{border:1px solid var(--m3-outline)!important}
.stepbar .st.on{color:var(--m3-on-surface)}
.stepbar .st.on i{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border-color:transparent!important}
.form-outer{padding:0 0 24px!important}
.form-container{background:transparent!important;border:0!important;padding:16px!important}
.box-step{padding:20px 16px!important}

/* ===================================================================
   4. Pages
   =================================================================== */

/* ---- home (portal/index.php, classes "ph-") ----
   A greeting with the countdown in a Material shape, the pass as the hero
   of the page, the facts as a grouped list, shortcuts as tonal icons. */
.wrap.ph{padding:8px 16px 16px!important}
.ph-hello{margin:8px 4px 20px!important}
.ph-hello .kicker{display:none}                       /* the app bar already says where this is */
.ph-hello h1{margin:0 0 4px!important}
.ph-line{font-size:14px!important;line-height:20px!important;color:var(--m3-on-surface-variant)!important}
.ph-line b{color:var(--m3-on-surface)!important;font-weight:500}
.ph-count{width:92px;height:92px;min-width:0!important;padding:0!important;border:0!important;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--m3-tertiary-container)!important;color:var(--m3-on-tertiary-container);
  clip-path:polygon(50.0% 0.0%,52.6% 0.4%,55.1% 1.6%,57.4% 3.3%,59.5% 5.1%,61.6% 6.7%,63.8% 7.7%,66.1% 8.1%,68.7% 8.1%,71.5% 7.9%,74.3% 7.9%,77.0% 8.4%,79.4% 9.5%,81.2% 11.4%,82.5% 13.9%,83.4% 16.6%,84.1% 19.3%,84.9% 21.8%,86.0% 23.8%,87.6% 25.6%,89.7% 27.1%,92.1% 28.5%,94.4% 30.2%,96.3% 32.2%,97.6% 34.5%,97.9% 37.2%,97.6% 39.9%,96.7% 42.6%,95.6% 45.2%,94.8% 47.7%,94.5% 50.0%,94.8% 52.3%,95.6% 54.8%,96.7% 57.4%,97.6% 60.1%,97.9% 62.8%,97.6% 65.5%,96.3% 67.8%,94.4% 69.8%,92.1% 71.5%,89.7% 72.9%,87.6% 74.4%,86.0% 76.2%,84.9% 78.2%,84.1% 80.7%,83.4% 83.4%,82.5% 86.1%,81.2% 88.6%,79.4% 90.5%,77.0% 91.6%,74.3% 92.1%,71.5% 92.1%,68.7% 91.9%,66.1% 91.9%,63.8% 92.3%,61.6% 93.3%,59.5% 94.9%,57.4% 96.7%,55.1% 98.4%,52.6% 99.6%,50.0% 100.0%,47.4% 99.6%,44.9% 98.4%,42.6% 96.7%,40.5% 94.9%,38.4% 93.3%,36.2% 92.3%,33.9% 91.9%,31.3% 91.9%,28.5% 92.1%,25.7% 92.1%,23.0% 91.6%,20.6% 90.5%,18.8% 88.6%,17.5% 86.1%,16.6% 83.4%,15.9% 80.7%,15.1% 78.2%,14.0% 76.2%,12.4% 74.4%,10.3% 72.9%,7.9% 71.5%,5.6% 69.8%,3.7% 67.8%,2.4% 65.5%,2.1% 62.8%,2.4% 60.1%,3.3% 57.4%,4.4% 54.8%,5.2% 52.3%,5.5% 50.0%,5.2% 47.7%,4.4% 45.2%,3.3% 42.6%,2.4% 39.9%,2.1% 37.2%,2.4% 34.5%,3.7% 32.2%,5.6% 30.2%,7.9% 28.5%,10.3% 27.1%,12.4% 25.6%,14.0% 23.8%,15.1% 21.8%,15.9% 19.3%,16.6% 16.6%,17.5% 13.9%,18.8% 11.4%,20.6% 9.5%,23.0% 8.4%,25.7% 7.9%,28.5% 7.9%,31.3% 8.1%,33.9% 8.1%,36.2% 7.7%,38.4% 6.7%,40.5% 5.1%,42.6% 3.3%,44.9% 1.6%,47.4% 0.4%)}
.ph-count b{font-size:30px!important;line-height:32px!important;font-weight:600!important;color:inherit!important;margin:0!important}
.ph-count span{font-size:11px!important;line-height:14px!important;font-weight:500!important;color:inherit!important;margin:0!important}

.ph-grid{gap:16px!important}
.ph-pass,.ph-fact,.ph-news,.ph-links a{border:0!important}

/* the pass: the hero card, in the primary colour; the tear line keeps its bites */
.ph-pass{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container);border-radius:28px}
.ph-who{padding:20px 12px 16px 20px!important}
.ph-who .kicker{color:var(--m3-on-primary-container)!important;opacity:.8}
.ph-name{font-size:24px!important;line-height:32px!important;font-weight:500!important;margin-top:2px!important;color:var(--m3-on-primary-container)}
.ph-ref{font-size:14px!important;margin-top:2px!important;color:var(--m3-on-primary-container)!important;opacity:.8}
.ph-qr{padding:20px 20px 12px 0!important;gap:8px!important;font-size:12px!important;line-height:16px!important;
  color:var(--m3-on-primary-container)!important}
.ph-qr img{width:96px!important;height:96px!important;padding:8px!important;border:0!important;border-radius:16px;background:#fff}
.ph-state{padding:16px 20px 20px!important;border-top:2px dashed var(--m3-surface)!important}
.ph-state::before,.ph-state::after,.ph-qr::before,.ph-qr::after{background:var(--m3-surface)!important;border:0!important;border-radius:50%!important}
.ph-state::before,.ph-state::after{top:-11px!important;width:20px!important;height:20px!important}
.ph-state::before{left:-10px!important}
.ph-state::after{right:-10px!important}
.ph-paid{padding:6px 12px 6px 8px!important;border:0!important;border-radius:8px;background:var(--m3-surface)!important;
  color:var(--m3-error)!important;font-size:14px!important;font-weight:500!important}
.ph-pass.paid .ph-paid{color:var(--m3-ok)!important}
.ph-acts{margin-top:16px!important;gap:4px 8px!important}
.ph-go{flex:1 1 auto;justify-content:center;min-height:56px;padding:0 24px!important;border-radius:28px!important;
  background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;font-size:16px!important;font-weight:500!important}
.ph-go:active{border-radius:16px!important}
.ph-go,.ph-links a i{transition:border-radius .2s ease, background-color .2s ease}
.ph-alt{flex:1 1 auto;justify-content:center;min-height:48px;display:inline-flex;align-items:center;padding:0 16px;border-radius:24px;
  color:var(--m3-on-primary-container)!important;font-size:14px!important;font-weight:500;text-decoration:underline}
@media(min-width:560px){
  .ph-who{padding:24px 24px 12px!important}
  .ph-state{padding:0 24px 24px!important;border-top:0!important}
  .ph-qr{padding:20px 24px!important;border-left:2px dashed var(--m3-surface)!important}
  .ph-qr::before,.ph-qr::after{left:-11px!important;width:20px!important;height:20px!important}
  .ph-qr::before{top:-10px!important}
  .ph-qr::after{bottom:-10px!important}
  .ph-go,.ph-alt{flex:0 0 auto}
}

/* where I sleep, what is next, meal times, my group: one grouped list */
.ph-facts{grid-template-columns:1fr!important;gap:2px!important}
.ph-fact{grid-template-columns:40px minmax(0,1fr)!important;gap:0 16px!important;padding:16px!important;
  background:var(--m3-surface-container)!important;border-radius:4px}
.ph-fact:first-child{border-radius:20px 20px 4px 4px}
.ph-fact:last-child{border-radius:4px 4px 20px 20px}
.ph-fact:only-child{border-radius:20px}
.ph-fact>i{width:40px!important;height:40px!important;border:0!important;border-radius:50%;background:var(--m3-surface-bright)!important;
  color:var(--m3-primary)!important;font-size:20px!important}
.ph-fact .kicker{font-size:12px!important;line-height:16px;color:var(--m3-on-surface-variant)!important}
.ph-fact strong{margin-top:2px!important;font-size:16px!important;line-height:24px!important;font-weight:500!important;color:var(--m3-on-surface)}
.ph-fact .ph-when{margin-top:0!important;font-size:14px!important;line-height:20px!important;color:var(--m3-on-surface-variant)!important}
.ph-fact .ph-quiet{font-weight:400!important;color:var(--m3-on-surface-variant)!important}
.ph-fact a{margin-top:8px!important;font-size:14px!important;font-weight:500;text-decoration:none}
.ph-meal{padding:8px 0!important;border-color:var(--m3-outline-variant)!important;font-size:14px!important;line-height:20px!important}
.ph-meal .ph-hour{color:var(--m3-on-surface-variant)!important}

/* from the Secretariat: a titled group of rows */
.ph-news{background:transparent!important}
.ph-head{padding:8px 4px 8px 8px!important;align-items:center!important}
.ph-head .kicker{font-size:16px!important;line-height:24px;color:var(--m3-on-surface)!important}
.ph-head a{min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:20px;font-size:14px!important;font-weight:500;text-decoration:none}
.ph-row{margin-top:2px;padding:14px 16px!important;border:0!important;border-radius:4px;background:var(--m3-surface-container)!important;
  color:var(--m3-on-surface)!important}
.ph-row:first-of-type{margin-top:0;border-radius:20px 20px 4px 4px}
.ph-row:last-child{border-radius:4px 4px 20px 20px}
.ph-row:first-of-type:last-child{border-radius:20px}
.ph-row:active{background:var(--m3-surface-high)!important}
.ph-row strong{font-size:16px!important;line-height:24px!important;font-weight:500!important}
.ph-row .ph-day{font-size:12px!important;color:var(--m3-on-surface-variant)!important}
.ph-row .ph-words{margin-top:2px!important;font-size:14px!important;line-height:20px!important;color:var(--m3-on-surface-variant)!important}

/* explore: tonal icons, four to a row */
.ph-gap{margin:24px 8px 12px!important;font-size:16px!important;color:var(--m3-on-surface)!important}
.ph-links{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px 4px!important}
.ph-links a{min-height:0!important;padding:0!important;gap:8px!important;background:transparent!important;color:var(--m3-on-surface)!important;
  font-size:12px!important;line-height:16px!important;font-weight:500!important}
.ph-links a i{width:56px;height:56px;display:grid;place-items:center;border-radius:20px;background:var(--m3-surface-high);
  color:var(--m3-primary)!important;font-size:24px!important}
.ph-links a:active i{border-radius:28px;background:var(--m3-primary-container)}
.ph-live{top:-4px!important;right:calc(50% - 36px)!important;padding:3px 6px!important;border-radius:8px;background:var(--m3-error)!important;
  color:var(--m3-on-error)!important;font-size:10px!important;font-weight:700!important}
.ph-more{margin-top:28px!important;gap:8px!important}
.ph-more a{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--m3-outline-variant);border-radius:8px;
  color:var(--m3-on-surface-variant)!important;font-size:14px!important;font-weight:500;text-decoration:none}
.ph-me{font-size:12px!important;color:var(--m3-on-surface-variant)!important}

/* ---- every other page: the same 16px gutter, and cards that hold their own padding ---- */
.wrap,.container,.page,.content,main{padding-left:16px;padding-right:16px}
.card:has(>.pad),.card:has(>.media){padding:0!important;overflow:hidden}
[class*="card"]{background-color:var(--m3-surface-container);border:0}
:root .modal-content,:root .modal-box,:root .merch-modal-box{background:var(--m3-surface-high)!important;color:var(--m3-on-surface);
  border:0!important;border-radius:28px!important}

#updates-feed>div{background:var(--m3-surface-container)!important;border:0!important;border-radius:20px!important}   /* programme */

/* ---- my pass (myticket.php): the ticket head matches the pass on the home page ---- */
.ticket-card,.payment-card{border-radius:28px!important}
.ticket-head{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border:0!important}
.ticket-head .ticket-title{color:var(--m3-on-primary-container)!important}
.ticket-head .ticket-sub{color:var(--m3-on-primary-container)!important;opacity:.8}
.ticket-badge-pill{background:var(--m3-surface)!important;color:var(--m3-tertiary)!important;border:0!important}
.ticket-logo{width:64px!important;height:64px!important;padding:6px;border-radius:16px;background:#fff}
.qr-container{background:var(--m3-surface)!important;border:0!important}
.qr-frame{border:0!important;box-shadow:none!important}
.pilgrim-badge{background:var(--m3-surface-container)!important;border:0!important;box-shadow:none!important}
.pb-btn{background:transparent!important;border:1px solid var(--m3-outline-variant)!important;color:var(--m3-on-surface-variant)!important}
.pay-icon{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
.switch-slider{background-color:var(--m3-outline)}

/* ---- shop (merch.php): the pilgrim's own orders. The page prints its styles
   after the top bar, hence ":root" in front ---- */
:root .shop-order{background:var(--m3-surface-container);border:0;border-radius:20px}
:root .shop-state{border-color:var(--m3-outline-variant);border-radius:8px}
:root .shop-state.paid{color:var(--m3-ok);border-color:currentColor}
:root .shop-total{border-color:var(--m3-outline-variant)}

/* ---- watch live ---- */
.player{background:#000!important}
.cta.gold{background:var(--m3-tertiary-container)!important;color:var(--m3-on-tertiary-container)!important;border-color:transparent!important}

/* ---- podcasts: episodes, and the mini player that sits on the navigation bar ---- */
.ep.playing{background:var(--m3-secondary-container)!important}
.ep .cat{color:var(--m3-tertiary)!important}
.empty i{color:var(--m3-outline)!important}
body>.player{background:var(--m3-surface-highest)!important;color:var(--m3-on-surface)!important;border-radius:0!important}
body>.player .pl-progress{background:var(--m3-outline-variant)}
body>.player .pl-title{color:var(--m3-on-surface)}
body>.player .pl-sub,body>.player .pl-time,body>.player .pl-icn{color:var(--m3-on-surface-variant)!important}
.pl-cover{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border-radius:12px!important}
.pl-btn{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important}

/* ---- register others ---- */
.choice button{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;border:1px solid transparent!important;
  border-radius:20px!important}
.choice button.on{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;border-color:var(--m3-primary)!important}
.choice button.on small{color:var(--m3-on-secondary-container)!important}
.result{background:var(--m3-surface-container)!important;border:0!important;border-radius:20px}
.result .row a,.result .row button{background:transparent!important;color:var(--m3-primary)!important;border:1px solid var(--m3-outline)!important;
  border-radius:24px!important}
.result .row .pri{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border-color:transparent!important}

/* ---- prayer wall (wall.php): the feed keeps its shape; its fixed greys and whites become roles ---- */
:root body .xwall,:root body .xwall *:not(i):not(.fa):not(.nyc-icon):not(.nyc-icon):not(.nyc-icon):not([class*="iconly"]){font-family:var(--m3-font)!important}
:root .xcol{background:var(--m3-surface)!important;border:0!important}
:root .xhead,:root .xwall .filters{background:var(--m3-surface)!important;border-bottom:1px solid var(--m3-outline-variant)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root .xhead .htitle b{font-size:22px!important;line-height:28px!important;font-weight:500!important;color:var(--m3-on-surface)!important}
:root .xhead .htitle span,:root .xwall .pref,:root .xwall .pdot,:root .xwall .ptime,:root .xwall .cref,:root .xwall .ctime,:root .xwall .chint,:root .xwall .cload,:root .xwall .cempty,
:root .xwall .empty,:root .xwall .ds-ph{color:var(--m3-on-surface-variant)!important}
:root .xhead .hback,:root .xhead .hrefresh{width:40px!important;height:40px!important;color:var(--m3-on-surface)!important}
:root .xhead .hback:hover,:root .xhead .hrefresh:hover,:root .xwall .filters .pill:hover{background:var(--m3-surface-high)!important}
:root .xhead #dataSaverBtn.on{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
:root .xwall .composer,:root .xwall .post,:root .xwall .post.prayer{background:var(--m3-surface)!important;border-bottom:1px solid var(--m3-outline-variant)!important}
:root .xwall .post:hover{background:var(--m3-surface-low)!important}
:root .xwall .cbar,:root .xwall .skel,:root .xwall .comments,:root .xwall .ccompose,:root .xwall .cmt,:root .xwall .replies{border-color:var(--m3-outline-variant)!important}
:root .xwall .filters .pill{color:var(--m3-on-surface-variant)!important}
:root .xwall .filters .pill.on{color:var(--m3-primary)!important}
:root .xwall .filters .pill.on::after{height:3px;border-radius:3px 3px 0 0;background:var(--m3-primary)}
:root .xwall .avatar,:root .xwall .cavatar{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
:root .xwall .cfield textarea,:root .xwall .ccompose textarea,:root .xwall .pname,:root .xwall .ptext,:root .xwall .cname,:root .xwall .ctext{color:var(--m3-on-surface)!important}
:root .xwall .cfield textarea::placeholder,:root .xwall .ccompose textarea::placeholder{color:var(--m3-on-surface-variant)!important}
:root .xwall textarea:focus{box-shadow:none!important}
:root .xwall .seg button,:root .xwall .cicon{color:var(--m3-primary)!important}
:root .xwall .seg button.on,:root .xwall .seg button:hover,:root .xwall .cicon:hover{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
:root .xwall .cpost,:root .xwall .csend{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important}
:root .xwall .ccancel{border-color:var(--m3-outline)!important;color:var(--m3-primary)!important}
:root .xwall .pbadge{background:var(--m3-tertiary-container)!important;color:var(--m3-on-tertiary-container)!important}
:root .xwall .pactions button,:root .xwall .rbtn,:root .xwall .cdel,:root .xwall .cact button{color:var(--m3-on-surface-variant)!important}
:root .xwall .rbtn.on:not(.rb-love):not(.rb-pray):not(.rb-amen):not(.rb-reply){color:var(--m3-primary)!important}
:root .xwall .pmedia,:root .xwall .cmedia-preview .thumb,:root .xwall .pedit-ta{border-color:var(--m3-outline-variant)!important}
:root .xwall .mitem.ds{background:var(--m3-surface-container)}
:root .xwall .ds-ph i,:root .xwall .empty i{color:var(--m3-primary)!important}

/* ===================================================================
   5. Public pages - the website before signing in (home, register,
      donate, sign in, shop, about, venue ...). They load this file the
      same way, so on a phone the whole site is one app. Their own styles
      fix many colours with #hex and !important, so these rules carry
      :root in front to win.
   =================================================================== */
html:root{
  --red-mid:var(--m3-primary); --red-deep:var(--m3-primary); --red-accent:var(--m3-primary);
  --red-light:var(--m3-primary-container); --green:var(--m3-ok);
  --ink-soft:var(--m3-on-surface-variant); --ink-mid:var(--m3-on-surface);
  --border-dark:var(--m3-outline); --bg-white:var(--m3-surface);
}

/* ---- top app bar: the public header, and the info page's own bar ---- */
:root body>header:has(.brand),:root .topbar{background:var(--m3-surface)!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background-color .2s}
:root body>header.scrolled:has(.brand),:root .topbar.scrolled{background:var(--m3-surface-container)!important}
:root .brand,:root .brand-name,:root .brand b{color:var(--m3-on-surface)!important}
:root .brand b span{color:var(--m3-primary)!important}
:root .brand-logo,:root .brand>img{background:#fff!important;border:0!important;border-radius:12px!important;padding:3px}
:root .topbar .cta{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important;border-radius:20px!important}
/* no navigation bar on these pages: the footer and the snackbar sit lower */
body:not(:has(.nyc-appbar)) footer.site-foot{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
body:not(:has(.nyc-appbar)) .toast,body:not(:has(.nyc-appbar)) .toast.show{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
:root footer.site-foot p,:root footer.site-foot .seo,:root footer.site-foot .f-copy{color:var(--m3-on-surface-variant)!important;
  border-color:var(--m3-outline-variant)!important}
:root footer.site-foot strong{color:var(--m3-on-surface)!important}

/* ---- the "Install NYC 2026" prompt (pwa.js) ---- */
:root #pwa-bar{background:var(--m3-surface-high)!important;border:0!important;border-radius:16px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.3)!important;font-family:var(--m3-font)!important}
body:has(.nyc-appbar) #pwa-bar{bottom:calc(var(--m3-bar) + 12px + env(safe-area-inset-bottom,0px))!important}
:root #pwa-bar img{border:0!important;border-radius:12px}
:root #pwa-bar b{color:var(--m3-on-surface)!important}
:root #pwa-bar span{color:var(--m3-on-surface-variant)!important}
:root #pwa-bar #pwa-yes{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border-radius:20px!important}
:root #pwa-bar #pwa-no{color:var(--m3-on-surface-variant)!important}

/* ---- section headings and links ---- */
:root .stitle{color:var(--m3-on-surface)!important}
:root .stitle em{font-style:normal!important;color:var(--m3-primary)!important}
:root .more,:root .slink,:root .sec-link{color:var(--m3-primary)!important;font-weight:500!important}

/* ---- home: countdown, the three main buttons, the group prompt ---- */
:root .home-cd,:root .home-actions .form-container{background:transparent!important;border:0!important}
:root .cd{background:var(--m3-surface-container)!important;border:0!important;border-radius:16px!important;box-shadow:none!important}
:root .cd b{color:var(--m3-on-surface)!important}
:root .cd-label{color:var(--m3-on-surface-variant)!important}
:root .cd-live{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border:0!important;border-radius:8px!important}
:root .btn-reserve{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important;border-radius:28px!important;min-height:64px}
:root .btn-reserve *,:root .btn-reserve .rlabel small{color:var(--m3-on-primary)!important}
:root .btn-reserve .rlabel small{opacity:.85}
:root .btn-light{background:transparent!important;color:var(--m3-primary)!important;border:1px solid var(--m3-outline)!important;border-radius:28px!important}
:root .btn-light i{color:var(--m3-primary)!important}
:root .btn-light.gold i{color:var(--m3-tertiary)!important}
:root .group-cta{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;border:0!important;border-radius:16px!important}
:root .group-cta b,:root .group-cta i{color:var(--m3-primary)!important}

/* ---- bands of figures (home numbers, about "a proven movement") ---- */
:root .numbers,:root .legacy{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;border:0!important;
  margin:24px 16px!important;border-radius:28px!important}
:root .num-grid>div{border-color:var(--m3-outline-variant)!important}
:root .numbers .num{color:var(--m3-primary)!important}
:root .num-lbl,:root .legacy .k,:root .legacy-item .where{color:var(--m3-on-surface-variant)!important}
:root .legacy-item .yr{color:var(--m3-primary)!important}
:root .legacy-item .num{color:var(--m3-on-surface)!important}
:root .legacy-item.now{background:var(--m3-primary-container)!important;border:0!important;border-radius:16px!important}
:root .legacy-item.now .yr,:root .legacy-item.now .num,:root .legacy-item.now .where{color:var(--m3-on-primary-container)!important}

/* ---- cards: pillars, sponsor tiers, venue and accommodation ---- */
:root .pillar,:root .tier,:root .accom-card{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;
  border:0!important;border-radius:20px!important;box-shadow:none!important}
:root .pillar h4,:root .tier h4{color:var(--m3-on-surface)!important}
:root .pillar p,:root .tier p{color:var(--m3-on-surface-variant)!important}
:root .pillar .num{display:none}   /* the faint "01" behind each pillar: decoration a phone screen does not need */
:root .pic,:root .tic{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border:0!important;border-radius:50%!important}
:root .pic.gold{background:var(--m3-tertiary-container)!important;color:var(--m3-on-tertiary-container)!important}
:root .pic.green{background:var(--m3-ok-container)!important;color:var(--m3-on-ok-container)!important}
:root .pic.ink{background:var(--m3-surface-highest)!important;color:var(--m3-on-surface)!important}
:root .pic i,:root .tic i{color:inherit!important}
:root .tier.featured{background:var(--m3-tertiary-container)!important}
:root .tier.featured h4,:root .tier.featured p{color:var(--m3-on-tertiary-container)!important}
:root .venue-card{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border:0!important;
  border-radius:28px!important;box-shadow:none!important}
:root .venue-card h3,:root .venue-card p,:root .venue-card .vk,:root .venue-card .vrow,:root .venue-card .vrow i{color:var(--m3-on-primary-container)!important}
:root .venue-card .vrow{border-color:var(--m3-outline-variant)!important}
:root .cta-btn,:root .venue-card .cta-btn{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important;border-radius:24px!important}
:root .accom-card.inc{border:0!important;box-shadow:inset 0 0 0 2px var(--m3-ok)!important}
:root .accom-tier{color:var(--m3-primary)!important}
:root .accom-card.inc .accom-tier{color:var(--m3-ok)!important}
:root .accom-meta,:root .accom-help{color:var(--m3-on-surface-variant)!important}
:root .accom-help a{color:var(--m3-primary)!important}

/* ---- stay updated ---- */
:root .subscribe{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;border:0!important;
  margin:24px 16px!important;border-radius:28px!important}
:root .subscribe .stitle,:root .sub-msg{color:var(--m3-on-surface)!important}
:root .subscribe p{color:var(--m3-on-surface-variant)!important}
:root .sub-form input{background:transparent!important;color:var(--m3-on-surface)!important;border:1px solid var(--m3-outline)!important;border-radius:4px!important}
:root .sub-form input::placeholder{color:var(--m3-on-surface-variant)!important}
:root .sub-form button{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border-radius:24px!important;min-height:48px}
:root .social a{background:transparent!important;color:var(--m3-on-surface)!important;border:1px solid var(--m3-outline-variant)!important;border-radius:8px!important}
:root .social a i{color:var(--m3-primary)!important}

/* ---- donate: the progress card, currency switch and the give button ---- */
:root .wrap .hero{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;border:0!important;
  border-radius:28px!important;padding:20px!important}
:root .wrap .hero .k{color:var(--m3-primary)!important}
:root .wrap .hero h1,:root .wrap .hero .h1like,:root .wrap .hero .raised{color:var(--m3-on-surface)!important}
:root .wrap .hero .nums span{color:var(--m3-on-surface-variant)!important}
:root .wrap .hero .nums .raised{color:var(--m3-on-surface)!important}
:root .wrap .hero .donorchip{background:var(--m3-surface-high)!important;color:var(--m3-on-surface)!important;border:0!important;border-radius:8px!important}
:root .hero-share{width:48px!important;height:48px!important;background:transparent!important;border:0!important;color:var(--m3-on-surface-variant)!important}
:root .curswitch{background:transparent!important;border:1px solid var(--m3-outline)!important;border-radius:24px!important;padding:0!important;gap:0!important;overflow:hidden}
:root .curswitch button{min-height:40px;border-radius:0!important;background:transparent!important;color:var(--m3-on-surface)!important}
:root .curswitch button+button{border-left:1px solid var(--m3-outline)!important}
:root .curswitch button.on{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important}
:root .give{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important;border-radius:28px!important;min-height:56px}
:root .give *{color:inherit!important}
:root button.amt{background:transparent!important;border:1px solid var(--m3-outline-variant)!important;border-radius:8px!important}
:root button.amt.on{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;border-color:transparent!important}
:root button.amt.on small{color:var(--m3-on-secondary-container)!important}
:root .amt-tag{color:var(--m3-ok)!important}
:root .mile{background:var(--m3-surface-container)!important;border:0!important;border-radius:12px!important}
:root .mile span{color:var(--m3-on-surface)!important}
:root .mile .d{color:var(--m3-primary)!important}
:root .mile.done{background:var(--m3-ok-container)!important}
:root .mile.done span,:root .mile.done .d,:root .mile.done .tick{color:var(--m3-on-ok-container)!important}
:root .p-link{color:var(--m3-primary)!important}

/* ---- registration: steps, choices, the step buttons at the bottom ---- */
:root .form-outer{background:transparent!important}
:root .step-bar{background:transparent!important}
:root .step-bar .step-num{background:transparent!important;border:1px solid var(--m3-outline)!important;color:var(--m3-on-surface-variant)!important}
:root .step-bar .step-label{color:var(--m3-on-surface-variant)!important}
:root .step-bar .step-item:after{display:none!important}
:root .step-bar .step-item.active .step-num{background:var(--m3-primary)!important;border-color:transparent!important;color:var(--m3-on-primary)!important}
:root .step-bar .step-item.active .step-label{color:var(--m3-on-surface)!important}
:root .reg-mode .rm{background:var(--m3-surface-container)!important;color:var(--m3-on-surface)!important;border:0!important;border-radius:20px!important}
:root .reg-mode .rm.on{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;
  box-shadow:inset 0 0 0 2px var(--m3-primary)!important}
:root .reg-mode .rm i{color:var(--m3-primary)!important}
:root .fee-line{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;border:0!important;border-radius:8px!important}
:root .fee-line b,:root .fee-line b *{color:var(--m3-on-secondary-container)!important}
:root label.f-label,:root p.section-hint,:root .f-hint,:root .field-hint{color:var(--m3-on-surface-variant)!important}
:root .req-star{color:var(--m3-primary)!important}
:root .pill-btn{background:transparent!important;color:var(--m3-on-surface-variant)!important;border:1px solid var(--m3-outline)!important;border-radius:8px!important}
:root .pill-btn.selected{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;border-color:transparent!important}
:root .stepnav{background:var(--m3-surface-container)!important;border:0!important}
:root .stepnav .sn-back{background:transparent!important;color:var(--m3-primary)!important;border:1px solid var(--m3-outline)!important;border-radius:24px!important}
:root .stepnav .sn-next{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important;border-radius:24px!important}
:root .stepnav .sn-pos{color:var(--m3-on-surface-variant)!important}
:root .select2-container--default .select2-selection--single,:root .select2-container--default .select2-selection--multiple{
  background:transparent!important;border:1px solid var(--m3-outline)!important;border-radius:4px!important}
:root .select2-container .select2-selection .select2-selection__rendered{color:var(--m3-on-surface)!important}
:root .select2-container .select2-selection .select2-selection__placeholder{color:var(--m3-on-surface-variant)!important}
:root .select2-dropdown{background:var(--m3-surface-container)!important;border-color:var(--m3-outline-variant)!important;color:var(--m3-on-surface)}
:root .select2-results__option{color:var(--m3-on-surface)}
:root .select2-results__option--highlighted,:root .select2-results__option[aria-selected=true]{background:var(--m3-secondary-container)!important;
  color:var(--m3-on-secondary-container)!important}
:root .method-lock-note{background:var(--m3-tertiary-container)!important;color:var(--m3-on-tertiary-container)!important;border:0!important;border-radius:12px!important}
:root .method-lock-note *{color:inherit!important}

/* ---- shop: category chips and the product cards ---- */
:root .filters .btn,:root button[onclick^="filterMerch"]{min-height:40px;padding:0 16px!important;background:transparent!important;color:var(--m3-on-surface-variant)!important;
  border:1px solid var(--m3-outline-variant)!important;border-radius:8px!important}
:root .filters .btn.btn-black,:root button.btn-black[onclick^="filterMerch"]{background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;border-color:transparent!important}
:root .t-tab{background:transparent!important;color:var(--m3-on-surface-variant)!important;border:1px solid var(--m3-outline-variant)!important;border-radius:8px!important}
:root .t-tab.active{box-shadow:none!important;background:var(--m3-secondary-container)!important;color:var(--m3-on-secondary-container)!important;border-color:transparent!important}
:root .day-badge{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important;border-radius:8px!important}
:root .mcard .img{background:var(--m3-surface-high)!important}
:root .mcard .price{color:var(--m3-on-surface)!important}
:root .mcard .buy{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important;border-radius:24px!important}

/* ---- privacy: the promises and the deletion request ---- */
:root .alert{border:0!important;border-radius:16px!important}
:root .alert-red{background:var(--m3-primary-container)!important;color:var(--m3-on-primary-container)!important}
:root .alert-gold{background:var(--m3-tertiary-container)!important;color:var(--m3-on-tertiary-container)!important}
:root .alert-dark{background:var(--m3-surface-container)!important;color:var(--m3-on-surface-variant)!important}
:root .alert-red *,:root .alert-gold *{color:inherit!important}
:root .df-btn{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border-radius:24px!important;min-height:48px}

/* ---- after paying (payment_return.php, donation_return.php) and claiming a pass (claim.php) ---- */
:root body:has(>.box){box-sizing:border-box}
:root body>.box{padding:24px!important}
:root body>.box .sp{border-color:var(--m3-surface-highest)!important;border-top-color:var(--m3-primary)!important}
:root body>.box p{color:var(--m3-on-surface-variant)!important}
:root body>.box .ok i{color:var(--m3-ok)!important}
:root body>.box .fail i{color:var(--m3-error)!important}
:root body>.box .refbox{background:var(--m3-surface-high)!important;border:0!important;border-radius:16px!important;color:var(--m3-primary)!important}
:root body>.box a{box-sizing:border-box;min-height:48px;padding:12px 24px!important;background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;
  border-radius:24px!important;font-weight:500!important}
:root .claim-page .btn{background:var(--m3-primary)!important;color:var(--m3-on-primary)!important;border:0!important}
:root .claim-page .btn.dark{background:transparent!important;color:var(--m3-primary)!important;border:1px solid var(--m3-outline)!important}
:root .claim-page .error{background:var(--m3-error-container)!important;color:var(--m3-on-error-container)!important;border:0!important;border-radius:12px!important}
:root .claim-page .secret{background:var(--m3-surface-high)!important;border:0!important;border-radius:16px!important}
:root .claim-page .ref{color:var(--m3-primary)!important}