/* =====================================================================
   Shared UI design system — reusable component layer.
   Used across all current sites (Crimson Cat, PolyglotMint, event pages,
   landing pages). STRUCTURE is shared; each site sets its BRAND tokens
   (palette + fonts) and inherits every component below unchanged.

   Usage on a new page:
     1) define the brand tokens in :root (or rely on the fallbacks below),
     2) <link rel="stylesheet" href="/assets/ui.css">  (after brand tokens),
     3) use the classes (.btn, .card, .chip, .field, accordions, …).

   See GLOBAL_SITE_STANDARDS.md §13 for the written rules.
   Change a value HERE once and every page that links this file updates.
   ===================================================================== */

:root{
  /* ---- 6. Spacing scale (4px base — use these, never one-off values) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ---- 5. Radius system ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* ---- 5. Elevation (brand may tune the rgba tint) ---- */
  --shadow-sm:0 1px 2px rgba(17,17,17,.06), 0 4px 14px rgba(17,17,17,.05);
  --shadow-md:0 6px 24px rgba(1,75,65,.10), 0 2px 6px rgba(17,17,17,.06);
  --shadow-lg:0 18px 50px rgba(1,75,65,.16), 0 6px 16px rgba(17,17,17,.08);

  /* ---- 10. Motion (one speed + easing everywhere) ---- */
  --motion-fast:.15s; --motion:.2s; --motion-slow:.35s;
  --ease:cubic-bezier(.4,0,.2,1);
  --hover-lift:-2px;

  /* ---- 7. Type scale (fluid; same scale on every page) ---- */
  --fs-eyebrow:12px; --fs-micro:11px; --fs-meta:13px;
  --fs-body:17px;  --fs-lead:clamp(18px,2.2vw,21px);
  --fs-h4:18px;    --fs-h3:clamp(20px,2.4vw,25px);
  --fs-h2:clamp(28px,4vw,40px); --fs-h1:clamp(34px,5.5vw,58px);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.65;

  /* ---- Section rhythm (6) ---- */
  --section-gap-desktop:96px; --section-gap-tablet:72px; --section-gap-mobile:56px;
  --section-pad-y:var(--section-gap-desktop);

  /* ---- BRAND tokens (FALLBACKS = PolyglotMint; override per site) ---- */
  --bg:#FBF4E4; --surface:#ffffff; --surface-warm:#FDFAF0; --line:#e2d8bf;
  --ink:#111111; --ink-soft:#3a3a36; --ink-faint:#6f6f67;
  --accent:#13C4B7;          /* primary action fill */
  --accent-ink:#04332e;      /* text on accent fill */
  --accent-strong:#016B5C;   /* outline / secondary structure */
  --accent-deep:#014b41;
  --link:#016B5C; --link-hover:#FF5E1A;
  --danger:#b3261e; --danger-bg:#fbe9e7;
  --success:#1d7a5f; --success-bg:#e6f4ee;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --serif-body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

@media(max-width:980px){ :root{ --section-pad-y:var(--section-gap-tablet); } }
@media(max-width:640px){ :root{ --section-pad-y:var(--section-gap-mobile); } }
@media(prefers-reduced-motion:reduce){ :root{ --motion-fast:0s; --motion:0s; --motion-slow:0s; --hover-lift:0px; } }

/* =====================================================================
   2. BUTTONS — primary / secondary / outline / ghost. One radius (pill),
   one hover-lift, consistent active + disabled. CTA hierarchy per page:
   exactly one .btn--primary, then secondary/outline, then ghost/links.
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:var(--fw-semibold); font-size:15px; line-height:1.2;
  padding:13px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform var(--motion-fast) var(--ease), background var(--motion) var(--ease),
             color var(--motion) var(--ease), border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.btn:hover{ transform:translateY(var(--hover-lift)); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn[disabled], .btn.is-disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* Variants accept BOTH the BEM name (.btn--primary) and the single-dash alias
   (.btn-primary) so older markup migrates without churn. Prefer `--` going forward. */
.btn--primary, .btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 20px rgba(19,196,183,.30); }
.btn--primary:hover, .btn-primary:hover{ background:var(--accent-strong); color:#fff; }
.btn--secondary, .btn-secondary{ background:var(--accent-strong); color:#fff; }
.btn--secondary:hover, .btn-secondary:hover{ background:var(--accent-deep); }
.btn--outline, .btn-outline{ background:transparent; color:var(--accent-strong); border-color:var(--accent-strong); }
.btn--outline:hover, .btn-outline:hover{ background:var(--accent-strong); color:#fff; }
.btn--ghost, .btn-ghost{ background:transparent; color:var(--accent-strong); border-color:transparent; padding-left:6px; padding-right:6px; }
.btn--ghost:hover, .btn-ghost:hover{ color:var(--link-hover); transform:none; }
.btn .arrow{ display:inline-flex; align-items:center; line-height:1; position:relative; top:-1px; transition:transform var(--motion) var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

/* =====================================================================
   3. LINKS — one underline/hover/color rule; one external-link treatment.
   ===================================================================== */
.ui a, a.ui-link{ color:var(--link); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color var(--motion-fast) var(--ease); }
.ui a:hover, a.ui-link:hover{ color:var(--link-hover); }
/* External links open in a new tab and get a subtle, baseline-aligned ↗ (text glyph, never emoji). */
.ui a[target="_blank"]::after, a.ui-link[target="_blank"]::after{
  content:"\2197\FE0E"; font-family:inherit; font-size:.8em; vertical-align:baseline; margin-left:2px; opacity:.85; text-decoration:none;
}

/* =====================================================================
   4. FORMS — one input height, label, placeholder, error/success, required.
   ===================================================================== */
.field{ display:block; margin-top:var(--sp-4); }
.label{ display:block; font-family:var(--sans); font-size:var(--fs-meta); font-weight:var(--fw-semibold); color:var(--ink); margin-bottom:6px; }
.label .req{ color:var(--danger); margin-left:2px; }      /* required-field indicator */
.input, .textarea, .select{
  width:100%; font-family:var(--sans); font-size:15px; line-height:1.4; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; min-height:46px;                      /* one input height */
  transition:border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.textarea{ min-height:120px; resize:vertical; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-faint); }
.input:focus, .textarea:focus, .select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(19,196,183,.16); }
.input[aria-invalid="true"], .field.has-error .input{ border-color:var(--danger); }
.field-msg{ font-family:var(--sans); font-size:12.5px; line-height:1.45; margin-top:6px; }
.field-msg--error{ color:var(--danger); }
.field-msg--success{ color:var(--success); }
.form-alert{ font-family:var(--sans); font-size:13.5px; line-height:1.5; border-radius:var(--r-sm); padding:12px 14px; }
.form-alert--error{ color:var(--danger); background:var(--danger-bg); }
.form-alert--success{ color:var(--success); background:var(--success-bg); }

/* =====================================================================
   5. CARDS — one radius system, shadow/border logic, padding scale,
   image-ratio rules (3:2 covers, 1:1 avatars/logos).
   ===================================================================== */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-sm); transition:transform var(--motion) var(--ease), box-shadow var(--motion-slow) var(--ease); }
.card--flat{ box-shadow:none; }
.card--interactive:hover{ transform:translateY(var(--hover-lift)); box-shadow:var(--shadow-md); }
.card--warm{ background:var(--surface-warm); }
.card__media{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; background:var(--bg); aspect-ratio:3/2; }
.card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.card__media--square{ aspect-ratio:1/1; }
.card__body{ padding-top:var(--sp-4); }

/* =====================================================================
   1 + 8. ACCORDIONS — chevron down (closed) → rotated up (open). Never +/×.
   One icon, size, stroke, color behavior, animation everywhere.
   Markup: a toggle with aria-expanded (or <details open>) containing
   <svg class="acc-ico" ...><path d="M2.5 4.5l3.5 3 3.5-3"/></svg>.
   ===================================================================== */
.acc-ico{ width:16px; height:16px; flex:0 0 auto; color:var(--ink-faint); transition:transform var(--motion) var(--ease), color var(--motion) var(--ease); }
[aria-expanded="true"] > .acc-ico,
[aria-expanded="true"] .acc-ico,
details[open] > summary .acc-ico{ transform:rotate(180deg); color:var(--accent-strong); }

/* =====================================================================
   8. ICONS — one library/style: line icons, 24-view, round caps,
   stroke-width 2 (1.6 for ≤14px), sized in fixed steps. No mixed styles.
   ===================================================================== */
.icon{ width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon--sm{ width:14px; height:14px; stroke-width:1.6; }
.icon--lg{ width:24px; height:24px; }

/* =====================================================================
   12. BADGES / CHIPS — one shape, size, padding, text style.
   Color = MEANING: neutral (default), accent (active/selected),
   success, warning, danger. Same meaning across the whole site.
   ===================================================================== */
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-micro); font-weight:var(--fw-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); background:rgba(19,196,183,.10); border:1px solid rgba(1,107,92,.20); padding:4px 10px; border-radius:var(--r-sm); white-space:nowrap; transition:background var(--motion) var(--ease), border-color var(--motion) var(--ease), color var(--motion) var(--ease); }
.chip--active, .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.chip--success{ color:var(--success); background:var(--success-bg); border-color:transparent; }
.chip--danger{ color:var(--danger); background:var(--danger-bg); border-color:transparent; }
.chip--neutral{ color:var(--ink-faint); background:var(--bg); border-color:var(--line); }

