/* ==========================================================================
   pi-app.css — Pearls & Irritations form design system
   Monochromatic darkgoldenrod. Self-contained (no build step). Published at
   /pi-app.css. Borrows layout ideas from DaisyUI + Bootstrap 5 and follows the
   QLD Design System + Australian Government Style Manual form guidance:
   visible labels above inputs, persistent hints, inline errors, single column,
   generous spacing, 44px targets, high-contrast focus, verb-led buttons.
   See STYLE_GUIDE.md.
   ========================================================================== */

/* Masthead display face (also declared in the app bundle). */
@font-face {
  font-family: "NextSoutherlandSerifDEMO";
  src:
    url("/fonts/NextSoutherlandSerifDEMO-1023316a333098f053513b5ec5531a32.woff2?vsn=d") format("woff2"),
    url("/fonts/NextSoutherlandSerifDEMO-c63e09ee0b1d7ee5af09973b0e72e4b8.woff?vsn=d") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core hue — darkgoldenrod — and a monochromatic soft ramp */
  --pi-gold: #b8860b;
  --pi-gold-dark: #946c09;
  --pi-gold-deep: #6e5107;
  --pi-gold-tint: #f4ead0;
  --pi-gold-wash: #fbf7ec;
  --pi-gold-line: #e8dcbe;

  /* Neutrals (warm) */
  --pi-ink: #1b1a17;
  --pi-muted: #6f6a5e;
  --pi-line: #e7e1d3;
  --pi-surface: #ffffff;
  --pi-surface-alt: #faf8f2;

  /* The one accent outside the monochrome palette: destructive actions only */
  --pi-danger: #a4332b;
  --pi-danger-wash: #f7e9e7;

  /* Type */
  --pi-font-display: "NextSoutherlandSerifDEMO", Georgia, serif;
  --pi-font-head: Georgia, "Times New Roman", serif;
  --pi-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --pi-radius: 10px;
  --pi-radius-sm: 7px;
  --pi-pill: 999px;
  --pi-shadow: 0 1px 2px rgba(27, 26, 23, 0.04), 0 4px 14px rgba(27, 26, 23, 0.06);
  --pi-focus: 0 0 0 3px rgba(184, 134, 11, 0.3);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.pi-page {
  font-family: var(--pi-font-body);
  color: var(--pi-ink);
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  line-height: 1.55;
}
.pi-page--narrow { max-width: 30rem; }

.pi-stack > * + * { margin-top: 1.25rem; }

/* Masthead — pearl mark + title + subtitle, no rule under it */
.pi-masthead { text-align: center; margin-bottom: 1.75rem; }
.pi-masthead__logo { display: block; width: 46px; height: auto; margin: 0 auto 0.6rem; opacity: 0.9; }
.pi-masthead__title {
  font-family: var(--pi-font-display);
  color: var(--pi-ink);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.pi-masthead__subtitle {
  font-family: var(--pi-font-body);
  color: var(--pi-muted);
  font-size: 1.02rem;
  margin: 0.6rem 0 0;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.pi-card {
  background: var(--pi-surface);
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius);
  box-shadow: var(--pi-shadow);
  overflow: hidden;
}
.pi-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.35rem;
  background: var(--pi-gold-wash);
  border-bottom: 1px solid var(--pi-gold-line);
}
.pi-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pi-gold-deep);
}
.pi-card__amount { font-family: var(--pi-font-head); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.pi-card__amount small { font-family: var(--pi-font-body); font-weight: 400; font-size: 0.95rem; color: var(--pi-muted); }
.pi-card__body { padding: 1.35rem; }

/* Section inside a card — icon + action-oriented title + content */
.pi-section { padding: 1.15rem 1.35rem; border-top: 1px solid var(--pi-line); }
.pi-section:first-child { border-top: 0; }
.pi-section--muted { background: var(--pi-surface-alt); }
.pi-section__head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.2rem; }
.pi-section__title { font-family: var(--pi-font-body); font-weight: 700; font-size: 1rem; color: var(--pi-ink); margin: 0; }
.pi-section__note { color: var(--pi-muted); font-size: 0.85rem; margin: 0 0 0.85rem; }

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */
.pi-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.28em 0.72em;
  border-radius: var(--pi-pill);
  border: 1px solid var(--pi-gold-line);
  background: var(--pi-gold-wash);
  color: var(--pi-gold-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.pi-pill--solid { background: var(--pi-gold); border-color: var(--pi-gold); color: #fff; }
.pi-pill--muted { background: transparent; border-color: var(--pi-line); color: var(--pi-muted); }

/* --------------------------------------------------------------------------
   Fields (labels above inputs, persistent hint, inline error)
   -------------------------------------------------------------------------- */
.pi-field { margin-bottom: 1.1rem; }
.pi-field:last-child { margin-bottom: 0; }
.pi-label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--pi-ink); margin-bottom: 0.35rem; }
/* QLD/AU: sentence case, no colon, no all-caps. Required = red asterisk at the
   START of the label; optional = "(optional)" after it. */
.pi-label .pi-optional { font-weight: 400; color: var(--pi-muted); }
.pi-label .pi-required { color: var(--pi-danger); font-weight: 700; margin-right: 0.25rem; }
.pi-label abbr[title] { text-decoration: none; border: 0; }
/* Top-of-form instruction ("All fields are required unless marked optional"). */
.pi-form-note { color: var(--pi-muted); font-size: 0.85rem; margin: 0 0 1rem; }
.pi-hint { color: var(--pi-muted); font-size: 0.82rem; margin: -0.15rem 0 0.45rem; }

