/* ============================================================
   assets/css/app.css — v10.5.1 (F2) COMMON LAYER
   Site-wide components shared by every page, built on Bootstrap 5.3
   + theme.css tokens. Everything custom is namespaced .pcd-* so it
   can never collide with Bootstrap (the legacy stylesheet's `.container`
   card is exactly that collision — it becomes .pcd-card here).
   Page-specific rules belong in assets/css/pages/<page>.css, never here.
   ============================================================ */

/* ---------- document ---------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.pcd-main {
    flex: 1 0 auto;
}

/* ---------- accessibility baseline ---------- */
.pcd-skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--pcd-secondary);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--pcd-radius) 0;
}

.pcd-skip-link:focus {
    inset-inline-start: 0;
    color: #fff;
    outline: 3px solid var(--pcd-primary);
    outline-offset: 2px;
}

/* Visible focus for keyboard users on things Bootstrap doesn't ring itself */
:where(a, [tabindex], summary):focus-visible {
    outline: 3px solid rgba(var(--pcd-primary-rgb), 0.55);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- site header ---------- */
.pcd-header {
    background: var(--pcd-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding-block: 0.5rem;
}

.pcd-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--pcd-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.pcd-brand:hover,
.pcd-brand:focus {
    color: var(--pcd-secondary-dark);
}

.pcd-brand img {
    height: 52px;
    width: auto;
}

.pcd-header .nav-link {
    color: var(--pcd-text);
    font-weight: 500;
}

.pcd-header .nav-link:hover,
.pcd-header .nav-link:focus {
    color: var(--pcd-primary);
}

.pcd-header .nav-link[aria-current="page"] {
    color: var(--pcd-primary);
    font-weight: 600;
}

/* ---------- site footer ---------- */
.pcd-footer {
    background: var(--pcd-secondary);
    color: #fff;
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: auto;
}

.pcd-footer a {
    color: #ddd;
    text-decoration: none;
}

.pcd-footer a:hover,
.pcd-footer a:focus {
    color: #fff;
    text-decoration: underline;
}

.pcd-footer .pcd-social a {
    display: inline-flex;
    padding: 0.375rem;
    margin: 0 0.25rem;
    color: #fff;
}

.pcd-footer .pcd-social svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: currentColor;
}

/* The footer's last three inline style attributes. They were the only inline styles left in
   the shared shell, so they appeared on EVERY page of the site. */
.pcd-footer-address {
    font-size: 0.9em;
}

.pcd-footer-links {
    font-size: 0.8em;
}

.pcd-footer-credit {
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* ---------- broken-image fallback (see assets/js/app.js) ----------
   Applied when an uploaded file referenced by the database is no longer on disk. The element
   keeps the box its page assigned, so nothing reflows; only the content becomes a neutral
   placeholder instead of the browser's broken-image box. object-fit is forced to contain so a
   page rule of `cover` cannot crop the placeholder glyph out of view. */
.pcd-img-broken {
    object-fit: contain !important;
    background: #F4EEE6;
}

/* ---------- inline SVG icons (includes/ui/icon.php) ----------
   Sized in em so an icon tracks the text it sits beside, and filled with currentColor so it
   inherits colour without a per-context rule. Replaces the Font Awesome classes that had been
   rendering at 0x0 since the pages moved onto this layout. */
.pcd-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ---------- page card (legacy `.container` card, renamed) ---------- */
.pcd-card {
    background: var(--pcd-surface);
    border-radius: var(--pcd-radius-lg);
    box-shadow: var(--pcd-shadow);
    border-top: 5px solid var(--pcd-primary);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    animation: pcd-fade-in 0.5s ease-out;
}

.pcd-page-title {
    color: var(--pcd-secondary);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}

@keyframes pcd-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- OTP entry ---------- */
.pcd-otp-inputs {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-block: 1.25rem;
}

.pcd-otp-inputs input {
    width: 45px;
    height: 45px;
    padding: 0.3125rem;
    text-align: center;
    font-size: 1.2rem;
}

/* ---------- stepper (registration / checkout progress) ---------- */
.pcd-stepper {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    counter-reset: pcd-step;
}

.pcd-stepper li {
    counter-increment: pcd-step;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pcd-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.pcd-stepper li::before {
    content: counter(pcd-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--pcd-border);
    background: var(--pcd-surface);
    font-weight: 700;
}

.pcd-stepper li[aria-current="step"] {
    color: var(--pcd-primary);
}

.pcd-stepper li[aria-current="step"]::before {
    border-color: var(--pcd-primary);
    background: var(--pcd-primary);
    color: #fff;
}

.pcd-stepper li.is-done {
    color: var(--pcd-secondary);
}

.pcd-stepper li.is-done::before {
    content: "\2713";
    border-color: var(--pcd-secondary);
    background: var(--pcd-secondary);
    color: #fff;
}

.pcd-stepper li:not(:last-child)::after {
    content: "";
    width: 2rem;
    height: 2px;
    background: var(--pcd-border);
}

/* ---------- empty state ---------- */
.pcd-empty-state {
    text-align: center;
    padding: 3rem 1.25rem;
    color: var(--pcd-text-muted);
}

.pcd-empty-state .pcd-empty-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.pcd-empty-state h3 {
    color: var(--pcd-text);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* ---------- action bar (form/page-end button row) ---------- */
.pcd-action-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9375rem;
    margin-top: 1.5rem;
}

/* ---------- payment summary card (step2 pattern) ---------- */
.pcd-payment-summary {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--pcd-radius);
    padding: 0.9375rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .pcd-payment-summary {
    background: rgba(var(--pcd-primary-rgb), 0.08);
    border-color: rgba(var(--pcd-primary-rgb), 0.35);
}

.pcd-payment-summary h4 {
    color: var(--pcd-primary);
    font-size: 1rem;
    margin-bottom: 0.625rem;
}

.pcd-payment-summary .pcd-payment-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3125rem;
    font-size: 0.9rem;
}

.pcd-payment-summary .pcd-payment-row span:last-child {
    font-weight: 600;
}

/* ---------- upload previews ---------- */
.pcd-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.625rem;
}

.pcd-preview-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--pcd-radius);
    border: 2px solid var(--pcd-border);
}

