/*
 * Open checkout layout for the payment pages (donations, event tickets,
 * revenue purchases, sponsorships, membership signup + plan change, pledge
 * payment, invoice payment, saved payment-method update).
 * Spec: docs/superpowers/specs/2026-10-10-payment-pages-design.md
 * Design reference: output/payment-preview/index.html
 *
 * The pages used to sit in a gradient section with a max-w-xl glass card and
 * a second glass card around every section. They now sit on the flat page
 * background in a wider, invisible reading column, and sections are separated
 * by whitespace and hairlines. Choices, inputs, alerts, modals and the Stripe
 * Payment Element keep their own borders.
 *
 * This file is plain (unlayered) CSS loaded after Tailwind, so it beats
 * layered Tailwind utilities on the elements it targets. Everything is scoped
 * under .checkout-page -- the global .glass-card / .summary-card / .step-dot
 * rules are untouched for the rest of the app.
 *
 * Colours mirror the app's tokens: white / gray-200 / gray-500 / gray-900 with
 * emerald in light, and the true-black remap in dark (#000 page, #262626
 * hairlines, #a3a3a3 muted text, emerald-400 accents).
 */

.checkout-page {
  --checkout-bg: #ffffff;
  --checkout-ink: #111827;
  --checkout-muted: #6b7280;
  --checkout-line: #e5e7eb;
  --checkout-accent: #047857;
  --checkout-dot: #e5e7eb;
  --checkout-dot-ink: #6b7280;
  --checkout-field-line: #d1d5db;
  --checkout-btn: #047857;
  --checkout-btn-hover: #065f46;
  --checkout-btn-gold: #b45309;
  --checkout-btn-gold-hover: #92400e;
  --checkout-soft: #f3f4f6;
  /* Read by the organization identity row (detail_pages.css). */
  --detail-line: var(--checkout-line);
  --detail-accent: var(--checkout-accent);
  --detail-tint: #ecfdf5;
  --checkout-disabled-bg: #e5e7eb;
  --checkout-disabled-ink: #6b7280;

  background: var(--checkout-bg);
  color: var(--checkout-ink);
}

@media (prefers-color-scheme: dark) {
  .checkout-page {
    --checkout-bg: #000000;
    --checkout-ink: #f5f5f5;
    --checkout-muted: #a3a3a3;
    --checkout-line: #262626;
    --checkout-accent: #34d399;
    --checkout-dot: #262626;
    --checkout-dot-ink: #a3a3a3;
    --checkout-field-line: #404040;
    /* white on #047857 is 5.5:1 (emerald-600 was 3.8:1) */
    --checkout-btn: #047857;
    --checkout-btn-hover: #065f46;
    --checkout-btn-gold: #b45309;
    --checkout-btn-gold-hover: #92400e;
    --checkout-soft: #141414;
    --detail-tint: #052e1f;
    --checkout-disabled-bg: #262626;
    --checkout-disabled-ink: #a3a3a3;
  }
}

/* --- Reading column ---------------------------------------------------- *
   No card: just a centred column. 720px keeps inputs and the pay button at a
   comfortable length on desktop while giving phones the full width minus a
   20px gutter (the old card + section padding left ~270px of a 390px phone). */
.checkout-page .checkout-shell {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 20px 20px 32px;
  /* The old glass card clipped (overflow: hidden) anything too wide, e.g. a
     long unbroken suggestion title in "Popular choice: ...". Without the card,
     long words wrap instead of pushing the page sideways. */
  overflow-wrap: break-word;
}

.checkout-page .checkout-shell--wide {
  max-width: 1100px;
}

@media (min-width: 768px) {
  .checkout-page .checkout-shell {
    padding: 40px 32px 48px;
  }
}

/* --- Header ------------------------------------------------------------ */
/* The organization identity row (shared/detail_pages/_header) tops the
   column; the shell already pads the top, so the row only pads below.
   (.checkout-shell outranks detail_pages.css whatever the load order.) */
.checkout-page .checkout-shell .detail-header {
  padding: 0 0 16px;
  margin-bottom: 20px;
}

.checkout-page .checkout-title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  color: var(--checkout-ink);
}

/* --- Sections ---------------------------------------------------------- *
   A section is a heading plus its fields, with no background of its own.
   Consecutive sections get a hairline so the page still reads in chunks. */
.checkout-page .checkout-section > h3,
.checkout-page .checkout-section-title {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--checkout-ink);
}

/* "~" + :not(.hidden), not "+": a section JS hides (donation contact fields
   when "Donate Anonymously" is ticked) must not leave the next one with a
   rule and gap above it. */
.checkout-page .checkout-section:not(.hidden) ~ .checkout-section,
.checkout-page .checkout-rule {
  border-top: 1px solid var(--checkout-line);
  padding-top: 28px;
  margin-top: 28px;
}

/* --- Order summary ----------------------------------------------------- *
   Was a gradient glass card with a tinted header strip. Now a ruled block:
   hairline above and below, rows on the page background. */
.checkout-page .checkout-summary {
  border-top: 1px solid var(--checkout-line);
  border-bottom: 1px solid var(--checkout-line);
  padding-block: 20px;
}

.checkout-page .checkout-summary-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--checkout-ink);
  margin-bottom: 16px;
}

/* --- Tip selector ------------------------------------------------------ *
   shared/_tip_selector is an outlined card: a soft header strip with
   "Support Sifr" and the live tip amount, then the helper, select and
   custom-tip fields. Every surface that renders it is a .checkout-page. */
.checkout-page .checkout-tip {
  border: 1px solid var(--checkout-field-line);
  border-radius: 16px;
  overflow: hidden;
}

.checkout-page .checkout-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--checkout-soft);
  border-bottom: 1px solid var(--checkout-line);
  color: var(--checkout-ink);
}

.checkout-page .checkout-tip-amount {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--checkout-accent);
}

.checkout-page .checkout-tip-body {
  padding: 16px 18px 18px;
}

/* --- Progress steps ---------------------------------------------------- *
   The payment controllers own the .step-dot / .step-line state classes
   (active, completed, hidden) and some rewrite a dot's number, so each dot
   keeps its number only and the label sits beside it in .checkout-step. A
   skipped (hidden) dot takes its label with it. */
.checkout-page .checkout-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 28px;
}

.checkout-page .checkout-step {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 6.5rem;
  text-align: center;
}

.checkout-page .checkout-step:has(> .step-dot.hidden) {
  display: none;
}

.checkout-page .checkout-steps .step-line {
  flex: 1 1 auto;
  width: auto;
  min-width: 12px;
  height: 2px;
  margin: 15px 6px 0;
}

.checkout-page .checkout-steps .step-dot {
  width: 32px;
  height: 32px;
  background: var(--checkout-dot);
  color: var(--checkout-dot-ink);
  box-shadow: none;
  transform: none;
}

/* emerald-600, not the global emerald-500: white digits on 500 are ~2.5:1. */
.checkout-page .checkout-steps .step-dot.active,
.checkout-page .checkout-steps .step-dot.completed {
  background: #059669;
  color: #ffffff;
}

/* Completed dots are tappable to go back: give them a 44px hit area. */
.checkout-page .checkout-steps .step-dot::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.checkout-page .checkout-step-label {
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--checkout-muted);
  overflow-wrap: anywhere;
}

.checkout-page .checkout-step:has(> .step-dot.active) .checkout-step-label {
  color: var(--checkout-accent);
  font-weight: 600;
}

.checkout-page .checkout-step:has(> .step-dot.completed) .checkout-step-label {
  color: var(--checkout-ink);
}

