/* ==========================================================================
   Upper Hand — Shared components
   Used by the public site, donor portal and admin. One copy, everywhere.
   ========================================================================== */

/* ---- Icon ----------------------------------------------------------------- */
.icon {inline-size: 1.25em;block-size: 1.25em;flex-shrink: 0;}
.icon-sm { inline-size: 1em; block-size: 1em; }
.icon-lg { inline-size: 1.5rem; block-size: 1.5rem; }

/* ---- Pillar color context --------------------------------------------------- */
[data-pillar]                  { --pillar: var(--color-primary); }
[data-pillar="education"]      { --pillar: var(--pillar-education); }
[data-pillar="social-welfare"] { --pillar: var(--pillar-welfare); }
[data-pillar="legal"]          { --pillar: var(--pillar-legal); }
[data-pillar="medical"]        { --pillar: var(--pillar-medical); }
[data-pillar="skylark"]        { --pillar: var(--pillar-skylark); }

/* ---- Brand lockup ------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.brand-mark { inline-size: 2.5rem; block-size: 2.5rem; flex-shrink: 0; }
.brand-mark .mark-tile { fill: var(--color-primary); }
.brand-mark .mark-gift { fill: var(--accent-400); }
.brand-mark .mark-hand { stroke: #fff; }
.brand-word { display: grid; line-height: 1; white-space: nowrap; }
.brand-name {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 1.3125rem; letter-spacing: -0.02em;
}
.brand-sub {
  margin-block-start: 0.3rem;
  font-size: 0.625rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted);
}
.brand.on-dark { color: #fff; }
.brand.on-dark .brand-sub { color: rgb(255 255 255 / 0.7); }
.brand.on-dark .mark-tile { fill: #fff; }
.brand.on-dark .mark-hand { stroke: var(--brand-700); }

/* ---- Buttons ----------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-surface-hover);
  --btn-h: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--btn-h);
  padding-inline: 1.25rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-button);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-button);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-base) var(--ease-spring);
}
.btn:hover { background: var(--btn-bg-hover); }
/* Feedback on press, instantly — not on release */
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-primary {
  --btn-bg: var(--color-primary); --btn-fg: var(--color-on-primary);
  --btn-border: transparent; --btn-bg-hover: var(--color-primary-hover);
}
.btn-donate {
  --btn-bg: var(--color-donate); --btn-fg: var(--color-on-donate);
  --btn-border: transparent; --btn-bg-hover: var(--color-donate-hover);
  box-shadow: var(--shadow-donate);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--weight-bold);
}
.btn-help {
  --btn-bg: var(--brand-600); --btn-fg: #fff;
  --btn-border: transparent; --btn-bg-hover: var(--brand-700);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-700) 35%, transparent);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--weight-bold);
}
.btn-soft {
  --btn-bg: var(--color-primary-soft); --btn-fg: var(--color-primary-ink);
  --btn-border: transparent; --btn-bg-hover: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
}
.btn-ghost {
  --btn-bg: transparent; --btn-border: transparent; --btn-bg-hover: var(--color-surface-hover);
}
.btn-danger {
  --btn-bg: var(--color-danger); --btn-fg: #fff; --btn-border: transparent;
  --btn-bg-hover: color-mix(in srgb, var(--color-danger) 88%, #000);
}
.btn-on-dark {
  --btn-bg: rgb(255 255 255 / 0.12); --btn-fg: #fff;
  --btn-border: rgb(255 255 255 / 0.28); --btn-bg-hover: rgb(255 255 255 / 0.2);
  backdrop-filter: var(--material-blur);
}
.btn-sm { --btn-h: 2.25rem; padding-inline: 0.9rem; font-size: 0.8125rem; }
.btn-lg { --btn-h: 3.25rem; padding-inline: 1.75rem; font-size: var(--text-md); }
.btn-block { inline-size: 100%; }
.btn-icon { padding-inline: 0; inline-size: var(--btn-h); }
.btn .icon { inline-size: 1.125em; block-size: 1.125em; }

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inline-size: 1.1em; block-size: 1.1em;
  border: 2px solid var(--btn-fg); border-inline-end-color: transparent;
  border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: var(--color-primary); font-weight: var(--weight-semibold);
}
.link .icon { transition: transform var(--dur-base) var(--ease-spring); }
.link:hover .icon { transform: translateX(3px); }