/* ---------- JS message region (aria-live target) ---------- */
.pcd-msg[hidden] {
    display: none;
}

/* ---------- page shell ----------
   Geometry of the legacy `.container` card (width 95%, max 1200px, centred).
   Kept separate from .pcd-card so a page can take the card look without the
   width, or vice versa. Introduced when index.php's `.container` was found
   colliding with Bootstrap's layout wrapper of the same name. */
.pcd-shell {
    width: 95%;
    max-width: 1200px;
    margin-inline: auto;
    margin-block: 2.5rem;
}

/* ============================================================
   LEGACY COMPATIBILITY LAYER (v10.5.3)
   Class names still present in migrated markup that were previously defined
   ONLY in assets/css/style.css. Migrated pages no longer load that file, so
   without these the rules silently vanish. Found by sweeping every migrated
   page for style.css class names and checking them against the new CSS.

   Most severe: .modal-overlay carried `opacity:0; visibility:hidden`, so
   losing it makes the OTP / redirect modals render permanently visible inline.

   These are DEPRECATED. Each should be replaced by its .pcd-* equivalent as
   the owning page is revisited (.pcd-otp-inputs, .pcd-preview-*,
   .pcd-payment-summary already exist); delete this block once nothing uses it.

   STATUS AT v10.5.5 (measured, not assumed — waves A/B/C are all migrated and the
   block is STILL LOAD-BEARING, so it cannot simply be deleted):
     .form-group      81 uses across index, step2, step3, donation_checkout,
                      donation_history, edit_profile (+ edit_profile.js, step3.js)
     .modal-overlay    8 uses across index, donation_cart, donation_checkout,
                      donation_history  — the most dangerous to remove, since losing
                      `opacity:0; visibility:hidden` renders every modal permanently open
     .checkbox-group   6 uses across step2, complete_requirements, renew_membership
     .loader           1 use  (index; also referenced by index.js, donation_checkout.js)
     .otp-inputs       0 uses -> REMOVED at v10.5.5
   Retiring the rest means reworking the markup of those 9 pages, which is a migration
   task in its own right, not a cleanup. Do not delete a rule here without re-running
   that census — the failure is silent.
   ============================================================ */

.form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Scoped so it outranks Bootstrap's own .modal-content, which these
   non-Bootstrap modals must not inherit. */
.modal-overlay .modal-content {
    background: var(--pcd-surface);
    padding: 1.875rem;
    border-radius: var(--pcd-radius-lg);
    text-align: center;
    max-width: 400px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s;
    border-top: 5px solid var(--pcd-primary);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: pcd-spin 1s ease-in-out infinite;
    margin-right: 0.625rem;
    vertical-align: middle;
}