/* A slot whose meaning changes when another step is skipped (revenue: the
   contact dot is hidden and the third dot becomes Payment). */
.checkout-page .checkout-step-label--alt {
  display: none;
}

.checkout-page .checkout-steps:has(.step-dot.hidden) .checkout-step-label--alt {
  display: inline;
}

.checkout-page .checkout-steps:has(.step-dot.hidden) .checkout-step-label--default {
  display: none;
}

@media (min-width: 640px) {
  .checkout-page .checkout-step-label {
    font-size: 0.8125rem;
  }
}

/* Four or five steps on a phone leave ~40px per label, so only the current
   step's label shows, as a caption under the dots. visibility (not display)
   keeps the skip/alt-label display rules above in charge. */
@media (max-width: 479px) {
  .checkout-page .checkout-steps:has(> .checkout-step ~ .checkout-step ~ .checkout-step ~ .checkout-step) {
    position: relative;
    padding-bottom: 1.75rem;
  }

  .checkout-page .checkout-steps:has(> .checkout-step ~ .checkout-step ~ .checkout-step ~ .checkout-step) .checkout-step-label {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    font-size: 0.8125rem;
    visibility: hidden;
  }

  .checkout-page .checkout-steps:has(> .checkout-step ~ .checkout-step ~ .checkout-step ~ .checkout-step) .checkout-step:has(> .step-dot.active) .checkout-step-label {
    visibility: visible;
  }
}

/* The gold Last 10 Nights theme recolours dots via .gold-theme; keep it. */
.checkout-page .checkout-steps .step-dot.gold-theme.active,
.checkout-page .checkout-steps .step-dot.gold-theme.completed {
  background: #f59e0b;
}

/* --- Controls ---------------------------------------------------------- *
   48px fields and 44px buttons; no font-size override (the amount field is
   deliberately larger, and every glass input is already >= 16px). */
.checkout-page .glass-input,
.checkout-page .glass-select {
  min-height: 48px;
}

/* The 50%-alpha glass border was tuned against a grey card; on the flat page
   it all but disappears in light mode. This one rule sits in the same cascade
   layer as .glass-input (see app/assets/tailwind/application.css) instead of
   unlayered, so validation utilities in the markup (border-red-300, ...) and
   the emerald / gold focus borders still beat it. */
@layer utilities.app-components {
  .checkout-page :is(.glass-input, .glass-select):not(:focus) {
    border-color: var(--checkout-field-line);
  }
}

.checkout-page .glass-btn-primary {
  min-height: 48px;
}

.checkout-page :is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid var(--checkout-accent);
  outline-offset: 2px;
}

/* --- Stripe Payment Element mount ------------------------------------- *
   The Element draws its own bordered fields; the old glass box around it
   doubled the border. */
.checkout-page .checkout-stripe-mount {
  min-height: 100px;
}

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

/* --- Choices ----------------------------------------------------------- *
   Options a person picks between (billing cycle, current vs new plan, the
   chosen session bar) keep an outline -- it is information, not decoration.
   The owning controller still toggles ring-2 / ring-emerald-500 for the
   selection; the tint follows it. */
.checkout-page .checkout-choice {
  border: 1px solid var(--checkout-line);
  border-radius: 14px;
  background: transparent;
}

.checkout-page .checkout-choice.ring-2 {
  border-color: #10b981;
  background: rgb(16 185 129 / 0.06);
}

/* --- Sponsorship ------------------------------------------------------- *
   Tier selection uses the wide column; the steps, intake and payment stay
   at the reading width inside it. Tier cards are choices, so they keep an
   outline in the tier's configured colour -- just without the glass blur,
   glow and nested price panel. */
.checkout-page .checkout-narrow {
  max-width: 656px;
  margin-inline: auto;
}