/* ---- Badges & tags ----------------------------------------------------------- */
.badge {
  --badge-bg: var(--color-bg-sunken); --badge-fg: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background: var(--badge-bg); color: var(--badge-fg);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1.3; white-space: nowrap;
}
.badge-dot::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor;
}
.badge-primary { --badge-bg: var(--color-primary-soft); --badge-fg: var(--color-primary-ink); }
.badge-success { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success); }
.badge-warning { --badge-bg: var(--color-warning-soft); --badge-fg: var(--color-warning); }
.badge-danger  { --badge-bg: var(--color-danger-soft);  --badge-fg: var(--color-danger); }
.badge-info    { --badge-bg: var(--color-info-soft);    --badge-fg: var(--color-info); }
.badge-donate  { --badge-bg: var(--accent-100);         --badge-fg: var(--accent-700); }
[data-theme="dark"] .badge-donate { --badge-bg: rgb(239 160 33 / 0.16); --badge-fg: var(--accent-300); }
.badge-solid   { --badge-bg: var(--color-text);         --badge-fg: var(--color-bg); }
.badge-pillar  {
  --badge-bg: color-mix(in srgb, var(--pillar) 12%, var(--color-surface));
  --badge-fg: color-mix(in srgb, var(--pillar) 82%, var(--color-text));
}
.badge-glass {
  --badge-bg: rgb(255 255 255 / 0.82); --badge-fg: var(--stone-900);
  backdrop-filter: var(--material-blur);
}
.badge-lock { --badge-bg: color-mix(in srgb, var(--pillar-legal) 12%, var(--color-surface)); --badge-fg: var(--pillar-legal); }

/* ---- Progress -------------------------------------------------------------------- */
.progress {
  --value: 0%;
  position: relative; block-size: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-sunken);
  overflow: hidden;
}
.progress-bar {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transition: inline-size var(--dur-slow) var(--ease-spring);
}
/* Any raised amount paints a sliver; once the share is wider than that, width stays the true percent. */
.progress.is-funded .progress-bar { min-inline-size: 0.25rem; }
.progress-donate .progress-bar { background: linear-gradient(90deg, var(--accent-600), var(--accent-400)); }
.progress-lg { block-size: 0.75rem; }
.progress-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.progress-meta strong { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* Spent vs remaining for one purpose. Deep teal is spent; pale teal is still unspent. */
.fund-meters { display: grid; gap: var(--space-5); }
.fund-meters-key { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.fund-meters-key li { display: inline-flex; align-items: center; gap: 0.4rem; }
.fund-meters-key i, .fund-meter-stat i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 2px; flex-shrink: 0; }
.fund-meters-key .is-spent, .fund-meter-stat .is-spent { background: var(--brand-700); }
.fund-meters-key .is-left, .fund-meter-stat .is-left { background: var(--brand-200); }
.fund-meter { display: grid; gap: var(--space-2); }
.fund-meter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.fund-meter-head > div:first-child { min-inline-size: 0; }
.fund-meter-title { font-weight: var(--weight-semibold); }
.fund-meter-sub { margin-block-start: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }
.fund-meter-ratio { flex-shrink: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--brand-800); }
.fund-meter.is-over .fund-meter-ratio { color: var(--color-danger); }
.fund-meter-bar {
  display: flex; block-size: 0.8rem; border-radius: var(--radius-full); overflow: hidden;
  background: var(--brand-100);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-800) 10%, transparent);
}
.fund-meter-bar span { display: block; block-size: 100%; inline-size: var(--w); }
.fund-meter-bar .is-spent {
  background: linear-gradient(90deg, var(--brand-800), var(--brand-500));
  box-shadow: 2px 0 0 var(--color-surface);
}
.fund-meter-bar .is-spent.is-full { box-shadow: none; }
.fund-meter.is-over .fund-meter-bar { background: var(--color-danger-soft); }
.fund-meter.is-over .fund-meter-bar .is-spent { background: linear-gradient(90deg, #9d2424, var(--color-danger)); }
.fund-meter-stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.fund-meter-stat { display: inline-flex; align-items: center; gap: 0.4rem; }
.fund-meter-stat strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.fund-meter-stat em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--color-text-subtle); }
.fund-meters.is-compact { gap: var(--space-4); }
.fund-meters.is-compact .fund-meter-bar { block-size: 0.55rem; }
.fund-meters.is-compact .fund-meter-stats { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fund-meter-bar .is-spent { transform-origin: left center; animation: fund-meter-in var(--dur-slow) var(--ease-spring) both; }
}
@keyframes fund-meter-in { from { transform: scaleX(0); } }