.pi-input,
.pi-select {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font-family: var(--pi-font-body);
  font-size: 1rem;
  color: var(--pi-ink);
  background: var(--pi-surface);
  border: 1.5px solid var(--pi-line);
  border-radius: var(--pi-radius-sm);
  appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pi-input::placeholder { color: #a9a399; }
.pi-input:hover,
.pi-select:hover { border-color: var(--pi-gold-line); }
.pi-input:focus,
.pi-select:focus { outline: none; border-color: var(--pi-gold); box-shadow: var(--pi-focus); }
.pi-input--invalid { border-color: var(--pi-danger); }
.pi-input--compact { width: auto; }

.pi-error { color: var(--pi-danger); font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; }

/* Segmented control (e.g. donation frequency) */
.pi-segment {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--pi-gold-line);
  border-radius: var(--pi-radius-sm);
  overflow: hidden;
  background: var(--pi-surface);
}
.pi-segment__btn {
  flex: 1;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  font-family: var(--pi-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pi-gold-deep);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--pi-gold-line);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.pi-segment__btn:last-child { border-right: 0; }
.pi-segment__btn:hover { background: var(--pi-gold-wash); }
.pi-segment__btn--active { background: var(--pi-gold); color: #fff; }
.pi-segment__btn--active:hover { background: var(--pi-gold-dark); }
.pi-segment__btn:focus-visible { outline: none; box-shadow: var(--pi-focus); position: relative; z-index: 1; }

/* Preset amount chips */
.pi-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pi-preset {
  min-height: 40px;
  padding: 0.4rem 0.5rem;
  font-family: var(--pi-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pi-gold-deep);
  background: var(--pi-surface);
  border: 1.5px solid var(--pi-gold-line);
  border-radius: var(--pi-radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pi-preset:hover { background: var(--pi-gold-wash); }
.pi-preset--active { background: var(--pi-gold); border-color: var(--pi-gold); color: #fff; }
.pi-preset:focus-visible { outline: none; box-shadow: var(--pi-focus); }

/* Input with a leading symbol ($) */
.pi-input-prefix {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  background: var(--pi-surface);
  border: 1.5px solid var(--pi-line);
  border-radius: var(--pi-radius-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pi-input-prefix:focus-within { border-color: var(--pi-gold); box-shadow: var(--pi-focus); }
.pi-input-prefix > span { color: var(--pi-muted); font-weight: 600; }
.pi-input-prefix > input {
  flex: 1;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-family: var(--pi-font-body);
  font-size: 1rem;
  color: var(--pi-ink);
}
.pi-input-prefix > input:focus { outline: none; }

/* Inline controls (amount + frequency on one row) */
.pi-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.pi-controls .pi-field { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons (verb-led; one primary per view)
   -------------------------------------------------------------------------- */
.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  font-family: var(--pi-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--pi-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pi-btn:focus-visible { outline: none; box-shadow: var(--pi-focus); }
.pi-btn--block { width: 100%; }
.pi-btn--lg { min-height: 52px; font-size: 1.05rem; padding: 0.85rem 1.4rem; }
.pi-btn--sm { min-height: 38px; padding: 0.45rem 0.9rem; font-size: 0.88rem; }

.pi-btn--primary { background: var(--pi-gold); border-color: var(--pi-gold); color: #fff; }
.pi-btn--primary:hover { background: var(--pi-gold-dark); border-color: var(--pi-gold-dark); }

.pi-btn--outline { background: transparent; border-color: var(--pi-gold); color: var(--pi-gold-deep); }
.pi-btn--outline:hover { background: var(--pi-gold-wash); }

.pi-btn--ghost { background: transparent; border-color: transparent; color: var(--pi-muted); }
.pi-btn--ghost:hover { background: var(--pi-surface-alt); color: var(--pi-ink); }

.pi-btn--danger { background: transparent; border-color: var(--pi-danger); color: var(--pi-danger); }
.pi-btn--danger:hover { background: var(--pi-danger-wash); }

.pi-btn--link { background: transparent; border: 0; min-height: 0; padding: 0; color: var(--pi-gold-deep); text-decoration: underline; font-weight: 600; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.pi-alert {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--pi-radius-sm);
  border: 1px solid var(--pi-gold-line);
  border-left-width: 4px;
  background: var(--pi-gold-wash);
  color: var(--pi-ink);
  font-size: 0.95rem;
}
.pi-alert__icon { color: var(--pi-gold); flex: 0 0 auto; margin-top: 0.1rem; }
.pi-alert__title { font-weight: 700; margin: 0 0 0.15rem; }
.pi-alert__body { margin: 0; }
.pi-alert--success { background: var(--pi-gold-wash); border-color: var(--pi-gold); }
.pi-alert--error { background: var(--pi-danger-wash); border-color: var(--pi-danger); color: var(--pi-danger); }
.pi-alert--error .pi-alert__icon { color: var(--pi-danger); }

/* --------------------------------------------------------------------------
   Icons (Bootstrap Icons, monochromatic via currentColor)
   -------------------------------------------------------------------------- */
.pi-icon { width: 1.1em; height: 1.1em; fill: currentColor; flex: 0 0 auto; vertical-align: -0.15em; }
.pi-icon--gold { color: var(--pi-gold); }

/* Small helpers */
.pi-meta { color: var(--pi-muted); font-size: 0.85rem; }
.pi-center { text-align: center; }
.pi-divider-note { text-align: center; color: var(--pi-muted); font-size: 0.8rem; margin-top: 1.25rem; }