.checkout-page .checkout-tier {
  border: 1px solid color-mix(in srgb, var(--tier-color, #10b981) 55%, var(--checkout-line));
  border-radius: 16px;
  background: transparent;
}

/* Volunteer time slots: the controller marks the chosen slot with
   border-teal-500 + bg-teal-50 and resets the rest to border-transparent,
   which used to sit on a glass box. On the flat page an unselected slot gets
   a hairline instead, so it still reads as a choice. */
.checkout-page .checkout-slot.border-transparent {
  border-color: var(--checkout-line);
}

/* --- Notices ------------------------------------------------------------ *
   Alerts keep their tint and outline (they carry information) but lose the
   frosted blur, which has nothing to blur on a flat page. */
.checkout-page .glass-alert {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Same for inputs: their frosted blur also blurred the absolutely
   positioned "$" prefix sitting beneath them (pledge pay, edit amount). */
.checkout-page .glass-input {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* --- Flat controls ------------------------------------------------------ *
   No glow or drop shadows anywhere on a checkout page: a selected state is a
   solid emerald fill or an emerald outline, focus is a plain 2px outline (the
   rule above), and primary buttons are one solid colour. The payment
   controllers still add and remove the same classes (.active, .selected,
   .donation-tab-active, ring-2, glass-btn-primary <-> glass-btn-primary-gold);
   only what those classes look like changes here. */

/* Inputs: the frosted focus glow comes from --tw-shadow, so zero that and
   the 2px focus ring (and the red validation ring) stay. */
.checkout-page :is(.glass-input, .glass-select, .qty-stepper, .payment-method-btn) {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

.checkout-page .qty-stepper,
.checkout-page .payment-method-btn.active {
  box-shadow: none;
}

/* Primary buttons: solid emerald, no gradient, no glow. */
.checkout-page :is(.glass-btn-primary, .glass-btn-primary-gold, .tier-btn-primary) {
  background-image: none;
  box-shadow: none;
}

.checkout-page .glass-btn-primary {
  background-color: var(--checkout-btn);
  color: #ffffff;
}

.checkout-page .glass-btn-primary:hover {
  background-color: var(--checkout-btn-hover);
}

.checkout-page .glass-btn-primary-gold {
  background-color: var(--checkout-btn-gold);
  color: #ffffff;
}

.checkout-page .glass-btn-primary-gold:hover {
  background-color: var(--checkout-btn-gold-hover);
}

/* Sponsorship tier button keeps the tier's configured colour, flat. */
.checkout-page .tier-btn-primary,
.checkout-page .tier-btn-primary:hover {
  background-color: var(--tier-color, var(--checkout-btn));
  background-image: none;
  box-shadow: none;
}

.checkout-page .tier-btn-primary:hover {
  background-color: color-mix(in srgb, var(--tier-color, var(--checkout-btn)) 85%, #000000);
}

/* A disabled primary button is a grey fill, not a faded emerald one. */
.checkout-page :is(.glass-btn-primary, .glass-btn-primary-gold):is(:disabled, [aria-disabled='true']) {
  background-color: var(--checkout-disabled-bg);
  color: var(--checkout-disabled-ink);
  cursor: not-allowed;
  opacity: 1;
}

/* Segmented controls (donation type tabs, quick amounts, generic segmented):
   a hairline track with a solid emerald indicator. */
.checkout-page :is(.donation-tabs, .amount-group, .segmented-control) {
  background: var(--checkout-soft);
  background-image: none;
  border: 1px solid var(--checkout-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.checkout-page :is(.donation-tabs, .amount-group)::before {
  background-color: var(--checkout-btn);
  box-shadow: none;
}

/* The Last 10 Nights theme keeps a gold indicator, just without its glow. */
.checkout-page :is(.last-ten-nights-theme .donation-tabs, .last-ten-nights-theme .amount-group, .amount-group.gold-theme)::before {
  background-color: var(--checkout-btn-gold);
}

.checkout-page .segmented-btn:hover {
  background: transparent;
}

.checkout-page .segmented-btn:is(.active, [aria-selected='true']) {
  background: var(--checkout-bg);
  box-shadow: none;
  outline: 1.5px solid var(--checkout-accent);
  outline-offset: -1.5px;
}

/* Selected rows (ticket / item quantity, session picker) and the donation
   pill's focus state: a solid emerald border, not a tinted halo. */
.checkout-page :is(.variation-row.is-active, .session-row.is-selected) {
  box-shadow: none;
  border-color: #10b981;
}

.checkout-page .donation-input {
  box-shadow: none;
}

.checkout-page .donation-input:focus-within {
  box-shadow: none;
  border-color: #10b981;
}

.checkout-page .donation-input:has(input[aria-invalid='true']) {
  box-shadow: none;
  border-color: #d97706;
}

/* The brief glow pulse the donation controller plays on locale changes. */
.checkout-page .l10n-glow-pulse {
  animation: none;
  box-shadow: none;
}

/* Inputs and the Last 10 Nights gold focus: a hard 2px ring, never a glow. */
.checkout-page .glass-input-gold:focus,
.checkout-page :is(.last-ten-nights-theme .glass-input, .last-ten-nights-theme .glass-select):focus {
  box-shadow: 0 0 0 2px rgb(245 158 11 / 0.25);
}

.checkout-page .last-ten-nights-theme :is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline-color: #b45309;
}

/* Sponsorship tier cards: outline only. */
.checkout-page .checkout-tier {
  box-shadow: none;
}

/* --- Info notices -------------------------------------------------------- *
   Pledge summary, "what will happen", tip note: neutral hairline + ink text,
   not blue. Success / error / warning keep their tint (they carry meaning),
   and the Last 10 Nights gold variant keeps its gold. */
.checkout-page .glass-alert-info:not(.last-ten-nights-theme *) {
  background: transparent;
  border-color: var(--checkout-line);
  color: var(--checkout-ink);
}

.checkout-page .glass-alert-info:not(.last-ten-nights-theme *) [class*='text-blue-'] {
  color: inherit;
}

.checkout-page .glass-alert-info:not(.last-ten-nights-theme *) svg[class*='text-blue-'] {
  color: var(--checkout-muted);
}

.checkout-page .glass-alert-info:not(.last-ten-nights-theme *) [class*='bg-blue-'] {
  background: var(--checkout-soft);
}
/*
 * Open layout for the event, fundraiser and revenue detail pages.
 * Spec: docs/superpowers/specs/2026-10-10-detail-pages-design.md
 * Design reference: output/detail-pages-flat-preview/index.html
 *
 * The pages used to sit in a gradient section with a max-w-4xl glass card and
 * a second glass card around every section. They now sit on the flat page
 * background: an organization identity row (star on the right), the title,
 * then the image and About text in a wide column with the details and actions
 * in a narrow aside. Phones stack image, aside, then About, so the action
 * comes before a long description.
 *
 * Plain (unlayered) CSS loaded after Tailwind, scoped under .detail-page --
 * the global .glass-card / .glass-card-subtle / star-button rules are
 * untouched elsewhere. Colours follow checkout.css: white / gray with emerald
 * in light, the true-black remap in dark (dark mode follows the OS).
 */

.detail-page {
  --detail-bg: #ffffff;
  --detail-ink: #111827;
  --detail-muted: #6b7280;
  --detail-line: #e5e7eb;
  --detail-soft: #f3f4f6;
  --detail-accent: #047857;
  --detail-tint: #ecfdf5;
  --detail-on-accent: #ffffff;

  background: var(--detail-bg);
  color: var(--detail-ink);
}

@media (prefers-color-scheme: dark) {
  .detail-page {
    --detail-bg: #000000;
    --detail-ink: #f5f5f5;
    --detail-muted: #a3a3a3;
    --detail-line: #262626;
    --detail-soft: #171717;
    --detail-accent: #34d399;
    --detail-tint: #052e1f;
    --detail-on-accent: #022c22;
  }
}

/* --- Shell --------------------------------------------------------------- */
.detail-page .detail-shell {
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
  padding: 0 40px 32px;
}

/* --- Organization identity row + star ------------------------------------ *
   The identity row (shared/detail_pages/_header) also tops the checkout
   pages, so its rules match .checkout-page too; checkout.css maps the
   --detail-* colours it reads. */
:is(.detail-page, .checkout-page) .detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--detail-line);
}

:is(.detail-page, .checkout-page) .detail-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

:is(.detail-page, .checkout-page) .detail-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

:is(.detail-page, .checkout-page) .detail-logo--icon {
  display: grid;
  place-items: center;
  color: var(--detail-accent);
  background: var(--detail-tint);
}

:is(.detail-page, .checkout-page) .detail-logo--icon svg {
  width: 24px;
  height: 24px;
}

:is(.detail-page, .checkout-page) .detail-org-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.detail-page .detail-star {
  flex-shrink: 0;
}

/* The shared star partial's floating-circle look (white/80 + blur + shadow)
   was for an overlay on the card. In the header it is a flat outlined
   circle -- the same shape as everywhere else the star appears. */
.detail-page .detail-star button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--detail-line);
  background: var(--detail-bg);
  box-shadow: none;
  backdrop-filter: none;
}

.detail-page .detail-star button[aria-pressed="true"] {
  border-color: var(--detail-accent);
}

/* --- Back link, intro, notices ------------------------------------------- */
.detail-page .detail-back {
  padding: 18px 0 14px;
}

.detail-page .detail-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  color: var(--detail-muted);
}

.detail-page .detail-back a:hover {
  color: var(--detail-ink);
}

.detail-page .detail-intro {
  padding: 4px 0 30px;
}

.detail-page .detail-intro h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

.detail-page .detail-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.detail-page .detail-notices {
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
}

/* --- Grid: image + About on the left, aside on the right ------------------ */
.detail-page .detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 64px;
  align-items: start;
}

.detail-page .detail-media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--detail-soft);
}

.detail-page .detail-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-page .detail-aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  padding-top: 6px;
  overflow-wrap: anywhere;
}

.detail-page .detail-description {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  max-width: 76ch;
  padding-top: 32px;
  overflow-wrap: anywhere;
}

.detail-page .detail-description h2 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.detail-page .detail-description .prose {
  font-size: 15px;
  line-height: 1.8;
  color: var(--detail-muted);
}

.detail-page .detail-description img {
  max-width: 100%;
  height: auto;
}

.detail-page .detail-description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --- Aside: facts, progress, actions -------------------------------------- */
.detail-page .detail-aside-heading {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.detail-page .detail-facts {
  margin: 0;
}

.detail-page .detail-fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--detail-line);
}

.detail-page .detail-fact:first-child {
  padding-top: 0;
}

.detail-page .detail-fact > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--detail-accent);
}

.detail-page .detail-fact-label {
  margin: 0 0 3px;
  font-size: 12px;
  color: var(--detail-muted);
}

.detail-page .detail-fact-value {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.detail-page .detail-fact-value small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--detail-muted);
}

.detail-page .detail-price {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.detail-page .detail-calendar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--detail-accent);
}

/* Progress: same partial and maths as everywhere else; only its glass box
   goes away inside the detail aside. */