/* ---- Card base ------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) ease;
}
.card-interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.card-interactive:active { transform: translateY(-1px) scale(0.995); transition-duration: var(--dur-press); }
.card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--color-border);
}
.card-title { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: var(--weight-semibold); line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.card-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.card-text { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
.card :is(.btn, .link, .badge-glass) { position: relative; z-index: 1; }

.media {
  position: relative; aspect-ratio: var(--ratio, 16 / 10);
  background: var(--color-bg-sunken); overflow: hidden;
}
.media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-spring); }
.card-interactive:hover .media img { transform: scale(1.04); }
.media-badges { position: absolute; inset: var(--space-3); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); pointer-events: none; }

.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-text-subtle); }
.meta-row span { display: inline-flex; align-items: center; gap: 0.35em; }

/* Pillar card */
.card-pillar { min-block-size: 22rem; color: #fff; border: 0; background: var(--stone-900); }
.card-pillar .media { position: absolute; inset: 0; aspect-ratio: auto; }
.card-pillar .media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 10%, rgb(0 0 0 / 0.5) 45%, color-mix(in srgb, var(--pillar) 50%, #000) 85%);
}
.card-pillar .card-body { position: relative; justify-content: flex-end; }
.card-pillar .card-title { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.02em; }
.card-pillar .card-text { color: rgb(255 255 255 / 0.82); }
.pillar-icon {
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--pillar) 14%, var(--color-surface)); color: var(--pillar);
}
.card-pillar .pillar-icon { background: rgb(255 255 255 / 0.16); color: #fff; backdrop-filter: var(--material-blur); }

/* Project / campaign funding block */
.funding { display: grid; gap: var(--space-2); }
.funding-raised { font-size: 1.125rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.funding-goal { color: var(--color-text-subtle); font-size: var(--text-sm); }

/* Story card */
.card-story .media { --ratio: 4 / 3; }
.card-story blockquote { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.4; letter-spacing: -0.01em; }

/* Team card */
.card-team { text-align: center; align-items: center; padding: var(--space-6); gap: var(--space-3); }
.card-team .avatar { --size: 5.5rem; }

/* ---- Stat ------------------------------------------------------------------------ */
.stat { display: grid; gap: var(--space-1); }
.stat-value {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.stat-icon { color: var(--color-primary); margin-block-end: var(--space-2); }

/* KPI tile (dashboards) */
.kpi {
  display: grid; gap: var(--space-2); padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.kpi-value { font-size: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-delta { display: inline-flex; align-items: center; gap: 0.25em; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.kpi-delta.up { color: var(--color-success); }
.kpi-delta.down { color: var(--color-danger); }

/* ---- Avatar --------------------------------------------------------------------- */
.avatar {
  --size: 2.5rem;
  display: inline-grid; place-items: center; flex-shrink: 0;
  inline-size: var(--size); block-size: var(--size);
  border-radius: 50%; overflow: hidden;
  background: var(--color-primary-soft); color: var(--color-primary-ink);
  font-size: calc(var(--size) * 0.38); font-weight: var(--weight-semibold);
}
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.avatar-sm { --size: 2rem; }

/* Label / value pairs (details, summaries), on every page */
.meta-list { display: grid; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.meta-list div { display: flex; justify-content: space-between; gap: var(--space-3); }
.meta-list dt { color: var(--color-text-subtle); }
.meta-list dd { margin: 0; font-weight: var(--weight-medium); text-align: end; }

/* ---- Forms ---------------------------------------------------------------------- */
/* minmax(0) lets long select values ellipsize instead of widening the field.
   align-content: start keeps label, input and hint packed at the top: when a neighbour in the same row is
   taller (a hint, an upload box), this field must not stretch its rows apart or grow its input. */
.field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-2); }
.field > .hint, .field > .field-hint { margin: 0; }
.field > .hint:empty, .field > .field-hint:empty { display: none; } /* an empty hint must not add a gap */
.label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.label .req { color: var(--color-danger); margin-inline-start: 0.15em; }
.label .optional { color: var(--color-text-subtle); font-weight: var(--weight-regular); }
.hint { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.45; }
.field-error { display: none; align-items: center; gap: 0.35em; font-size: var(--text-xs); color: var(--color-danger); font-weight: var(--weight-medium); }
.field.has-error .field-error { display: flex; }
.field.has-error :is(.input, .select, .textarea) { border-color: var(--color-danger); }
.field.has-error :is(.input, .select, .textarea):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent); }

.input, .select, .textarea {
  inline-size: 100%;
  min-block-size: 2.875rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-md); /* 16px — prevents iOS zoom on focus */
  line-height: 1.4;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--stone-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--color-bg-sunken); color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; }
.textarea { min-block-size: 7.5rem; resize: vertical; }
/* Browser autofill: only the text is filled in — the field keeps its own background and text colour
   (light and dark theme) instead of the browser's blue or yellow tint. The browser's colours are
   forced with !important, so they are held off with a transition that never finishes; Firefox
   tints with a filter instead. Kept as separate rules: an unknown selector would drop a whole list. */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: currentColor;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color 600000s 0s, color 600000s 0s;
}
input:autofill, textarea:autofill, select:autofill {
  filter: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color 600000s 0s, color 600000s 0s;
}
.select {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c766d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.1rem;
}
[dir="rtl"] .select { background-position: left 0.8rem center; }