/* =====================================================================
   11. EMPTY STATES — one layout: centered icon/illustration, message,
   one CTA. Quiet, not alarming.
   ===================================================================== */
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-4); padding:var(--sp-8) var(--sp-5); color:var(--ink-soft); }
.empty__icon{ width:40px; height:40px; color:var(--ink-faint); opacity:.8; }
.empty__title{ font-family:var(--serif); font-weight:var(--fw-semibold); font-size:var(--fs-h4); color:var(--ink); }
.empty__text{ font-family:var(--serif-body); font-size:15.5px; line-height:1.6; max-width:42ch; margin:0; }
.empty .btn{ margin-top:var(--sp-2); }

/* =====================================================================
   7. TYPOGRAPHY helpers — same scale/weights/line-heights everywhere.
   ===================================================================== */
.eyebrow{ font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-strong); }
/* Decorative aqua-dash variant (PolyglotMint). Plain .eyebrow is the default;
   add .eyebrow--bar only where the leading dash is intended: class="eyebrow eyebrow--bar". */
.eyebrow--bar{ display:inline-flex; align-items:center; }
/* Dash is inline-block with margin + vertical-align so it renders even when a page
   scopes the eyebrow to display:block (where an inline ::before would have zero
   width). 9px gap via margin-right works in both flex and block contexts. */