.detail-page .detail-progress > .glass-card-subtle {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.detail-page .detail-actions {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.detail-page .detail-aside > .detail-actions:first-child,
.detail-page .detail-progress:not(:has(*)) + .detail-actions {
  margin-top: 0;
}

/* Hidden progress (no goal / showProgress off) renders nothing. */
.detail-page .detail-progress:not(:has(*)) {
  display: none;
}

.detail-page .detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: background-color 150ms ease, filter 150ms ease;
}

.detail-page .detail-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.detail-page .detail-btn--primary {
  background: var(--detail-accent);
  border: 1px solid var(--detail-accent);
  color: var(--detail-on-accent);
}

.detail-page .detail-btn--primary:hover {
  filter: brightness(0.94);
}

.detail-page .detail-btn--secondary {
  border: 1px solid var(--detail-line);
  color: var(--detail-accent);
}

.detail-page .detail-btn--secondary:hover {
  background: var(--detail-tint);
}

.detail-page .detail-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--detail-muted);
}

.detail-page .detail-secure svg {
  width: 15px;
  height: 15px;
}

.detail-page :is(a, button):focus-visible {
  outline: 3px solid var(--detail-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.detail-page .detail-btn:focus-visible {
  border-radius: 10px;
}

/* Sticky aside only when the window is tall enough to show all of it; short
   windows and phones keep normal flow so nothing is trapped off-screen. */
@media (min-width: 951px) and (min-height: 760px) {
  .detail-page .detail-aside {
    position: sticky;
    top: 24px;
  }
}

/* --- Breakpoints ----------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 950px) {
  .detail-page .detail-shell {
    padding-inline: 24px;
  }

  .detail-page .detail-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
    column-gap: 32px;
  }
}

@media (max-width: 720px) {
  .detail-page .detail-shell {
    padding-inline: 20px;
  }

  .detail-page .detail-header {
    padding: 16px 0;
  }

  .detail-page .detail-back {
    padding: 8px 0 6px;
  }

  .detail-page .detail-intro {
    padding-bottom: 22px;
  }

  .detail-page .detail-grid {
    display: flex;
    flex-direction: column;
  }

  .detail-page .detail-grid > * {
    width: 100%;
  }

  .detail-page .detail-media {
    border-radius: 9px;
  }

  .detail-page .detail-aside {
    padding-top: 24px;
  }

  .detail-page .detail-description {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid var(--detail-line);
  }

  .detail-page .detail-fact {
    padding: 14px 0;
  }
}

@media (min-width: 1700px) {
  .detail-page .detail-shell {
    max-width: 1480px;
  }

  .detail-page .detail-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-page .detail-btn {
    transition: none;
  }
}
/*
 * Home "What's new" Spotlight deck (app/views/home/_section_whats_new +
 * _whats_new_card, whats-new-deck Stimulus controller). Design reference:
 * output/whats-new-design/spotlight-mixed.html.
 *
 * Colours are the app's Tailwind tokens, not the preview's: light uses
 * white / gray-200 / gray-500 / gray-900 with emerald-50 / emerald-700, and
 * dark is the true-black remap (#000 card, #262626 hairlines, #141414 media
 * panel, emerald-400 accents, emerald glow) -- no brand-tinted surfaces.
 *
 * Everything is scoped under .home-whats-new; no tag selectors leak out.
 */

.home-whats-new {
  --wn-paper: #ffffff;
  --wn-ink: #111827;
  --wn-muted: #6b7280;
  --wn-line: #e5e7eb;
  --wn-green: #047857;
  --wn-panel: #ecfdf5;
  --wn-mark: #ecfdf5;
  --wn-glow: none;
}

@media (prefers-color-scheme: dark) {
  .home-whats-new {
    --wn-paper: #000000;
    --wn-ink: #f5f5f5;
    --wn-muted: #a3a3a3;
    --wn-line: #262626;
    --wn-green: #34d399;
    --wn-panel: #141414;
    --wn-mark: rgb(2 44 34 / 0.6);
    --wn-glow: 0 8px 32px 0 rgb(16 185 129 / 0.15);
  }
}

/* Inactive slides and the pre-Stimulus controls must stay hidden even where
   a flex/grid rule below sets display. */
.home-whats-new [hidden] {
  display: none !important;
}

.home-whats-new__slides {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Card ------------------------------------------------------------- */

.home-whats-new__card {
  display: grid;
  grid-template-columns: minmax(170px, 40%) minmax(0, 1fr);
  min-height: 285px;
  overflow: hidden;
  border: 1px solid var(--wn-line);
  border-radius: 18px;
  background: var(--wn-paper);
  box-shadow: var(--wn-glow);
  color: var(--wn-ink);
}

/* --- Media panel: photo over a type fallback --------------------------- */

.home-whats-new__media {
  position: relative;
  display: grid;
  grid-template: "stack" minmax(0, 1fr) / minmax(0, 1fr);
  min-width: 0;
  background: var(--wn-panel);
  color: var(--wn-green);
}

.home-whats-new__fallback {
  grid-area: stack;
  padding: 24px 22px 56px;
}

/* Out of flow so a photo's own proportions never size the card; it covers
   the fallback (whose mark is positioned, hence the explicit layers).
   Photos are 16:9 and the side panel is taller than that, so the whole
   photo shows, centred on the panel colour, instead of being cropped. */
.home-whats-new__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-whats-new__category {
  position: relative;
  z-index: 2;
  grid-area: stack;
  align-self: end;
  justify-self: start;
  margin: 0 0 22px 22px;
  font-size: 12px;
  line-height: 1.4;
}

/* A contained photo leaves panel showing around it; the fallback underneath
   must not peek out there. */
.home-whats-new__media:has(.home-whats-new__image:not([hidden])) .home-whats-new__fallback {
  visibility: hidden;
}

/* On a photo the label needs its own ground to stay legible. */
.home-whats-new__media:has(.home-whats-new__image:not([hidden])) .home-whats-new__category {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wn-paper);
  font-weight: 700;
}

.home-whats-new__date {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.4px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* --- Organization mark: logo over initials ----------------------------- */

.home-whats-new__mark {
  position: relative;
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wn-mark);
  color: var(--wn-green);
  font-weight: 700;
  line-height: 1;
}

.home-whats-new__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--wn-paper);
}

.home-whats-new__mark--inline {
  width: 25px;
  height: 25px;
  font-size: 9px;
}

/* The panel shows bare, large initials (the preview's type symbol); a logo
   sits in a rounded square instead. */
.home-whats-new__mark--panel {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: transparent;
  font-size: 40px;
  letter-spacing: -2px;
  justify-items: start;
}

/* --- Content ----------------------------------------------------------- */

.home-whats-new__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 26px;
}

.home-whats-new__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--wn-muted);
}

.home-whats-new__meta time {
  flex-shrink: 0;
}

.home-whats-new__new {
  color: var(--wn-green);
  font-weight: 700;
}

.home-whats-new__title {
  margin: 6px 0 18px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}

.home-whats-new__title--long {
  font-size: 20px;
  line-height: 1.3;
}

.home-whats-new__org {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wn-muted);
}

.home-whats-new__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--wn-line);
  font-size: 13px;
}

/* Right-aligned whether or not a date shares the row. */
.home-whats-new__cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
  min-height: 44px;
  color: var(--wn-green);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.home-whats-new__cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-whats-new__cta:focus-visible,
.home-whats-new__arrow:focus-visible {
  outline: 2px solid var(--wn-green);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Pagination -------------------------------------------------------- */

.home-whats-new__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--wn-muted);
}

.home-whats-new__status {
  flex-shrink: 0;
}

.home-whats-new__progress {
  flex: 1;
  max-width: 170px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--wn-line);
}

.home-whats-new__progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--wn-green);
  transition: width 0.2s ease;
}

.home-whats-new__arrows {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.home-whats-new__arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--wn-line);
  border-radius: 12px;
  background: var(--wn-paper);
  color: var(--wn-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.home-whats-new__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .home-whats-new__progress > span {
    transition: none;
  }
}