/* Select menu — the native <select> is kept (hidden) for forms; JS renders this in its place */
.cselect { position: relative; min-inline-size: 0; }
.cselect-native { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.cselect-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  text-align: start; cursor: pointer; background-image: none; padding-inline-end: 0.75rem;
}
.cselect-trigger .cselect-value { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cselect-trigger .cselect-placeholder { color: var(--color-text-subtle); }
.cselect-chevron { inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-text-subtle); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-spring); }
.cselect-trigger[aria-expanded="true"] { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.cselect-trigger[aria-expanded="true"] .cselect-chevron { transform: rotate(180deg); color: var(--color-primary); }
.cselect-trigger:active { transform: scale(0.99); }

.cselect-list {
  position: fixed; z-index: var(--z-overlay);
  display: flex; flex-direction: column;
  max-block-size: min(20rem, 60vh); overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  transform-origin: top center;
  animation: cselect-in var(--dur-base) var(--ease-spring);
}
.cselect-list.flip { transform-origin: bottom center; }
.cselect-scroll { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.375rem; }
.cselect-list.is-closing { animation: cselect-out var(--dur-fast) ease forwards; }
.cselect-list:focus { outline: none; }
@keyframes cselect-in  { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@keyframes cselect-out { to   { opacity: 0; transform: translateY(-4px) scale(0.97); } }

.cselect-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.625rem 0.75rem; border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) ease;
}
.cselect-option.is-active { background: var(--color-surface-hover); }
.cselect-option[aria-selected="true"] { color: var(--color-primary-ink); font-weight: var(--weight-semibold); }
.cselect-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.cselect-option-text { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
.cselect-option-desc { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.cselect-check { inline-size: 1rem; block-size: 1rem; color: var(--color-primary); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-bounce); flex-shrink: 0; }
.cselect-option[aria-selected="true"] .cselect-check { opacity: 1; transform: none; }
.cselect-dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; flex-shrink: 0; background: var(--dot, var(--color-primary)); }
.cselect-group { padding: 0.625rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); }
.cselect-group:not(:first-child) { margin-block-start: 0.25rem; border-block-start: 1px solid var(--color-border); }
.cselect-sheet-title { display: none; }
.cselect-search { flex-shrink: 0; margin: 0.375rem 0.375rem 0; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); font: inherit; font-size: var(--text-sm); color: var(--color-text); }
.cselect-search:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.cselect-option[hidden] { display: none; }
.cselect-none { padding: 0.75rem; font-size: var(--text-sm); color: var(--color-text-subtle); text-align: center; }