@keyframes pcd-spin {
    to {
        transform: rotate(360deg);
    }
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.9375rem;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    min-width: 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    cursor: pointer;
}

.checkbox-group span {
    flex: 1;
}

/* ---- legacy GLOBAL ELEMENT styling (v10.5.3) ----
   assets/css/style.css styled bare `input`, `select`, `textarea`, `button` and
   `label` globally. Bootstrap deliberately does NOT — it requires .form-control
   and .btn — so every classless control on a migrated page rendered as an
   unstyled native widget (21 of them on index.php alone, including the OTP
   modal's input and Verify button).

   Scoped two ways so it is surgical:
     - only inside legacy containers (.pcd-card, .modal-overlay, .form-group,
       .checkbox-group) — never the header, nav or footer;
     - only on elements with NO class attribute, via :not([class]), so anything
       already using .form-control / .btn keeps Bootstrap's styling untouched.
   Deprecated: as each page adopts .form-control/.btn, this shrinks to nothing. */

:is(.pcd-card, .modal-overlay, .form-group, .checkbox-group) :is(input, select, textarea):not([class]):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pcd-border);
    border-radius: var(--pcd-radius);
    font-size: 1rem;
    font-family: inherit;
    background: var(--pcd-surface);
    color: var(--pcd-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The :not() qualifiers must MATCH the resting rule above, or this loses to it. The resting
   selector scores (0,5,1) and this one previously scored (0,3,1), so `border-color` was beaten
   by the resting `border` shorthand on every control on every page — measurably: a focused
   input kept its grey border and showed only the box-shadow, which the resting rule does not
   set. Only the ring was ever visible. Now (0,6,1), so both declarations land. */
:is(.pcd-card, .modal-overlay, .form-group, .checkbox-group) :is(input, select, textarea):not([class]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus {
    outline: none;
    border-color: var(--pcd-primary);
    box-shadow: 0 0 0 3px rgba(var(--pcd-primary-rgb), 0.12);
}

:is(.pcd-card, .modal-overlay, .form-group) input:not([class])[readonly] {
    background-color: #F9FAFB;
    cursor: not-allowed;
}

:is(.pcd-card, .modal-overlay) button:not([class]) {
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: var(--pcd-secondary);
    color: #fff;
    border: none;
    border-radius: var(--pcd-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

:is(.pcd-card, .modal-overlay) button:not([class]):hover:not(:disabled) {
    background: var(--pcd-secondary-dark);
    transform: translateY(-2px);
}

:is(.pcd-card, .modal-overlay) button:not([class]):disabled {
    background: #9CA3AF;
    cursor: not-allowed;
    transform: none;
}

:is(.pcd-card, .form-group) label:not([class]) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--pcd-text);
}

/* Bootstrap's .modal-content adds overflow:hidden/max-height, which clips these
   non-Bootstrap modals. Neutralised for the legacy overlay only. */
.modal-overlay .modal-content {
    overflow: visible;
    max-height: none;
    display: block;
    border: none;
}

/* ==========================================================================
   Shared page primitives (v10.6.0 inline-style sweep)

   These replace inline style attributes that were repeated verbatim across
   pages. Several of them referenced --primary / --text-muted / --shadow,
   which have not existed since assets/css/style.css was retired: an undefined
   custom property makes the whole declaration invalid at computed-value time,
   so it computed to `unset` and silently did nothing. The equivalents here use
   the real --pcd-* tokens, which additionally carry dark-mode values.
   ========================================================================== */

/* Centred intro paragraph under a page heading. */
.pcd-lede {
    margin-bottom: 1.25rem;
    color: var(--pcd-text-muted);
}

/* Required-field marker. Was `<span style="color: red;">*</span>` in 11 places on
   donation_checkout.php alone. Uses a red that clears 4.5:1 on the cream page
   background, which the bare `red` keyword did not. */
.pcd-req {
    color: #C62828;
}

/* Tinted callout card with a coloured left rule. Shared by index.php and
   donation_category.php. */
.info-card {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.info-card--about {
    background: #fff5f0;
    border-left: 4px solid var(--pcd-primary);
}

.info-card--options {
    background: #e8f5e9;
    border-left: 4px solid #2e7d32;
}

.info-card--warning {
    background: #ffebee;
    border-left: 4px solid #d32f2f;
}

.info-card__hint {
    color: var(--pcd-text-muted);
    margin-bottom: 0;
}

/* Long-form content primitives. index.php, donate.php and donation_category.php
   all carried byte-identical copies of these as inline styles. */
.pcd-quote {
    margin-bottom: 15px;
    font-style: italic;
    color: #d84315;
    font-weight: 600;
}

.pcd-list-plain {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.pcd-list-plain li {
    margin-bottom: 8px;
}

/* Green "act now" note at the foot of a callout card. */
.pcd-callout {
    margin-top: 20px;
    padding: 12px;
    background: #e8f5e9;
    border-radius: 8px;
    border-left: 3px solid #2e7d32;
}

.pcd-callout__lead {
    color: #1b5e20;
}

/* Empty-state panel. */
.pcd-empty {
    text-align: center;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 10px;
}

.pcd-empty__icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.pcd-empty__text {
    color: var(--pcd-text-muted);
}

.pcd-dot--whatsapp {
    color: #25D366;
}

.pcd-dot--sms {
    color: #007bff;
}

.pcd-actions-center {
    text-align: center;
    margin-top: 30px;
}

/* Compact confirm/notice dialog inside the non-Bootstrap .modal-overlay. */
.modal-overlay .modal-content.pcd-dialog {
    text-align: left;
    max-width: 460px;
}

.pcd-dialog__title {
    margin-top: 0;
}

.pcd-dialog__text {
    margin: 0.5rem 0 1.125rem;
    color: var(--pcd-text-muted);
}

.pcd-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Outline button.

   FULLY SPECIFIED ON PURPOSE. Bare modal buttons are styled through
   `:is(.pcd-card, .modal-overlay) button:not([class])` above, so attaching any
   class to one is exactly what stops that rule matching. Anything omitted here
   is not inherited from there — it is simply lost. Tell-tale of a regression:
   `border-style: outset`, the UA default. */
:is(.pcd-card, .modal-overlay) button.pcd-btn-outline {
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: transparent;
    color: var(--pcd-primary);
    border: 2px solid var(--pcd-primary);
    border-radius: var(--pcd-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, color 0.2s;
}

:is(.pcd-card, .modal-overlay) button.pcd-btn-outline:hover:not(:disabled) {
    background: var(--pcd-primary);
    color: #fff;
    transform: translateY(-2px);
}

:is(.pcd-card, .modal-overlay) button.pcd-btn-outline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Quiet text button — same footprint as the outline variant, no chrome. */
:is(.pcd-card, .modal-overlay) button.pcd-btn-quiet {
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: transparent;
    color: var(--pcd-text-muted);
    border: none;
    border-radius: var(--pcd-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

:is(.pcd-card, .modal-overlay) button.pcd-btn-quiet:hover:not(:disabled) {
    color: var(--pcd-text);
}

/* ── v11.14.0 — Sahyogi / Family / Non-Sahyogi ─────────────────────────────────────────────────
   ONE palette, shared with the PDF surfaces via pcd_participant_category_css() in
   pgadmin/includes/participant_category.php. If you change a colour here, change it there: a pass
   card and the roster it is scanned against must not disagree about what green means.

   Gradients rather than flat green/blue/yellow, per the ashram's saffron/maroon/cream identity —
   and the category is stated in WORDS as well as colour, so the meaning survives a photocopy, a
   colour-blind reader and a phone in bright sun. */
.pcd-cat{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.03em;line-height:1.6;border:1px solid transparent;white-space:nowrap;vertical-align:middle}
.pcd-cat--member{background:linear-gradient(135deg,#e8f3e4 0%,#d3e7cc 100%);color:#1e4620;border-color:#a9cb9e}
.pcd-cat--family{background:linear-gradient(135deg,#e6ecf7 0%,#d2dcf0 100%);color:#1f3566;border-color:#a8b9de}
.pcd-cat--guest{background:linear-gradient(135deg,#fdf0dc 0%,#f8e0bd 100%);color:#7a4408;border-color:#e5c393}
.pcd-cat__id{display:inline-block;font-family:'Courier New',monospace;font-size:11px;font-weight:700;
  color:#5b1f1f;background:#f7efe6;border:1px solid #e2d2c0;border-radius:4px;padding:1px 6px;vertical-align:middle}
@media (prefers-color-scheme: dark){
  .pcd-cat--member{background:linear-gradient(135deg,#1e3a22 0%,#152b18 100%);color:#cfe8c6;border-color:#2f5c35}
  .pcd-cat--family{background:linear-gradient(135deg,#1e2a4a 0%,#151f38 100%);color:#c9d6f2;border-color:#33477a}
  .pcd-cat--guest{background:linear-gradient(135deg,#4a3418 0%,#382711 100%);color:#f3ddb8;border-color:#7a5a2c}
  .pcd-cat__id{color:#f0dcc8;background:#3a2a1e;border-color:#5c4433}
}

/* ═══ THE SHARED FLASH — page_open.php ══════════════════════════════════════════════════════════
 *
 * Endpoints across the public tree write $_SESSION['error'] and redirect; before v11.16.4 the
 * shared layout rendered nothing, so every one of those sentences was discarded in silence.
 * page_open.php now prints them and this is what they look like.
 *
 * ⚠ LITERAL COLOURS, NOT var(). An undefined custom property fails silently in this project —
 * no console error, no fallback, just an unstyled element — and these two classes have to be
 * legible on the day they first appear, on a page nobody has looked at. */
.pcd-flash {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.97rem;
    line-height: 1.5;
}
.pcd-flash--err {
    background: #fdeded;
    color: #5f2120;
    border-color: #e6a5a1;
}
.pcd-flash--ok {
    background: #edf7ed;
    color: #1e4620;
    border-color: #a5d6a7;
}
@media (prefers-color-scheme: dark) {
    .pcd-flash--err { background: #3b1512; color: #f6c9c5; border-color: #7a2f28; }
    .pcd-flash--ok  { background: #12301a; color: #c3e6c8; border-color: #2f6b3a; }
}

/* =================================================================================================
   v11.18.1 — RICH-TEXT OUTPUT. The public half of the admin editor.

   ⚠ THESE RULES ARE LOAD-BEARING, NOT DECORATION. `pcd-center` and `pcd-right` are custom elements
   emitted by the admin editor's alignment buttons, allow-listed by name in pcd_html_allowed_tags()
   precisely so that `class=` could stay shut. A custom element is INLINE until a stylesheet says
   otherwise, so without `display: block` the text-align below has nothing to align inside and the
   button appears to do nothing on the public page while working perfectly in the admin box — the
   exact silent divergence the whole design exists to prevent.

   Global rather than per-page, because sanitised HTML is rendered on event.php and
   donation_category.php today and will be rendered wherever the next such field is added. A rule
   that has to be remembered per screen is a rule that gets forgotten on one.

   The same two selectors exist in pgadmin/assets/css/pcd-rich-editor.css for the editor itself.
   If you change one, change both — a WYSIWYG editor that lies about alignment is worse than a
   textarea full of tags, because the tags at least look like something to check.
   ================================================================================================= */
pcd-center,
pcd-right {
    display: block;
}

pcd-center { text-align: center; }
pcd-right  { text-align: right; }

/* An image an admin embedded is bounded by its container, never by its own pixel width. Uploads are
   already capped at 1200px on the longest edge by pcd_media_image_store(), but a 1200px image in a
   360px phone column is still a horizontal scrollbar on somebody's Diwali announcement. */
pcd-center img,
pcd-right img,
.evd-desc img,
.evd-block img,
.dc-rich img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 1rem 0;
}

figure figcaption {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
}

/* ---------- the three numbers a booking is reconciled by (v11.21.24) ----------
   Rendered by includes/event_balance_summary.php on event_success.php,
   event_participants.php and dashboard.php. The arithmetic is
   EventBookingBalance::for(); these rules only lay the answer out. */
.ebs {
    border: 1px solid var(--pcd-border, #e2e8f0);
    border-radius: var(--pcd-radius, 10px);
    padding: 1rem 1.1rem;
    margin-block: 1.25rem;
    background: #fff;
}
.ebs__h {
    margin: 0 0 .75rem;
    font-size: .95rem;
    font-weight: 700;
    color: #2c3e50;
}
.ebs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem 1.25rem;
    margin: 0;
}
.ebs__cell { margin: 0; }
.ebs__label {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}
.ebs__value {
    margin: .15rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #1e293b;
}
.ebs__value--muted { color: #94a3b8; }
.ebs__note {
    margin: .1rem 0 0;
    font-size: .78rem;
    color: #64748b;
}
.ebs__msg { margin: .9rem 0 0; font-size: .88rem; color: #334155; }
.ebs__msg--due { color: #9a3412; }
.ebs__msg--ok  { color: #166534; }
.ebs__pay {
    display: inline-block;
    margin-top: .5rem;
    padding: .55rem 1.1rem;
    border-radius: var(--pcd-radius, 10px);
    background: #b45309;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.ebs__pay:hover, .ebs__pay:focus { background: #92400e; color: #fff; }