/* --- Phone: media panel above the text --------------------------------- */

@media (max-width: 480px) {
  /* One shared floor so the arrows don't jump between ordinary cards. */
  .home-whats-new__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 380px;
  }

  .home-whats-new__media {
    min-height: 150px;
  }

  /* Above the text the panel takes the photo's own 16:9, so it fills
     edge to edge with nothing cropped. */
  .home-whats-new__media:has(.home-whats-new__image:not([hidden])) {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .home-whats-new__image {
    object-fit: cover;
  }

  .home-whats-new__fallback {
    display: flex;
    align-items: center;
    padding: 28px 110px 20px 20px;
  }

  .home-whats-new__category {
    align-self: start;
    justify-self: end;
    margin: 12px 16px 0 0;
    font-size: 11px;
  }

  .home-whats-new__date {
    font-size: 22px;
  }

  .home-whats-new__content {
    padding: 20px;
  }

  .home-whats-new__title {
    font-size: 24px;
  }

  .home-whats-new__title--long {
    font-size: 19px;
  }
}
/*
 * My account pages (donations, payments, subscriptions, memberships, pledges,
 * events, tickets, orders, tax documents, notifications, settings, account).
 * Spec: docs/superpowers/specs/2026-10-10-my-views-design.md
 *
 * SHARED stylesheet: generic vocabulary only. Resource-specific styles belong
 * in their own files. Every selector is scoped under .my-page; dark mode
 * follows the OS (prefers-color-scheme) and an optional `.dark` class on <html>.
 *
 * Class vocabulary
 *   Shell      .my-page .my-shell .my-content .my-account-nav (.my-nav-*)
 *   Header     .my-header .my-back .my-title .my-description
 *   Summary    .my-summary > .my-summary-item (dl: dt label, dd value)
 *   List       .my-group .my-group-heading .my-record (one anchor per row)
 *              .my-record-icon .my-record-body .my-record-title .my-record-sub
 *              .my-record-meta .my-record-amount .my-chevron
 *   Controls   .my-list-controls .my-chips .my-chip .my-count
 *              .my-list-scope .my-no-matches .my-empty
 *   Status     .my-status + .my-status--{success,info,warning,danger,neutral}
 *   Notice     .my-notice (+ --warning, --danger, --info)
 *   Facts      dl.my-facts > div > dt + dd
 *   Actions    .my-action, .my-action--primary, .my-action--text, .my-action--danger
 *   Progress   .my-progress > span (width set inline, 0-100%)
 *   Detail     .my-detail-grid > .my-primary .my-actions .my-details .my-support
 */

.my-page {
  --my-bg: #ffffff;
  --my-ink: #203b30;
  --my-muted: #64766d;
  --my-line: #dfe8e2;
  --my-accent: #13754e;
  --my-soft: #f5f8f6;
  --my-tint: #eaf5ee;
  --my-on: #ffffff;
  --my-amber: #8a520a;
  --my-amber-bg: #fff5e6;
  --my-red: #ae3b36;
  --my-red-bg: #fff0ef;
  --my-blue: #326691;
  --my-blue-bg: #edf4fb;
  background: var(--my-bg);
  color: var(--my-ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100%;
}

.dark .my-page {
  --my-bg: #000000;
  --my-ink: #f5f5f5;
  --my-muted: #a3a3a3;
  --my-line: #262626;
  --my-accent: #34d399;
  --my-soft: #141414;
  --my-tint: #062a1d;
  --my-on: #000000;
  --my-amber: #fbbf24;
  --my-amber-bg: #2a1f08;
  --my-red: #f87171;
  --my-red-bg: #2a1212;
  --my-blue: #60a5fa;
  --my-blue-bg: #0f1d2e;
}

/* The app's dark theme follows the OS (Tailwind `dark:` is media-based); the
   `.dark` class form above is kept for any explicit toggle. */
@media (prefers-color-scheme: dark) {
  .my-page {
    --my-bg: #000000;
    --my-ink: #f5f5f5;
    --my-muted: #a3a3a3;
    --my-line: #262626;
    --my-accent: #34d399;
    --my-soft: #141414;
    --my-tint: #062a1d;
    --my-on: #000000;
    --my-amber: #fbbf24;
    --my-amber-bg: #2a1f08;
    --my-red: #f87171;
    --my-red-bg: #2a1212;
    --my-blue: #60a5fa;
    --my-blue-bg: #0f1d2e;
  }
}

.my-page *,
.my-page *::before,
.my-page *::after { box-sizing: border-box; }

.my-page .my-shell { max-width: 1440px; margin-inline: auto; }
.my-page .my-content { min-width: 0; max-width: 1180px; padding: 28px 22px; margin-inline: auto; }
.my-page .my-account-nav { display: none; }
.my-page [hidden] { display: none !important; }
.my-page :focus-visible { outline: 3px solid var(--my-accent); outline-offset: 4px; }
.my-page a { color: var(--my-accent); }
/* Own icons only (class-less inline svgs); shared partials size theirs with Tailwind classes. */
.my-page svg:not([class]) { width: 20px; height: 20px; flex-shrink: 0; }

/* Sidebar (desktop web only; not rendered in Turbo Native) */
.my-page .my-nav-group { margin-bottom: 24px; }
.my-page .my-nav-heading { margin: 0 12px 8px; font-size: 12px; color: var(--my-muted); }
.my-page .my-nav-list { list-style: none; margin: 0; padding: 0; }
.my-page .my-nav-item {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px; margin-bottom: 2px;
  border-radius: 7px; font-size: 14px; color: var(--my-muted); text-decoration: none;
}
.my-page .my-nav-item:hover { background: var(--my-soft); color: var(--my-ink); }
.my-page .my-nav-item[aria-current="page"] { background: var(--my-tint); color: var(--my-accent); font-weight: 650; }

/* Header */
.my-page .my-header { margin-bottom: 24px; }
.my-page .my-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px;
  font-size: 13px; color: var(--my-muted); text-decoration: none;
}
.my-page .my-back:hover { color: var(--my-ink); }
.my-page .my-back svg { width: 16px; height: 16px; }
.my-page .my-title {
  margin: 0; font-size: 28px; line-height: 1.18; letter-spacing: -0.03em; font-weight: 660;
  overflow-wrap: anywhere; color: var(--my-ink);
}
.my-page .my-description { margin: 9px 0 0; max-width: 64ch; color: var(--my-muted); }

/* Summary strip */
.my-page .my-summary {
  display: flex; flex-wrap: wrap; gap: 16px 30px; margin: 0 0 24px; padding: 20px 0;
  border-block: 1px solid var(--my-line);
}
.my-page .my-summary-item { min-width: 104px; }
.my-page .my-summary-item dt { margin-bottom: 4px; font-size: 12px; color: var(--my-muted); }
.my-page .my-summary-item dd { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 630; letter-spacing: -0.02em; overflow-wrap: anywhere; }

/* List controls */
.my-page .my-list-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.my-page .my-chips { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 1px solid var(--my-line); }
.my-page .my-chip {
  min-height: 44px; padding: 0 2px 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: 14px; color: var(--my-muted); cursor: pointer; text-align: left;
}
.my-page .my-chip[aria-pressed="true"] { color: var(--my-accent); border-bottom-color: var(--my-accent); font-weight: 650; }
.my-page .my-list-scope,
.my-page .my-count { margin: 0; font-size: 12px; color: var(--my-muted); }
.my-page .my-count { margin-top: 4px; }
.my-page .my-no-matches { padding: 28px 0; color: var(--my-muted); border-bottom: 1px solid var(--my-line); }
.my-page .my-no-matches p { margin: 0 0 4px; }
.my-page .my-no-matches-title { color: var(--my-ink); font-weight: 650; }
.my-page .my-empty { padding: 36px 0; border-block: 1px solid var(--my-line); color: var(--my-muted); }
.my-page .my-empty-title { margin: 0 0 6px; font-size: 18px; color: var(--my-ink); }
.my-page .my-empty p { margin: 0 0 16px; max-width: 56ch; }