/* Phones: the list rises as a bottom sheet over a scrim, and returns to the bottom */
.cselect-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); animation: fade-in var(--dur-base) ease; }
.cselect-scrim.is-closing { animation: fade-out var(--dur-fast) ease forwards; }
@media (max-width: 40rem) {
  .cselect-list {
    inset: auto 0 0 0 !important; inline-size: auto !important;
    max-block-size: 70vh; padding-block-start: var(--space-2);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-block-end: 0;
    animation: sheet-up var(--dur-base) var(--ease-spring);
  }
  .cselect-list.is-closing { animation: sheet-down var(--dur-fast) ease-in forwards; }
  .cselect-sheet-title { display: block; padding: var(--space-3) var(--space-3) var(--space-2); font-weight: var(--weight-semibold); text-align: center; }
  .cselect-sheet-title::before { content: ""; display: block; inline-size: 2.25rem; block-size: 5px; margin: 0 auto var(--space-3); border-radius: 3px; background: var(--color-border-strong); }
  .cselect-scroll { padding: 0 var(--space-3) max(var(--space-4), env(safe-area-inset-bottom)); }
  .cselect-option { padding: 0.875rem 0.75rem; font-size: var(--text-md); }
}

.input-group {
  display: flex; align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-input);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input-group:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
/* The group draws the border, so its input is 2px shorter: a "PKR" field is exactly as tall as any other */
.input-group .input { border: 0; box-shadow: none; background: transparent; min-block-size: calc(2.875rem - 2px); }
.input-affix {display: grid;place-items: center;padding-inline: 0.875rem;color: var(--color-text-muted);font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.input-affix + .input { padding-inline-start: 0; }
/* A link prefix ("site.org/project/") runs straight into the typed slug, so it reads as one address */
.input-affix.is-path { padding-inline-end: 0; font-size: var(--text-md); font-weight: var(--weight-regular); white-space: nowrap; }

/* Checkbox / radio */
.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); line-height: 1.45; }
.check input {
  appearance: none; flex-shrink: 0; margin-block-start: 0.1rem;
  inline-size: 1.25rem; block-size: 1.25rem;
  border: 1.5px solid var(--color-border-strong); border-radius: 6px;
  background: var(--color-surface) center / 0.85rem no-repeat;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring);
  cursor: pointer;
}
.check input[type="radio"] { border-radius: 50%; }
.check input:active { transform: scale(0.9); }
.check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.check input:checked {
  background-color: var(--color-primary); border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 32%, transparent 36%); background-size: 100%; }
.check-desc { display: block; color: var(--color-text-subtle); font-size: var(--text-xs); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.switch input {
  appearance: none; position: relative; flex-shrink: 0;
  inline-size: 2.75rem; block-size: 1.625rem;
  border-radius: var(--radius-full); background: var(--stone-300);
  transition: background-color var(--dur-base) var(--ease-spring);
  cursor: pointer;
}
.switch input::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform var(--dur-base) var(--ease-bounce), inline-size var(--dur-fast) ease;
}
.switch input:active::after { inline-size: 1.5rem; }
.switch input:checked { background: var(--color-success); }
.switch input:checked::after { transform: translateX(1.125rem); }
.switch input:checked:active::after { transform: translateX(0.875rem); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-1.125rem); }
.switch input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Segmented control (One-time / Monthly) */
.segmented {
  --seg-count: 2; --seg-index: 0;
  position: relative; display: grid; grid-template-columns: repeat(var(--seg-count), 1fr);
  padding: 4px; border-radius: var(--radius-full); background: var(--color-bg-sunken);
}
.segmented::before {
  content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px;
  inline-size: calc((100% - 8px) / var(--seg-count));
  border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-sm);
  transform: translateX(calc(100% * var(--seg-index)));
  transition: transform var(--dur-base) var(--ease-spring);
}
[dir="rtl"] .segmented::before { transform: translateX(calc(-100% * var(--seg-index))); }
.segmented button {
  position: relative; z-index: 1; min-block-size: 2.5rem; padding-inline: var(--space-4);
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); transition: color var(--dur-fast) ease;
}
.segmented button[aria-pressed="true"] { color: var(--color-text); }

/* Amount chips */
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.amount-chip {
  display: grid; gap: 0.1rem; place-items: center;
  min-block-size: 3.5rem; padding: var(--space-2);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
  font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring);
}
.amount-chip small { font-size: 0.6875rem; font-weight: var(--weight-medium); color: var(--color-text-subtle); }
.amount-chip:hover { border-color: var(--color-border-strong); }
.amount-chip:active { transform: scale(0.96); transition-duration: var(--dur-press); }
.amount-chip[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-ink); }

/* Choice cards (pillar / donation type selection) */
.choice {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer; text-align: start;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring);
}
.choice:hover { border-color: var(--color-border-strong); }
.choice:active { transform: scale(0.985); transition-duration: var(--dur-press); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--pillar, var(--color-primary)); background: color-mix(in srgb, var(--pillar, var(--color-primary)) 7%, var(--color-surface)); }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choice-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.choice-desc { font-size: var(--text-xs); color: var(--color-text-subtle); }
.choice-check { margin-inline-start: auto; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: grid; place-items: center; color: transparent; flex-shrink: 0; }
.choice:has(input:checked) .choice-check { background: var(--pillar, var(--color-primary)); border-color: transparent; color: #fff; }
.choice-check .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 3.5; }

/* Dropzone */
.dropzone {
  display: grid; place-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4);
  border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface-2); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
  cursor: pointer;
}
.dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone .icon { inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-primary); }
/* An upload box always takes the whole row of a form grid, never half of it */
:is(.form-grid, .form-grid-2, .form-grid-3) > :has(.upload-box, .dropzone, input[type="file"]:not([hidden])) { grid-column: 1 / -1; }

/* Upload box (ui.js): the file input lies invisibly over the whole box, so click and drop both reach it */
.upload-box { position: relative; isolation: isolate; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring); }
.upload-box.is-built { gap: var(--space-1); padding: var(--space-6) var(--space-4); }
.upload-box-input { position: absolute; inset: 0; z-index: 2; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 0; }
.upload-box:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.upload-box.is-drag { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); transform: scale(1.01); }
.upload-box-idle u { color: var(--color-primary); text-underline-offset: 3px; }
.upload-box-active { display: none; color: var(--color-primary); }
.upload-box.is-drag .upload-box-idle { display: none; }
.upload-box.is-drag .upload-box-active { display: block; }
.upload-box.has-files { border-style: solid; border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.upload-box-count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.upload-box-count:empty { display: none; }
.upload-files { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.upload-files[hidden] { display: none; }
.upload-file { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); animation: upload-in var(--dur-base) var(--ease-spring); }
@keyframes upload-in { from { opacity: 0; transform: translateY(-4px); } }
.upload-file-thumb { display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); }
.upload-file-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.upload-file-thumb .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.upload-file-text { display: grid; flex: 1; min-inline-size: 0; }
.upload-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); color: var(--color-text); }
.upload-file-size { font-size: var(--text-xs); color: var(--color-text-subtle); }
.upload-file-remove { flex: none; color: var(--color-text-subtle); }
.upload-file-remove:hover { color: var(--color-danger); }
@media (prefers-reduced-motion: reduce) { .upload-box.is-drag { transform: none; } .upload-file { animation: none; } }

/* Star rating */
.rating { display: inline-flex; flex-direction: row-reverse; justify-self: start; gap: 0.25rem; }
.rating input { position: absolute; opacity: 0; }
.rating label { color: var(--stone-300); cursor: pointer; transition: color var(--dur-fast) ease, transform var(--dur-base) var(--ease-bounce); }
.rating label .icon { inline-size: 1.75rem; block-size: 1.75rem; fill: currentColor; }
.rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { color: var(--accent-500); }
.rating label:active { transform: scale(0.85); }

/* ---- Stepper (donation flow) ---------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: var(--space-2); counter-reset: step; }
.step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); white-space: nowrap; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; inline-size: 1.625rem; block-size: 1.625rem; border-radius: 50%;
  background: var(--color-bg-sunken); color: var(--color-text-muted); font-size: var(--text-xs);
  transition: background-color var(--dur-base) var(--ease-spring), color var(--dur-base) ease;
}
.step:not(:last-child) { flex: 1; }
.step:not(:last-child)::after { content: ""; flex: 1; min-inline-size: 0.75rem; max-inline-size: 2.5rem; block-size: 2px; background: var(--color-border); border-radius: 2px; }
.step.is-done::before { content: "✓"; background: var(--color-primary-soft); color: var(--color-primary); }
.step.is-current { color: var(--color-text); }
.step.is-current::before { background: var(--color-primary); color: var(--color-on-primary); }
@media (max-width: 40rem) { .step:not(.is-current) .step-label { display: none; } }

/* ---- Tabs / breadcrumbs / pagination --------------------------------------------- */
.tabs {
  min-inline-size: 0;
  position: sticky; inset-block-start: var(--tabs-top, 0); z-index: var(--z-sticky);
  display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none;
  border-block-end: 1px solid var(--color-border);
  background: var(--material-bar); backdrop-filter: var(--material-blur);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); white-space: nowrap;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted);
  transition: color var(--dur-fast) ease;
}
.tab:hover { color: var(--color-text); }
.tab::after {
  content: ""; position: absolute; inset-inline: var(--space-4); inset-block-end: -1px; block-size: 2px;
  border-radius: 2px; background: var(--color-primary);
  transform: scaleX(0); transition: transform var(--dur-base) var(--ease-spring);
}
.tab[aria-selected="true"] { color: var(--color-text); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab .count, .pill .count { font-size: var(--text-xs); padding: 0.05rem 0.45rem; border-radius: var(--radius-full); background: var(--color-bg-sunken); color: var(--color-text-muted); }

.pills { min-inline-size: 0; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.pill {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  display: flex;
  gap: 8px;
  line-height: 1;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: all var(--dur-fast) ease;
  align-items: center;
  align-content: center;
}
.pill:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.pill[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); border-color: transparent; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); }
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs .icon { inline-size: 0.9rem; block-size: 0.9rem; }
.breadcrumbs [aria-current] { color: var(--color-text); font-weight: var(--weight-medium); }
[dir="rtl"] .breadcrumbs .icon { transform: scaleX(-1); }

.pagination { display: flex; align-items: center; gap: var(--space-1); }
.pagination[hidden] { display: none !important; }
.pagination a, .pagination button, .pagination span {
  display: grid; place-items: center; min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); cursor: pointer;
}
.pagination a:hover, .pagination button:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.pagination button:disabled { opacity: 0.35; cursor: default; }
.pagination [aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.pagination svg { inline-size: 1rem; block-size: 1rem; }
.pagination.is-center { justify-content: center; margin-block-start: var(--space-8); }
.table-wrap + .pagination, .panel > .pagination { justify-content: flex-end; margin-block-start: var(--space-4); }
[data-paginate] .is-paged { display: none !important; }

/* ---- Alerts & toasts --------------------------------------------------------------- */
.alert {
  --alert-fg: var(--color-info); --alert-bg: var(--color-info-soft);
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--alert-bg); font-size: var(--text-sm);
  border: 1px solid color-mix(in srgb, var(--alert-fg) 18%, transparent);
}
.alert > .icon { color: var(--alert-fg); margin-block-start: 0.05rem; }
.alert-title { font-weight: var(--weight-semibold); color: var(--color-text); }
.alert p { color: var(--color-text-muted); }
.alert-success { --alert-fg: var(--color-success); --alert-bg: var(--color-success-soft); }
.alert-warning { --alert-fg: var(--color-warning); --alert-bg: var(--color-warning-soft); }
.alert-danger  { --alert-fg: var(--color-danger);  --alert-bg: var(--color-danger-soft); }

.toast-region {
  position: fixed; z-index: var(--z-toast);
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom)); inset-inline: var(--space-4);
  display: grid; justify-items: center; gap: var(--space-2); pointer-events: none;
}
/* The region is a popover so it sits above open popups; undo the browser's popover box */
.toast-region[popover] {
  inset-block-start: auto; margin: 0; padding: 0; border: 0;
  inline-size: auto; block-size: auto; overflow: visible;
  background: transparent; color: inherit;
}
.toast-region[popover]:not(:popover-open) { display: none; }
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--stone-900) 90%, transparent); color: #fff;
  backdrop-filter: var(--material-blur); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  pointer-events: auto;
  animation: toast-in var(--dur-base) var(--ease-spring) both;
}
.toast .icon { color: var(--brand-300); }
.toast.is-error .icon { color: #fca5a5; }
.toast.is-leaving { animation: toast-out var(--dur-fast) ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(4px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(4px); } }

/* ---- Empty state / skeleton -------------------------------------------------------- */
.empty {
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
}
.empty-icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); }
.empty p { color: var(--color-text-muted); font-size: var(--text-sm); max-inline-size: 32ch; }