.eyebrow--bar::before{ content:""; display:inline-block; flex:0 0 auto; vertical-align:middle; width:22px; height:2px; border-radius:2px; background:var(--accent); margin-right:9px; }
.h1{ font-family:var(--serif); font-weight:var(--fw-semibold); font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:-.02em; }
.h2{ font-family:var(--serif); font-weight:var(--fw-semibold); font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:-.01em; }
.h3{ font-family:var(--serif); font-weight:var(--fw-semibold); font-size:var(--fs-h3); line-height:var(--lh-snug); }
.lead{ font-family:var(--serif-body); font-size:var(--fs-lead); line-height:1.55; color:var(--ink-soft); }
.prose-body{ font-family:var(--serif-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }

/* 6. Section rhythm utility (matches the homepage system) */
.sec-pad{ padding:var(--section-pad-y) 0; }
.hero + .sec-pad, .sec-pad + .sec-pad{ padding-top:0; }

/* 7. Global standard-page spacing (non-article pages that use <main>) ------------
   One source of truth for the vertical rhythm of standard/utility pages. Article
   pages don't use <main>, so their rail/footer rhythm is untouched. Tokens:
     --std-section-gap     space between major (h2) sections
     --std-precta-gap      lead-in above a final call-to-action section (.std-final-cta)
     --std-cta-footer-gap  last content / CTA buttons → footer
   Values: desktop / tablet(≤980) / mobile(≤640). */
:root{
  --std-section-gap:88px;
  --std-precta-gap:72px;
  --std-cta-footer-gap:88px;
}
@media(max-width:980px){ :root{ --std-section-gap:72px; --std-precta-gap:64px; --std-cta-footer-gap:72px; } }
@media(max-width:640px){ :root{ --std-section-gap:56px; --std-precta-gap:48px; --std-cta-footer-gap:64px; } }

/* last content/CTA → footer. Legacy per-page bottom spacing is normalized to 0 so this
   token is the ONLY thing controlling the distance to the footer / newsletter pre-footer. */
main{ padding-bottom:var(--std-cta-footer-gap); }
main .legal, main .ms, main .legal-wrap{ padding-bottom:0; }
.pmx-prefoot{ margin-top:0 !important; }

/* Major-section rhythm on standard utility pages (the shared .legal content wrapper).
   The first heading sits near the top; a section flagged .std-final-cta gets the
   slightly tighter pre-CTA lead-in. */
main .legal > h2{ margin-top:var(--std-section-gap); }
main .legal > h2:first-child{ margin-top:24px; }
main .legal > h2.std-final-cta{ margin-top:var(--std-precta-gap); }

/* 8. Reusable responsive table → stacked cards on mobile --------------------------
   Add class "pmx-rtable" to a <table> and data-label="…" to each <td>. Desktop keeps the
   normal table (style it however you like). At ≤640px each row becomes a quiet card with
   the header shown as a small label above each value — no horizontal scroll, no shrunk text,
   no lost content. Cards use the site's cream card style. */
@media(max-width:640px){
  table.pmx-rtable{ min-width:0 !important; width:100%; border-collapse:separate; border-spacing:0; }
  table.pmx-rtable thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  table.pmx-rtable tbody, table.pmx-rtable tr, table.pmx-rtable td{ display:block; width:100%; }
  table.pmx-rtable tr{ background:var(--cream-deep,#F4EAD3); border:1px solid var(--line,#e2d8bf); border-radius:12px; padding:6px 2px; margin:0 0 14px; }
  table.pmx-rtable tr:last-child{ margin-bottom:0; }
  table.pmx-rtable td{ border:0 !important; padding:9px 16px; white-space:normal !important; }
  table.pmx-rtable td::before{ content:attr(data-label); display:block; font-family:var(--mono,monospace); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint,#6f6f67); margin-bottom:3px; }
  table.pmx-rtable td:empty{ display:none; }
}

/* 9. Standard-page horizontal-overflow guard --------------------------------------
   Keeps a stray wide child (break-out sections, wide tables, images) from forcing a
   horizontal scrollbar. Scoped to pages that use <main> (i.e. NOT article pages), and
   uses overflow-x:clip (not hidden) so it never establishes a scroll container that
   could break the article rails' position:sticky. */
body:has(main){ max-width:100%; overflow-x:clip; }
@media(max-width:640px){
  main, main *{ box-sizing:border-box; }
  main :where(p,ul,ol,li,figure,img,table,div,blockquote){ max-width:100%; }
  main img{ height:auto; }
}