/* Groups and rows */
.my-page .my-group { margin-top: 24px; }
.my-page .my-group-heading { margin: 0 0 4px; font-size: 18px; line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; }
.my-page .my-group-heading span { font-size: 13px; font-weight: 400; color: var(--my-muted); }
.my-page .my-record {
  display: flex; align-items: center; gap: 14px; padding-block: 20px; border-bottom: 1px solid var(--my-line);
  color: var(--my-ink); text-decoration: none;
}
.my-page a.my-record:hover { background: var(--my-soft); }
.my-page .my-record-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--my-soft); color: var(--my-accent);
}
.my-page .my-record-body { flex: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
.my-page .my-record-title { font-size: 16px; line-height: 1.4; font-weight: 620; }
.my-page .my-record-sub { font-size: 13px; color: var(--my-muted); }
.my-page .my-record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--my-muted); }
.my-page .my-record-amount { flex-shrink: 0; max-width: 40%; text-align: right; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.my-page .my-record-amount small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--my-muted); }
.my-page .my-chevron { width: 16px; height: 16px; color: var(--my-muted); }

/* Status pills (always carry a text label) */
.my-page .my-status {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 600; line-height: 1.6; background: var(--my-tint); color: var(--my-accent);
}
.my-page .my-status--success { background: var(--my-tint); color: var(--my-accent); }
.my-page .my-status--info { background: var(--my-blue-bg); color: var(--my-blue); }
.my-page .my-status--warning { background: var(--my-amber-bg); color: var(--my-amber); }
.my-page .my-status--danger { background: var(--my-red-bg); color: var(--my-red); }
.my-page .my-status--neutral { background: var(--my-soft); color: var(--my-muted); }

/* Notices */
.my-page .my-notice {
  margin: 20px 0; padding: 16px 18px; border: 1px solid var(--my-line); border-radius: 9px;
  background: var(--my-soft); overflow-wrap: anywhere;
}
.my-page .my-notice p { margin: 4px 0 0; font-size: 13px; color: var(--my-muted); }
.my-page .my-notice strong { font-size: 14px; }
.my-page .my-notice--info { background: var(--my-blue-bg); border-color: transparent; }
.my-page .my-notice--warning { background: var(--my-amber-bg); border-color: transparent; }
.my-page .my-notice--danger { background: var(--my-red-bg); border-color: transparent; }

/* Facts */
.my-page .my-facts { margin: 0; }
.my-page .my-facts > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--my-line); font-size: 14px;
}
.my-page .my-facts dt { flex-shrink: 0; color: var(--my-muted); }
.my-page .my-facts dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

/* Actions */
.my-page .my-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--my-line); border-radius: 8px; background: var(--my-bg); color: var(--my-ink);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.my-page .my-action:hover { background: var(--my-soft); }
.my-page .my-action--primary { background: var(--my-accent); border-color: var(--my-accent); color: var(--my-on); }
.my-page .my-action--primary:hover { background: var(--my-accent); filter: brightness(0.94); }
.my-page .my-action--text { border-color: transparent; background: none; padding-inline: 4px; color: var(--my-accent); }
.my-page .my-action--text:hover { background: none; text-decoration: underline; }
.my-page .my-action--danger { color: var(--my-red); border-color: var(--my-line); }

/* Progress */
.my-page .my-progress { display: block; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 20px; background: var(--my-line); }
.my-page .my-progress > span { display: block; height: 100%; border-radius: 20px; background: var(--my-accent); }

/* Detail geometry */
.my-page .my-detail-grid { display: grid; gap: 24px; }
.my-page .my-primary, .my-page .my-actions, .my-page .my-details, .my-page .my-support { min-width: 0; }