.skeleton {
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-bg-sunken) 0%, var(--color-surface-hover) 50%, var(--color-bg-sunken) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Sheet / modal (native <dialog>) ------------------------------------------------ */
.sheet {
  inline-size: min(34rem, calc(100% - 2rem));
  max-block-size: min(88vh, 48rem);
  margin: auto; padding: 0; border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-base) var(--ease-spring); }
.sheet::backdrop { background: var(--scrim); backdrop-filter: blur(2px); animation: fade-in var(--dur-base) ease; }
.sheet.is-closing { animation: sheet-out var(--dur-fast) ease forwards; }
.sheet.is-closing::backdrop { animation: fade-out var(--dur-fast) ease forwards; }
.sheet > form { display: flex; flex-direction: column; flex: 1; min-block-size: 0; } /* a form wrapping head/body/foot must not stop the body scrolling */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-block-end: 1px solid var(--color-border); }
.sheet-body { padding: var(--space-6); overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--color-border); background: var(--color-surface-2); }
.sheet-grabber { display: none; }
@keyframes sheet-in  { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes sheet-out { to   { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes fade-in  { from { opacity: 0; } }
@keyframes fade-out { to   { opacity: 0; } }

/* Confirm / prompt / alert popup (ui.js uhConfirm, uhPrompt, uhAlert) */
.uh-dialog { inline-size: min(28rem, calc(100% - 2rem)); }
.uh-dialog-body { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); overflow-y: auto; }
.uh-dialog-icon {
  flex: none; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.uh-dialog-icon .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.uh-dialog[data-tone="danger"] .uh-dialog-icon { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
.uh-dialog-text { flex: 1; min-inline-size: 0; display: grid; gap: var(--space-3); padding-block-start: 0.35rem; }
.uh-dialog-text .h4 { margin: 0; }
.uh-dialog-msg { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
.uh-dialog .field { margin-block-start: var(--space-1); }
@media (max-width: 40rem) {
  .uh-dialog-body { padding: var(--space-5); }
  .uh-dialog .sheet-foot > .btn { flex: 1; }
}

/* Phones: it becomes a bottom sheet that rises from the bottom edge and returns there */
@media (max-width: 40rem) {
  .sheet {
    inline-size: 100%; max-inline-size: 100%;
    margin-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0;
  }
  .sheet[open] { animation: sheet-up var(--dur-base) var(--ease-spring); }
  .sheet.is-closing { animation: sheet-down var(--dur-fast) ease-in forwards; }
  .sheet-grabber { display: block; inline-size: 2.25rem; block-size: 5px; margin: var(--space-2) auto 0; border-radius: 3px; background: var(--color-border-strong); }
  .sheet-foot { flex-wrap: wrap; padding-block-end: max(var(--space-4), env(safe-area-inset-bottom)); } /* three buttons wrap instead of running off the edge */
  @keyframes sheet-up   { from { transform: translateY(100%); } }
  @keyframes sheet-down { to   { transform: translateY(100%); } }
}

/* ---- Table ----------------------------------------------------------------------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.table { inline-size: 100%; font-size: var(--text-sm); }
.table th {
  padding: var(--space-3) var(--space-4); text-align: start; white-space: nowrap;
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-subtle); background: var(--color-surface-2); border-block-end: 1px solid var(--color-border);
}
.table td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.table tr:last-child td { border-block-end: 0; }
.table tbody tr { transition: background-color var(--dur-fast) ease; }
.table tbody tr:hover { background: var(--color-surface-hover); }
.table .num { text-align: end; white-space: nowrap; }
.table .cell-main { min-inline-size: 15rem; }
.cell-main { display: flex; align-items: center; gap: var(--space-3); }
.cell-title { font-weight: var(--weight-semibold); }
.cell-sub { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---- Material bar (translucent chrome) ----------------------------------------------- */
.material-bar {
  background: var(--material-bar);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
  border-block-end: 1px solid var(--material-bar-edge);
}

/* ---- Divider ------------------------------------------------------------------------ */
.divider { block-size: 1px; background: var(--color-border); border: 0; }

/* Icons sitting inside running text (hints, paragraphs) flow inline with it */
:is(.hint, p, .check-desc, .text-sm, .muted, .subtle) > .icon { display: inline-block; vertical-align: -0.15em; margin-inline-end: 0.3em; }

/* ---- Client-side filtering (listings, tables, galleries) — shared by every area ---- */
[data-filter-item].is-filtered { display: none !important; } /* beats inline display:contents wrappers */