@media (min-width: 1024px) {
  .my-page .my-shell:has(.my-account-nav) { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
  .my-page .my-account-nav { display: block; border-right: 1px solid var(--my-line); padding: 28px 18px; }
  .my-page .my-content { width: 100%; padding: 28px 44px; }
  .my-page .my-title { font-size: 34px; }
  .my-page .my-detail-grid { grid-template-columns: minmax(0, 1fr) 285px; column-gap: 36px; }
  .my-page .my-primary { grid-column: 1; grid-row: 1; }
  .my-page .my-actions { grid-column: 2; grid-row: 1; }
  .my-page .my-details { grid-column: 1; grid-row: 2; }
  .my-page .my-support { grid-column: 2; grid-row: 2; }
}

@media (max-width: 480px) {
  .my-page .my-record-amount { max-width: 34%; font-size: 15px; }
  .my-page .my-chevron { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .my-page * { scroll-behavior: auto !important; transition: none !important; }
}
/* My account: updates, notification settings and account deletion.
   Shared tokens and vocabulary come from my_pages.css. */

/* Notifications inbox */
.my-page .my-notification { align-items: flex-start; }
.my-page .my-notification-link { color: var(--my-ink); text-decoration: none; overflow-wrap: anywhere; }
.my-page .my-notification-link:hover { text-decoration: underline; color: var(--my-accent); }
.my-page .my-notification-excerpt {
  font-size: 14px; color: var(--my-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.my-page .my-notification-time { display: block; margin-bottom: 18px; font-size: 13px; color: var(--my-muted); }
.my-page .my-notification-body { max-width: 68ch; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.65; }

/* Settings */
.my-page .my-settings { max-width: 680px; }
.my-page .my-setting-group { margin-bottom: 36px; }
.my-page .my-setting-list { border-top: 1px solid var(--my-line); }
.my-page .my-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding-block: 10px; border-bottom: 1px solid var(--my-line); cursor: pointer;
}
.my-page .my-setting--static { cursor: default; color: var(--my-muted); }
.my-page .my-setting-label { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.my-page .my-setting > input[type="checkbox"], .my-page .my-setting > button { flex-shrink: 0; }
.my-page .my-setting-note { margin: 8px 0 0; font-size: 13px; color: var(--my-muted); }
.my-page .my-setting--static .my-setting-note { margin: 0; }
.my-page .my-setting-group > .my-setting-list + .my-setting-note,
.my-page .my-setting-group > .my-setting + .my-time-fields { margin-top: 14px; }
.my-page .my-org-link { color: var(--my-accent); }
.my-page .my-setting-org { margin: 14px 0 20px; min-width: 0; }
.my-page .my-setting-org-name { margin: 0 0 4px; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.my-page .my-setting-org .my-setting:first-of-type { border-top: 1px solid var(--my-line); }
.my-page .my-time-fields { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.my-page .my-time-field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.my-page .my-time-field label { font-size: 13px; font-weight: 600; }
.my-page .my-time-input {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--my-line); border-radius: 8px;
  background: var(--my-bg); color: var(--my-ink); font: inherit; color-scheme: light dark;
}

/* Account deletion */
.my-page .my-account-delete { max-width: 640px; }
.my-page .my-delete-section { margin-bottom: 28px; }
.my-page .my-delete-list { margin: 10px 0 0; padding-left: 20px; list-style: disc; color: var(--my-muted); }
.my-page .my-delete-list li { margin-bottom: 6px; }
.my-page .my-delete-copy { margin: 10px 0 0; color: var(--my-muted); }
.my-page .my-delete-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.my-page .my-delete-form { margin: 0; display: flex; }
.my-page .my-delete-form .my-action { width: 100%; }
.my-page .my-account-delete .my-action--danger { background: transparent; border-color: var(--my-red); }
.my-page .my-account-delete .my-action--danger:hover { background: var(--my-red-bg); }
@media (min-width: 640px) {
  .my-page .my-delete-actions { flex-direction: row; align-items: center; }
  .my-page .my-delete-form .my-action { width: auto; }
}
/*
 * My account pages: commitments (subscriptions, memberships) and admission
 * (events, tickets). Builds on the shared vocabulary in my_pages.css; every
 * selector is scoped under .my-page and colors come from the --my-* tokens.
 */

/* Index: status rows inside an organization section */
.my-page .my-subgroup { margin-top: 12px; }
.my-page .my-subgroup-heading {
  margin: 14px 0 0; font-size: 14px; line-height: 1.4; font-weight: 620; color: var(--my-muted);
}
.my-page .my-subgroup-heading span { font-weight: 400; }

/* Detail: status line, flash spacing, section titles */
.my-page .my-detail-status { margin: -12px 0 20px; }
.my-page .my-flash { margin-bottom: 16px; }
.my-page .my-section-title { margin: 0 0 4px; font-size: 18px; line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; }
.my-page .my-fact--danger { color: var(--my-red); }

/* Detail: plan amount (open, not boxed) */
.my-page .my-plan { padding-bottom: 20px; border-bottom: 1px solid var(--my-line); }
.my-page .my-plan-label { margin: 0 0 4px; font-size: 13px; color: var(--my-muted); }
.my-page .my-plan-value {
  margin: 0; font-size: 40px; line-height: 1.1; font-weight: 660; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.my-page .my-plan-value span { margin-left: 2px; font-size: 17px; font-weight: 450; letter-spacing: 0; color: var(--my-muted); }
.my-page .my-plan-next { margin: 10px 0 0; font-size: 14px; color: var(--my-ink); }

/* Detail: management panel (routine actions first, ending actions last) */
.my-page .my-manage { padding: 18px; border: 1px solid var(--my-line); border-radius: 10px; }
.my-page .my-manage-title { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.my-page .my-manage-list { display: flex; flex-direction: column; gap: 8px; }
.my-page .my-manage-end { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--my-line); }
.my-page .my-manage-list + .my-manage-end { margin-top: 14px; }
.my-page .my-manage-title + .my-manage-end { margin-top: 0; padding-top: 0; border-top: 0; }
.my-page .my-manage form { margin: 0; }
.my-page .my-manage .my-action { width: 100%; }

/* On wide screens the management panel spans both rows so a tall panel does
   not open a gap between the amount and the details. */
@media (min-width: 1024px) {
  .my-page .my-plan-value { font-size: 46px; }
  .my-page .my-detail-grid--manage { align-items: start; }
  .my-page .my-detail-grid--manage .my-actions { grid-row: 1 / span 2; }
}

/* Events and tickets: date tile, section notes, sub-facts */
.my-page .my-date-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  width: 46px; height: 50px; border: 1px solid var(--my-line); border-radius: 10px; background: var(--my-bg);
  line-height: 1.1;
}
.my-page .my-date-tile span { font-size: 11px; font-weight: 600; color: var(--my-accent); }
.my-page .my-date-tile strong { font-size: 18px; font-weight: 680; color: var(--my-ink); font-variant-numeric: tabular-nums; }
.my-page .my-group-note { margin: 0 0 4px; font-size: 13px; color: var(--my-muted); }
.my-page .my-fact-sub { display: block; font-size: 12px; font-weight: 400; color: var(--my-muted); }

/* Ticket passes: a native horizontal scroll region that snaps per pass.
   Every rendered pass (canceled included) stays in the flow; the my-tickets
   controller only adds Previous/Next and the position. */
.my-page .my-pass-track {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: 4px; margin-top: 12px;
}
.my-page .my-pass {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
  border: 1px solid var(--my-line); border-radius: 14px; overflow: hidden; background: var(--my-bg);
}
.my-page .my-pass-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: var(--my-tint); overflow-wrap: anywhere;
}
.my-page .my-pass--canceled .my-pass-top { background: var(--my-red-bg); }
.my-page .my-pass-name { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 650; }
.my-page .my-pass-number { margin: 2px 0 0; font-size: 12px; color: var(--my-muted); font-variant-numeric: tabular-nums; }
.my-page .my-pass-body { padding: 22px 8px 20px; }
.my-page .my-pass-wallet { display: flex; justify-content: center; }
.my-page .my-pass-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.my-page .my-pass-nav {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--my-line); border-radius: 8px; background: var(--my-bg); color: var(--my-ink); cursor: pointer;
}
.my-page .my-pass-nav:hover:not(:disabled) { background: var(--my-soft); }
.my-page .my-pass-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.my-page .my-pass-position { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  .my-page .my-detail-grid--passes { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .my-page .my-detail-grid--passes .my-details { grid-column: 2; grid-row: 1; }
  /* An order with no renderable pass has only its facts: keep them in the
     first row instead of the shared grid's second-row slot. */
  .my-page .my-detail-grid--facts-only .my-details { grid-column: 1; grid-row: 1; }
}
/*
 * Giving records, pledge detail, orders and tax documents (Lane B).
 * Resource-specific additions to my_pages.css; every selector is scoped to
 * .my-page and uses the shared --my-* tokens (which carry the dark values).
 */

/* Rows whose money is not counted stay listed but visually quieter */
.my-page .my-record-amount--muted { color: var(--my-muted); }

/* Detail pages: amount + facts */
.my-page .my-amount-label { margin: 0 0 4px; font-size: 13px; color: var(--my-muted); }
.my-page .my-amount-figure { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 660; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.my-page .my-primary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 14px; color: var(--my-muted); }
.my-page .my-section-title { margin: 0 0 4px; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.my-page .my-action-stack { display: flex; flex-direction: column; gap: 10px; }
.my-page .my-action-stack .my-action { width: 100%; }
.my-page .my-support-note { margin: 0; font-size: 13px; color: var(--my-muted); }
.my-page .my-details, .my-page .my-support { margin-top: 4px; }

/* Pledge detail */
.my-page .my-progress--lg { height: 10px; margin-top: 18px; }
.my-page .my-pledge-figures { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 14px 0 0; }
.my-page .my-pledge-figures dt { font-size: 12px; color: var(--my-muted); }
.my-page .my-pledge-figures dd { margin: 2px 0 0; font-size: 20px; font-weight: 630; overflow-wrap: anywhere; }

/* Orders */
.my-page .my-record-more { font-size: 13px; font-weight: 400; color: var(--my-muted); }
.my-page .my-pickup { padding: 18px 12px 8px; border: 1px solid var(--my-line); border-radius: 10px; background: var(--my-soft); text-align: center; }
.my-page .my-pickup .my-section-title { margin-bottom: 12px; }
.my-page .my-line-items { list-style: none; margin: 8px 0 0; padding: 0; }
.my-page .my-line-items li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--my-line);
}
.my-page .my-line-name { min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 550; }
.my-page .my-line-name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--my-muted); }
.my-page .my-line-total { flex-shrink: 0; font-weight: 600; }

/* Tax documents */
.my-page .my-tax-org { margin-top: 14px; padding: 18px; border: 1px solid var(--my-line); border-radius: 10px; background: var(--my-soft); }
.my-page .my-tax-org-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 8px; }
.my-page .my-tax-org-title { min-width: 0; flex: 1 1 220px; }
.my-page .my-tax-org-title h3 { margin: 0; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.my-page .my-tax-org-title p { margin: 2px 0 0; font-size: 13px; color: var(--my-muted); }
.my-page .my-collapsible { overflow: hidden; transition: height 0.3s ease-in-out; }
.my-page .my-receipts { list-style: none; margin: 4px 0 0; padding: 0; }
.my-page .my-receipts li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--my-line);
}
.my-page .my-receipts li:last-child { border-bottom: 0; }
.my-page .my-receipt-info { min-width: 0; }
.my-page .my-receipt-title { margin: 0; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.my-page .my-receipt-meta { margin: 2px 0 0; font-size: 12px; color: var(--my-muted); }
.my-page .my-receipts .my-action { flex-shrink: 0; }
/*
 * Zakat calculator (/my/zakat). Resource-specific additions to my_pages.css;
 * every selector is scoped to .my-page and uses the shared --my-* tokens
 * (which carry the dark values). Spec:
 * docs/superpowers/specs/2026-10-11-zakat-calculator-design.md
 */

.my-page .zakat-privacy {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 24px; padding: 14px 16px;
  border-radius: 9px; background: var(--my-tint); color: var(--my-ink); font-size: 14px; max-width: 72ch;
}
.my-page .zakat-privacy::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; background: var(--my-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.my-page .zakat-layout { display: grid; gap: 28px; }
.my-page .zakat-inputs { min-width: 0; }

/* Sections: quiet, divided by rules like the rest of /my */
.my-page .zakat-section { padding: 18px 0 22px; border-top: 1px solid var(--my-line); }
.my-page .zakat-section:first-child { border-top: 0; padding-top: 0; }
.my-page .zakat-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  font-size: 18px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; list-style: none;
}
.my-page .zakat-summary::-webkit-details-marker { display: none; }
.my-page .zakat-summary::after {
  content: ""; width: 9px; height: 9px; margin-left: 4px; flex-shrink: 0;
  border-right: 2px solid var(--my-muted); border-bottom: 2px solid var(--my-muted);
  transform: rotate(45deg) translateY(-3px);
}
.my-page details[open] > .zakat-summary::after { transform: rotate(-135deg) translateY(-1px); }
.my-page .zakat-summary span:first-child { flex: 1; }
.my-page .zakat-summary [data-zakat-subtotal] {
  font-size: 15px; font-weight: 500; color: var(--my-muted); font-variant-numeric: tabular-nums;
}
.my-page details[open] > .zakat-summary { margin-bottom: 6px; }

/* Fields */
.my-page .zakat-field, .my-page .zakat-choice, .my-page .zakat-holding { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.my-page .zakat-label { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 600; color: var(--my-ink); }
.my-page .zakat-hint { margin: 6px 0 0; font-size: 13px; color: var(--my-muted); max-width: 64ch; }
.my-page .zakat-money, .my-page .zakat-holding-row {
  display: flex; align-items: center; max-width: 360px; min-height: 46px;
  border: 1px solid var(--my-line); border-radius: 8px; background: var(--my-bg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* The whole box carries focus: one accent border with a soft halo. */
.my-page .zakat-money:focus-within, .my-page .zakat-holding-row:focus-within {
  border-color: var(--my-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--my-accent) 20%, transparent);
}
.my-page .zakat-currency { padding: 0 2px 0 16px; color: var(--my-muted); }
.my-page .zakat-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px 0 8px; border: 0; background: transparent;
  color: var(--my-ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
}
.my-page .zakat-holding-row .zakat-input { padding-left: 16px; }
/* @tailwindcss/forms draws its own blue ring and border on a focused field;
   the box above already shows focus, so the field itself stays plain. */
.my-page .zakat-input:focus { outline: none; box-shadow: none; border-color: transparent; }
.my-page .zakat-unit:focus { outline: none; box-shadow: none; border-color: var(--my-line); }
.my-page .zakat-input::placeholder { color: var(--my-muted); opacity: 0.6; }
.my-page .zakat-unit {
  height: 44px; padding: 0 28px 0 10px; border: 0; border-left: 1px solid var(--my-line); border-radius: 0 8px 8px 0;
  background-color: transparent; color: var(--my-ink); font: inherit; font-size: 14px;
}
.my-page .zakat-money:has([aria-invalid="true"]), .my-page .zakat-holding-row:has([aria-invalid="true"]) {
  border-color: var(--my-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--my-red) 20%, transparent);
}
.my-page .zakat-holding .zakat-money, .my-page .zakat-holding .zakat-holding-row { margin-top: 10px; }
.my-page .zakat-prices { display: grid; gap: 0 20px; }

/* Segmented choice */
.my-page .zakat-segment {
  display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--my-soft); width: 100%; max-width: 460px;
}
.my-page .zakat-segment-option { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.my-page .zakat-segment-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.my-page .zakat-segment-option span {
  display: flex; align-items: center; justify-content: center; flex: 1; min-height: 40px; padding: 6px 10px; border-radius: 7px;
  font-size: 14px; line-height: 1.3; text-align: center; color: var(--my-muted);
}
.my-page .zakat-segment-option input:checked + span { background: var(--my-bg); color: var(--my-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--my-line); }
.my-page .zakat-segment-option input:focus-visible + span { outline: 3px solid var(--my-accent); outline-offset: 2px; }

.my-page .zakat-note { margin: 4px 0 0; padding-top: 18px; border-top: 1px solid var(--my-line); font-size: 13px; color: var(--my-muted); }

/* Result card: the one place with weight */
.my-page .zakat-result {
  align-self: start; padding: 22px; border: 1px solid var(--my-line); border-radius: 12px; background: var(--my-soft);
}
.my-page .zakat-totals { margin: 0 0 18px; }
.my-page .zakat-totals > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--my-line); font-size: 14px;
}
.my-page .zakat-totals dt { color: var(--my-muted); }
.my-page .zakat-totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.my-page .zakat-state { margin: 0 0 18px; font-size: 15px; font-weight: 600; }
.my-page .zakat-due-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--my-muted); }
.my-page .zakat-due {
  margin: 2px 0 0; font-size: 40px; line-height: 1.1; font-weight: 680; letter-spacing: -0.03em;
  color: var(--my-accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.my-page .zakat-state .zakat-hint { margin-top: 4px; }
.my-page .zakat-give, .my-page .zakat-clear {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 9px 16px;
  border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.my-page .zakat-give { background: var(--my-accent); color: var(--my-on); border: 1px solid var(--my-accent); }
.my-page .zakat-give:hover { filter: brightness(0.94); }
.my-page .zakat-clear { margin-top: 8px; border: 1px solid var(--my-line); background: var(--my-bg); color: var(--my-ink); }
.my-page .zakat-clear:hover { background: var(--my-soft); }
.my-page .zakat-disclaimer { margin: 16px 0 0; font-size: 12px; color: var(--my-muted); }

/* Phone: compact bar pinned above the bottom navigation */
.my-page .zakat-bar {
  position: sticky; bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); z-index: 20;
  margin: 0 -22px; padding: 12px 22px; border-top: 1px solid var(--my-line);
  background: var(--my-bg); font-size: 15px; font-weight: 600;
}
body.native .my-page .zakat-bar { bottom: env(safe-area-inset-bottom, 0px); }
.my-page .zakat-bar p { margin: 0; }
.my-page .zakat-bar strong { color: var(--my-accent); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .my-page .zakat-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .my-page .zakat-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
  .my-page .zakat-result { position: sticky; top: calc(3.5rem + 24px); grid-column: 2; grid-row: 1; }
  .my-page .zakat-bar { display: none; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */