/* ─────────────────────────────────────────────────────────────
   Giftella Registry · design system v3, "the lined envelope" (4 Oct 2026)

   One system for every registry page: hub, occasion pages, create,
   published, the guest registry and the dashboard.

   Idea: a registry should feel like opening an invitation. The
   invitation card stays the hero (names in Libre Caslon Display, a
   double rule in the owner's color), but now it is pulled from a
   lined envelope: a colored band printed with the occasion's own
   pattern, and a small drawing at the top of the card. Color is
   joyful and deliberate; type stays calm, so it still reads as
   professional. Product photos always sit clean on white.

   Two independent dials, both plain attributes:
     data-theme  the owner's color (gold sage blush navy sky sunny
                 terracotta lilac forest ink). Sets the accent, a
                 gradient partner, button ink, a deep text tone, a
                 "pop" color and a tinted page ground.
     data-kind   the occasion (wedding baby birthday ...). Sets a
                 four color palette (--oc-1,2,3,5) and the drawings
                 (crest and liner, generated into the MOTIFS block at
                 the end of this file by scripts/build_registry_motifs.py).
   Both work on ANY element, not only <body>: a hub tile, a preview
   card or a color swatch can carry its own.

   Every button and text pair passes WCAG AA in light and dark
   (checked by the registry harness, contrast.py). Accent text uses
   --rg-accent-deep, never --rg-accent.

   Fonts (unchanged; add to every page's <head>):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Libre+Caslon+Display&display=swap" rel="stylesheet">

   Modes: data-mode="dark|light" on <html> (theme.js toggle). Dark
   keeps the plum ground the founder chose.
   Motion: everything that moves stops under prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */

:root {
  --rg-ground: #F7F5F1;      /* page */
  --rg-paper:  #FFFFFF;      /* cards, sheets */
  --rg-paper-2:#FBFAF7;      /* quiet panels */
  --rg-ink:    #1B1A17;
  --rg-ink-2:  #3A3833;
  --rg-muted:  #66625A;
  --rg-faint:  #9A958B;
  --rg-line:   #E7E3DB;
  --rg-line-2: #EFECE6;
  --rg-brand:  #B8913A;      /* the Giftella mark only */
  --rg-ok:     #2F7A55;
  --rg-warn:   #A35A1E;
  --rg-err:    #B3261E;
  --rg-photo:  #FFFFFF;      /* product photo plates stay white in every mode */
  --rg-shadow: 0 1px 2px rgba(27,26,23,.04), 0 10px 30px -16px rgba(27,26,23,.18);
  --rg-shadow-lg: 0 24px 60px -28px rgba(27,26,23,.38);
  --rg-wash-p: 12%;          /* how strong accent washes are (dark raises it) */

  --rg-display: "Libre Caslon Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --rg-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rg-r-sm: 10px; --rg-r: 14px; --rg-r-lg: 20px;
  --rg-ease: cubic-bezier(.22,.9,.3,1);
  --rg-spring: cubic-bezier(.34,1.56,.64,1);
  --rg-wrap: 1120px;
  color-scheme: light;
}

/* ── owner colors (light) ─────────────────────────────────────
   accent   solid color: bars, the ampersand, focus rings
   accent-2 gradient partner for buttons, ribbons and chips
   ink      text on accent and accent-2 (AA on both ends)
   deep     accent as text on paper and on the tinted ground
   pop      a friendly second color for small shapes
   tint     the page ground */
:root, [data-theme="gold"] { --rg-accent:#C99428; --rg-accent-2:#E7B94F; --rg-accent-ink:#2A1C03; --rg-accent-deep:#7A5512; --rg-pop:#E98A6B; --rg-tint:#FBF6EA; }
[data-theme="sage"]       { --rg-accent:#3E7A59; --rg-accent-2:#2F6E64; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#2E5F45; --rg-pop:#E59C93; --rg-tint:#F1F6F1; }
[data-theme="blush"]      { --rg-accent:#B0475A; --rg-accent-2:#B24F7A; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#97384A; --rg-pop:#F2C46D; --rg-tint:#FCF1F0; }
[data-theme="navy"]       { --rg-accent:#24365E; --rg-accent-2:#3A4C98; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#24365E; --rg-pop:#E8B04A; --rg-tint:#F1F3FA; }
[data-theme="sky"]        { --rg-accent:#1F64A3; --rg-accent-2:#1C7CA8; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#1D5A92; --rg-pop:#FFC857; --rg-tint:#EEF5FC; }
[data-theme="sunny"]      { --rg-accent:#F2AE1C; --rg-accent-2:#FFD15A; --rg-accent-ink:#2B1D00; --rg-accent-deep:#835500; --rg-pop:#FF7A59; --rg-tint:#FFF8E6; }
[data-theme="terracotta"] { --rg-accent:#AE4E2D; --rg-accent-2:#AC4250; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#923F21; --rg-pop:#6FA36B; --rg-tint:#FCF2EC; }
[data-theme="lilac"]      { --rg-accent:#74519F; --rg-accent-2:#9150A8; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#5E428C; --rg-pop:#F2A7C3; --rg-tint:#F6F1FB; }
[data-theme="forest"]     { --rg-accent:#2C5937; --rg-accent-2:#2A6A57; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#2B5434; --rg-pop:#E2B04A; --rg-tint:#F0F5F0; }
[data-theme="ink"]        { --rg-accent:#262522; --rg-accent-2:#45413A; --rg-accent-ink:#FFFFFF; --rg-accent-deep:#2B2A27; --rg-pop:#C9A45C; --rg-tint:#F5F4F1; }

/* derived from the accent, recomputed wherever a theme is set */
:root, [data-theme] {
  --rg-accent-wash: color-mix(in srgb, var(--rg-accent) var(--rg-wash-p), transparent);
  --rg-accent-line: color-mix(in srgb, var(--rg-accent) 42%, transparent);
  --rg-grad: linear-gradient(115deg, var(--rg-accent) 0%, var(--rg-accent-2) 100%);
  --rg-glow: color-mix(in srgb, var(--rg-accent) 55%, transparent);
}
/* a themed page wears its color: tinted ground, warmer quiet panels and lines */
body.rg[data-theme] {
  --rg-ground: var(--rg-tint);
  --rg-paper-2: color-mix(in srgb, var(--rg-tint) 55%, #FFFFFF);
  --rg-line: color-mix(in srgb, var(--rg-accent) 13%, #E9E5DD);
  --rg-line-2: color-mix(in srgb, var(--rg-accent) 8%, #F0EDE7);
}

/* ── occasion palettes ───────────────────────────────────────
   --oc-1..3 the drawing colors, --oc-5 a fourth for details,
   --oc-tint a pale ground for occasion tiles. Decorative only:
   never used for text. */
:root, [data-kind="other"] { --oc-1:#E1AE48; --oc-2:#8B6FD4; --oc-3:#EF8E8E; --oc-5:#8B6FD4; --oc-tint:#FAF4EA; }
[data-kind="wedding"]      { --oc-1:#7FA88A; --oc-2:#EBA3A6; --oc-3:#E1BC6E; --oc-5:#B98F8A; --oc-tint:#FBF0EC; }
[data-kind="engagement"]   { --oc-1:#E0B158; --oc-2:#8FB0E6; --oc-3:#EE97AB; --oc-5:#C9A2E8; --oc-tint:#FCF2E7; }
[data-kind="anniversary"]  { --oc-1:#B5475E; --oc-2:#E3AD4C; --oc-3:#F09FAD; --oc-5:#E3AD4C; --oc-tint:#FBEDEF; }
[data-kind="baby"]         { --oc-1:#F3CB5A; --oc-2:#8CC4EA; --oc-3:#B9A5EB; --oc-5:#A6DCC5; --oc-tint:#EEF6FC; }
[data-kind="birthday"]     { --oc-1:#FF7366; --oc-2:#2DC2B3; --oc-3:#FFC23D; --oc-5:#8C6CF0; --oc-tint:#FFF1EA; }
[data-kind="graduation"]   { --oc-1:#2E4A8C; --oc-2:#EDB63F; --oc-3:#E2574A; --oc-5:#2E4A8C; --oc-tint:#EEF2FB; }
[data-kind="housewarming"] { --oc-1:#D8744A; --oc-2:#64A46A; --oc-3:#F3BF47; --oc-5:#64A46A; --oc-tint:#FCF1E7; }
[data-kind="retirement"]   { --oc-1:#F28A4C; --oc-2:#2F9BA6; --oc-3:#F6C65A; --oc-5:#2F9BA6; --oc-tint:#FFF2E6; }
[data-kind="holiday"]      { --oc-1:#2E7D5A; --oc-2:#CC3F4C; --oc-3:#9CC6E8; --oc-5:#E5B44D; --oc-tint:#EEF6F2; }
[data-kind="classroom"]    { --oc-1:#EE5A55; --oc-2:#FFC53D; --oc-3:#3C9BE0; --oc-5:#57B65F; --oc-tint:#FFF8E6; }
:root, [data-kind] { --rg-festive: linear-gradient(90deg, var(--oc-1), var(--oc-2) 34%, var(--oc-3) 67%, var(--oc-5)); }

/* ── dark: the plum ground, brighter accents with dark button ink ── */
:root[data-mode="dark"] {
  --rg-ground:#14101B; --rg-paper:#1E1828; --rg-paper-2:#191424; --rg-ink:#F4F1FA; --rg-ink-2:#DCD6E8; --rg-muted:#B9B0CC; --rg-faint:#8E85A3;
  --rg-line:rgba(139,111,212,.22); --rg-line-2:rgba(139,111,212,.14); --rg-ok:#7FCFA3; --rg-warn:#E7A86A; --rg-err:#F2918A;
  --rg-shadow: 0 1px 2px rgba(6,3,14,.5), 0 12px 30px -16px rgba(6,3,14,.7); --rg-shadow-lg: 0 28px 70px -26px rgba(6,3,14,.85);
  --rg-wash-p: 20%;
  color-scheme: dark;
}
:root[data-mode="dark"], :root[data-mode="dark"] [data-theme="gold"] { --rg-accent:#E2B655; --rg-accent-2:#F3D27E; --rg-accent-ink:#1B1407; --rg-accent-deep:#F0CF83; --rg-tint:#14101B; }
:root[data-mode="dark"] [data-theme="sage"]       { --rg-accent:#86C9A0; --rg-accent-2:#A9DBA9; --rg-accent-ink:#0F1A13; --rg-accent-deep:#A7DDBA; }
:root[data-mode="dark"] [data-theme="blush"]      { --rg-accent:#F0A0A8; --rg-accent-2:#F6B9C8; --rg-accent-ink:#25101A; --rg-accent-deep:#F4B7BE; }
:root[data-mode="dark"] [data-theme="navy"]       { --rg-accent:#C9B98F; --rg-accent-2:#E2D3A6; --rg-accent-ink:#1B1A17; --rg-accent-deep:#D9CBA5; }
:root[data-mode="dark"] [data-theme="sky"]        { --rg-accent:#7DBDF0; --rg-accent-2:#9AD3F2; --rg-accent-ink:#0B1622; --rg-accent-deep:#A3D2F6; }
:root[data-mode="dark"] [data-theme="sunny"]      { --rg-accent:#F6BD3E; --rg-accent-2:#FFDB7A; --rg-accent-ink:#1E1500; --rg-accent-deep:#F6CF73; }
:root[data-mode="dark"] [data-theme="terracotta"] { --rg-accent:#E9946E; --rg-accent-2:#F2B089; --rg-accent-ink:#22120A; --rg-accent-deep:#F0AE8E; }
:root[data-mode="dark"] [data-theme="lilac"]      { --rg-accent:#BBA2EC; --rg-accent-2:#D3A9E6; --rg-accent-ink:#170F22; --rg-accent-deep:#CDB9F2; }
:root[data-mode="dark"] [data-theme="forest"]     { --rg-accent:#7DBE8C; --rg-accent-2:#9FD29A; --rg-accent-ink:#0D1A10; --rg-accent-deep:#9ED4AC; }
:root[data-mode="dark"] [data-theme="ink"]        { --rg-accent:#C9B98F; --rg-accent-2:#E2D3A6; --rg-accent-ink:#1B1A17; --rg-accent-deep:#D9CBA5; }
:root[data-mode="dark"] body.rg[data-theme] {
  --rg-ground: color-mix(in srgb, var(--rg-accent) 5%, #14101B);
  --rg-paper-2: color-mix(in srgb, var(--rg-accent) 4%, #191424);
  --rg-line: color-mix(in srgb, var(--rg-accent) 18%, rgba(139,111,212,.18));
  --rg-line-2: color-mix(in srgb, var(--rg-accent) 10%, rgba(139,111,212,.12));
}
:root[data-mode="dark"] [data-kind="anniversary"] { --oc-1:#E07A90; }
:root[data-mode="dark"] [data-kind="graduation"]  { --oc-1:#8FA8E8; --oc-5:#8FA8E8; }
:root[data-mode="dark"] [data-kind="holiday"]     { --oc-1:#5DBB8C; }
:root[data-mode="dark"], :root[data-mode="dark"] [data-kind] { --oc-tint: color-mix(in srgb, var(--oc-1) 14%, #1E1828); }

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --rg-ground:#14101B; --rg-paper:#1E1828; --rg-paper-2:#191424; --rg-ink:#F4F1FA; --rg-ink-2:#DCD6E8; --rg-muted:#B9B0CC; --rg-faint:#8E85A3;
    --rg-line:rgba(139,111,212,.22); --rg-line-2:rgba(139,111,212,.14); --rg-ok:#7FCFA3; --rg-warn:#E7A86A; --rg-err:#F2918A;
    --rg-shadow: 0 1px 2px rgba(6,3,14,.5), 0 12px 30px -16px rgba(6,3,14,.7); --rg-shadow-lg: 0 28px 70px -26px rgba(6,3,14,.85);
    --rg-wash-p: 20%;
    color-scheme: dark;
  }
  :root:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="gold"] { --rg-accent:#E2B655; --rg-accent-2:#F3D27E; --rg-accent-ink:#1B1407; --rg-accent-deep:#F0CF83; --rg-tint:#14101B; }
  :root:not([data-mode="light"]) [data-theme="sage"]       { --rg-accent:#86C9A0; --rg-accent-2:#A9DBA9; --rg-accent-ink:#0F1A13; --rg-accent-deep:#A7DDBA; }
  :root:not([data-mode="light"]) [data-theme="blush"]      { --rg-accent:#F0A0A8; --rg-accent-2:#F6B9C8; --rg-accent-ink:#25101A; --rg-accent-deep:#F4B7BE; }
  :root:not([data-mode="light"]) [data-theme="navy"]       { --rg-accent:#C9B98F; --rg-accent-2:#E2D3A6; --rg-accent-ink:#1B1A17; --rg-accent-deep:#D9CBA5; }
  :root:not([data-mode="light"]) [data-theme="sky"]        { --rg-accent:#7DBDF0; --rg-accent-2:#9AD3F2; --rg-accent-ink:#0B1622; --rg-accent-deep:#A3D2F6; }
  :root:not([data-mode="light"]) [data-theme="sunny"]      { --rg-accent:#F6BD3E; --rg-accent-2:#FFDB7A; --rg-accent-ink:#1E1500; --rg-accent-deep:#F6CF73; }
  :root:not([data-mode="light"]) [data-theme="terracotta"] { --rg-accent:#E9946E; --rg-accent-2:#F2B089; --rg-accent-ink:#22120A; --rg-accent-deep:#F0AE8E; }
  :root:not([data-mode="light"]) [data-theme="lilac"]      { --rg-accent:#BBA2EC; --rg-accent-2:#D3A9E6; --rg-accent-ink:#170F22; --rg-accent-deep:#CDB9F2; }
  :root:not([data-mode="light"]) [data-theme="forest"]     { --rg-accent:#7DBE8C; --rg-accent-2:#9FD29A; --rg-accent-ink:#0D1A10; --rg-accent-deep:#9ED4AC; }
  :root:not([data-mode="light"]) [data-theme="ink"]        { --rg-accent:#C9B98F; --rg-accent-2:#E2D3A6; --rg-accent-ink:#1B1A17; --rg-accent-deep:#D9CBA5; }
  :root:not([data-mode="light"]) body.rg[data-theme] {
    --rg-ground: color-mix(in srgb, var(--rg-accent) 5%, #14101B);
    --rg-paper-2: color-mix(in srgb, var(--rg-accent) 4%, #191424);
    --rg-line: color-mix(in srgb, var(--rg-accent) 18%, rgba(139,111,212,.18));
    --rg-line-2: color-mix(in srgb, var(--rg-accent) 10%, rgba(139,111,212,.12));
  }
  :root:not([data-mode="light"]) [data-kind="anniversary"] { --oc-1:#E07A90; }
  :root:not([data-mode="light"]) [data-kind="graduation"]  { --oc-1:#8FA8E8; --oc-5:#8FA8E8; }
  :root:not([data-mode="light"]) [data-kind="holiday"]     { --oc-1:#5DBB8C; }
  :root:not([data-mode="light"]), :root:not([data-mode="light"]) [data-kind] { --oc-tint: color-mix(in srgb, var(--oc-1) 14%, #1E1828); }
}

/* ── base ── */
html { background: var(--rg-ground); -webkit-text-size-adjust: 100%; }
body.rg { margin: 0; min-height: 100vh; background: var(--rg-ground); color: var(--rg-ink); font: 400 15px/1.55 var(--rg-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.rg *, body.rg *::before, body.rg *::after { box-sizing: border-box; }
body.rg a { color: inherit; }
body.rg img { max-width: 100%; }
:where(body.rg) button { font: inherit; color: inherit; cursor: pointer; }
body.rg :focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; border-radius: 6px; }
.rg-wrap { width: 100%; max-width: var(--rg-wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .rg-wrap { padding: 0 16px; } }
.rg-display { font-family: var(--rg-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; margin: 0; }
.rg-h1 { font-family: var(--rg-display); font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.015em; margin: 0; }
.rg-h2 { font-family: var(--rg-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.rg-h3 { font-size: 17px; font-weight: 650; line-height: 1.3; margin: 0; }
.rg-lead { font-size: 17px; line-height: 1.6; color: var(--rg-ink-2); max-width: 60ch; }
.rg-muted { color: var(--rg-muted); }
.rg-small { font-size: 13px; color: var(--rg-muted); }
.rg-kicker { font-size: 13px; font-weight: 600; color: var(--rg-accent-deep); margin: 0 0 8px; }   /* sentence case, never uppercase */

/* ── top bar: a thin ribbon in the occasion's colors under it ── */
.rg-top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--rg-ground) 86%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.rg-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--rg-festive); opacity: .9; pointer-events: none; }
.rg-top-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.rg-mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--rg-ink); font-weight: 700; letter-spacing: .02em; }
.rg-mark img { width: 24px; height: 24px; display: block; }
.rg-mark .sub { font-weight: 500; color: var(--rg-muted); letter-spacing: 0; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--rg-line); }
.rg-top-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rg-top-nav a { text-decoration: none; font-size: 14px; font-weight: 550; color: var(--rg-ink-2); padding: 8px 10px; border-radius: 8px; }
.rg-top-nav a:hover { background: var(--rg-paper); }
@media (max-width: 760px) { .rg-top-nav a.hide-sm { display: none; } .rg-mark .sub { display: none; } }

/* ── buttons: the accent is a gradient with real depth ── */
.rg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--rg-line); background: var(--rg-paper); color: var(--rg-ink); font: 600 14.5px/1.1 var(--rg-sans); text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background .15s ease, opacity .15s ease, transform .15s var(--rg-ease), box-shadow .2s ease, filter .15s ease; }
.rg-btn:hover { border-color: var(--rg-ink); }
.rg-btn:active { transform: scale(.98); }
.rg-btn[disabled], .rg-btn.is-busy { opacity: .55; pointer-events: none; }
.rg-btn.ink { background: var(--rg-ink); color: var(--rg-ground); border-color: transparent; }
.rg-btn.ink:hover { opacity: .9; }
.rg-btn.accent { background: var(--rg-accent) var(--rg-grad); color: var(--rg-accent-ink); border-color: transparent;
  box-shadow: 0 10px 20px -12px var(--rg-glow), inset 0 1px 0 rgba(255,255,255,.22); }
.rg-btn.accent:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -12px var(--rg-glow), inset 0 1px 0 rgba(255,255,255,.22); filter: saturate(1.08); }
.rg-btn.accent:active { transform: translateY(0) scale(.98); }
.rg-btn.ghost { background: transparent; border-color: transparent; }
.rg-btn.ghost:hover { background: var(--rg-paper); border-color: var(--rg-line); }
.rg-btn.sm { min-height: 34px; padding: 7px 13px; font-size: 13.5px; }
.rg-btn.lg { min-height: 50px; padding: 13px 24px; font-size: 16px; }
.rg-btn.block { width: 100%; }
.rg-btn svg { width: 18px; height: 18px; flex: none; }
.rg-link { background: none; border: 0; padding: 0; font-weight: 600; color: var(--rg-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rg-accent-line); }
.rg-link:hover { text-decoration-color: currentColor; }
.rg-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rgSpin .7s linear infinite; display: inline-block; }
@keyframes rgSpin { to { transform: rotate(360deg); } }

/* ── chips: the chosen one wears the gradient ── */
.rg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rg-chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.rg-chips.scroll::-webkit-scrollbar { display: none; }
.rg-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rg-line); background: var(--rg-paper); color: var(--rg-ink-2); font: 550 13.5px/1 var(--rg-sans); white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.rg-chip:hover { border-color: var(--rg-accent); color: var(--rg-ink); }
.rg-chip.on, .rg-chip[aria-pressed="true"] { background: var(--rg-accent) var(--rg-grad); color: var(--rg-accent-ink); border-color: transparent; }
.rg-chip .n { font-weight: 500; opacity: .75; }

/* ── form ── */
.rg-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.rg-label { font-size: 13.5px; font-weight: 600; color: var(--rg-ink); }
.rg-label .opt { font-weight: 450; color: var(--rg-muted); }
.rg-help { font-size: 12.5px; color: var(--rg-muted); line-height: 1.45; }
.rg-input, .rg-textarea, .rg-select { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--rg-line); background: var(--rg-paper); color: var(--rg-ink); font: 400 15.5px/1.4 var(--rg-sans); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.rg-textarea { min-height: 96px; resize: vertical; }
.rg-input::placeholder, .rg-textarea::placeholder { color: var(--rg-faint); }
.rg-input:focus, .rg-textarea:focus, .rg-select:focus { border-color: var(--rg-accent); box-shadow: 0 0 0 3px var(--rg-accent-wash); }
.rg-input.is-bad, .rg-textarea.is-bad { border-color: var(--rg-err); }
.rg-err-text { font-size: 12.5px; color: var(--rg-err); }

/* ── surfaces ── */
.rg-card { background: var(--rg-paper); border: 1px solid var(--rg-line); border-radius: var(--rg-r-lg); }
.rg-card.pad { padding: 22px; }
.rg-panel { background: var(--rg-paper-2); border: 1px solid var(--rg-line-2); border-radius: var(--rg-r-lg); }
.rg-rule { height: 1px; background: var(--rg-line); border: 0; margin: 24px 0; }
.rg-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--rg-accent-wash); color: var(--rg-accent-deep); }
.rg-badge.ok { background: color-mix(in srgb, var(--rg-ok) 12%, transparent); color: var(--rg-ok); }
.rg-badge.mute { background: var(--rg-line-2); color: var(--rg-muted); }

/* progress: a warm, shared goal. The fill runs from the occasion's color
   into the owner's accent and ends in a small glowing bead. */
.rg-progress { position: relative; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--rg-accent) 12%, var(--rg-line-2)); overflow: visible; }
.rg-progress > i { position: relative; display: block; height: 100%; border-radius: 8px; width: 0; max-width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rg-accent-2) 70%, var(--rg-paper)), var(--rg-accent) 75%); transition: width .9s var(--rg-ease); }
.rg-progress > i::after { content: ""; position: absolute; right: -2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--rg-paper); border: 3px solid var(--rg-accent); box-shadow: 0 0 0 4px var(--rg-accent-wash); }
.rg-progress > i[style*="width:0%"]::after, .rg-progress > i[style*="width: 0%"]::after { display: none; }
/* milestone pins along the bar: first gift, halfway, every gift */
.rg-ms { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rg-paper); border: 1.5px solid var(--rg-line); color: var(--rg-faint); z-index: 1; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s var(--rg-spring); }
.rg-ms svg { width: 9px; height: 9px; }
.rg-ms.is-on { background: var(--rg-accent) var(--rg-grad); border-color: transparent; color: var(--rg-accent-ink); transform: scale(1.12); }

/* ── the lined envelope: a colored band printed with the occasion pattern ── */
.rg-liner { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; isolation: isolate;
  background:
    radial-gradient(55% 120% at 0% 0%, color-mix(in srgb, var(--oc-2) 42%, transparent), transparent 70%),
    radial-gradient(50% 110% at 100% 0%, color-mix(in srgb, var(--oc-3) 38%, transparent), transparent 70%),
    radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--oc-1) 30%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--rg-accent) 24%, var(--oc-tint)), color-mix(in srgb, var(--rg-accent-2) 16%, var(--oc-tint)));
}
.rg-liner > i { display: none; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .rg-liner > i { display: block; position: absolute; inset: 0; -webkit-mask-repeat: repeat; mask-repeat: repeat;
    -webkit-mask-size: var(--rg-liner-size, 128px) var(--rg-liner-size, 128px); mask-size: var(--rg-liner-size, 128px) var(--rg-liner-size, 128px);
    -webkit-mask-position: var(--rg-liner-pos, 0 0); mask-position: var(--rg-liner-pos, 0 0); opacity: var(--rg-liner-o, .92); }
  .rg-liner > i:nth-child(1) { background: var(--oc-1); -webkit-mask-image: var(--liner-1); mask-image: var(--liner-1); }
  .rg-liner > i:nth-child(2) { background: var(--oc-2); -webkit-mask-image: var(--liner-2); mask-image: var(--liner-2); }
  .rg-liner > i:nth-child(3) { background: var(--oc-3); -webkit-mask-image: var(--liner-3); mask-image: var(--liner-3); }
}
:root[data-mode="dark"] .rg-liner { --rg-liner-o: .62;
  background:
    radial-gradient(60% 110% at 0% 0%, color-mix(in srgb, var(--oc-2) 22%, transparent), transparent 72%),
    radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--oc-1) 18%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--rg-accent) 30%, #1A1524), color-mix(in srgb, var(--rg-accent-2) 18%, #16121F)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .rg-liner { --rg-liner-o: .62;
    background:
      radial-gradient(60% 110% at 0% 0%, color-mix(in srgb, var(--oc-2) 22%, transparent), transparent 72%),
      radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--oc-1) 18%, transparent), transparent 72%),
      linear-gradient(135deg, color-mix(in srgb, var(--rg-accent) 30%, #1A1524), color-mix(in srgb, var(--rg-accent-2) 18%, #16121F)); }
}

/* the envelope: the liner sits behind the top of whatever card is inside */
.rg-env { position: relative; padding: clamp(34px, 5vw, 60px) clamp(10px, 4vw, 52px) 0; border-radius: 30px; }
.rg-env > .rg-liner { bottom: auto; height: var(--rg-env-h, 64%); min-height: 150px; border-radius: 30px; }
.rg-env > :not(.rg-liner) { position: relative; z-index: 1; }
@media (max-width: 640px) { .rg-env { padding: 26px 10px 0; border-radius: 22px; } .rg-env > .rg-liner { border-radius: 22px; } }

/* the crest: the occasion's drawing at the top of an invitation */
.rg-crest { position: relative; display: block; width: var(--rg-crest-w, 168px); max-width: 100%; aspect-ratio: 2 / 1; margin: 0 auto; pointer-events: none; }
.rg-crest > i { display: none; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .rg-crest > i { display: block; position: absolute; inset: 0; -webkit-mask: var(--rg-m) center / contain no-repeat; mask: var(--rg-m) center / contain no-repeat; }
  .rg-crest > i:nth-child(1) { --rg-m: var(--crest-1); background: var(--oc-1); }
  .rg-crest > i:nth-child(2) { --rg-m: var(--crest-2); background: var(--oc-2); }
  .rg-crest > i:nth-child(3) { --rg-m: var(--crest-3); background: var(--oc-3); }
  .rg-crest > i:nth-child(4) { --rg-m: var(--crest-4); background: var(--oc-5); }
}

/* ── the invitation card (guest page hero; previews on create and published) ── */
.rg-invite { position: relative; background: var(--rg-paper); border-radius: 8px; padding: clamp(30px, 5vw, 56px) clamp(22px, 5vw, 64px) clamp(34px, 5vw, 58px); text-align: center;
  box-shadow: 0 2px 4px rgba(27,26,23,.04), 0 30px 60px -34px color-mix(in srgb, var(--rg-accent) 50%, rgba(27,26,23,.5));
  outline: 1px solid var(--rg-accent-line); outline-offset: -12px; }
.rg-invite::after { content: ""; position: absolute; inset: 16px; border: 1px solid var(--rg-accent-line); border-radius: 3px; pointer-events: none; }
.rg-invite > .rg-crest { margin-bottom: 6px; }
.rg-invite-k { font-size: 13px; font-weight: 650; color: var(--rg-accent-deep); margin: 0 0 16px; }
.rg-invite-names { font-family: var(--rg-display); font-weight: 400; font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -.015em; margin: 0; color: var(--rg-ink); overflow-wrap: anywhere; }
.rg-invite-amp { color: var(--rg-accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rg-invite-amp { background: linear-gradient(120deg, var(--rg-accent) 20%, var(--rg-accent-2) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .04em; }
}
.rg-invite-meta { margin: 18px 0 0; font-size: 15px; color: var(--rg-ink-2); }
.rg-invite-note { margin: 22px auto 0; max-width: 54ch; font-size: 15.5px; line-height: 1.7; color: var(--rg-ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .rg-invite { box-shadow: var(--rg-shadow), 0 30px 60px -30px rgba(6,3,14,.9); } }
:root[data-mode="dark"] .rg-invite { box-shadow: var(--rg-shadow), 0 30px 60px -30px rgba(6,3,14,.9); }

/* countdown: a friendly ticket under the date */
.rg-count { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--rg-accent-wash); color: var(--rg-ink-2); font-size: 14px; font-weight: 550; line-height: 1.2; text-align: left; }
.rg-count b { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 9px; border-radius: 999px; background: var(--rg-accent) var(--rg-grad); color: var(--rg-accent-ink);
  font: 400 21px/1 var(--rg-display); font-variant-numeric: lining-nums; }
.rg-count.is-today b { padding: 0 12px; font: 700 13px/1 var(--rg-sans); }

/* ── gift card (shared shape): white photo plate, warm accents, lift on hover ── */
.rg-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
@media (max-width: 640px) { .rg-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.rg-gift { position: relative; display: flex; flex-direction: column; background: var(--rg-paper); border: 1px solid var(--rg-line); border-radius: var(--rg-r); overflow: hidden;
  transition: transform .28s var(--rg-ease), box-shadow .28s ease, border-color .2s ease; }
.rg-gift::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 4px; background: var(--rg-grad); opacity: 0; transition: opacity .2s ease; }
@media (hover: hover) {
  .rg-gift:hover { transform: translateY(-4px); border-color: var(--rg-accent-line); box-shadow: 0 24px 40px -26px var(--rg-glow), 0 2px 6px -2px rgba(27,26,23,.08); }
  .rg-gift:hover::before { opacity: 1; }
}
.rg-gift-img { position: relative; aspect-ratio: 1 / 1; background: var(--rg-photo); border-bottom: 1px solid var(--rg-line-2); overflow: hidden; display: grid; place-items: center; }
.rg-gift-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; opacity: 0; transition: opacity .3s ease, transform .4s var(--rg-ease); }
.rg-gift-img img.is-in { opacity: 1; }
@media (hover: hover) { .rg-gift:hover .rg-gift-img img.is-in { transform: scale(1.03); } }
.rg-gift-img .ph { width: 38px; height: 38px; color: #C9C3B8; }
.rg-gift-body { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px 14px; flex: 1; }
.rg-gift-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.rg-gift-meta { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 2px; }
.rg-gift-price { font-size: 14.5px; font-weight: 700; color: var(--rg-accent-deep); }
.rg-gift-store { font-size: 12.5px; color: var(--rg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-gift.is-taken .rg-gift-img img { filter: grayscale(.5); opacity: .6; }
.rg-gift.is-taken .rg-gift-name, .rg-gift.is-taken .rg-gift-meta, .rg-gift.is-taken .rg-gift-price { color: var(--rg-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .rg-gift-img { filter: brightness(.92); } }
:root[data-mode="dark"] .rg-gift-img { filter: brightness(.92); }

/* the corner ribbon on a reserved gift (decorative; the card also says it in words) */
.rg-ribbon { position: absolute; z-index: 3; top: 20px; right: -42px; width: 160px; padding: 6px 0 5px; transform: rotate(45deg);
  background: var(--rg-accent) var(--rg-grad); color: var(--rg-accent-ink); text-align: center; font: 700 11.5px/1.15 var(--rg-sans); letter-spacing: .02em;
  box-shadow: 0 8px 16px -8px rgba(27,26,23,.45); pointer-events: none; }
.rg-ribbon::before, .rg-ribbon::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--rg-accent-ink) 35%, transparent); }
.rg-ribbon::before { top: 2px; } .rg-ribbon::after { bottom: 2px; }
@media (max-width: 640px) { .rg-ribbon { top: 14px; right: -46px; width: 150px; font-size: 10.5px; } }

/* ── skeleton ── */
.rg-sk { background: linear-gradient(90deg, var(--rg-line-2) 0%, var(--rg-paper-2) 50%, var(--rg-line-2) 100%); background-size: 200% 100%; animation: rgSk 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes rgSk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── sheet: bottom sheet on phones, centred dialog on desktop; a festive ribbon on top ── */
.rg-sheet-back { position: fixed; inset: 0; z-index: 100; background: rgba(20,18,15,.42); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.rg-sheet-back.is-open { opacity: 1; }
.rg-sheet { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--rg-paper); color: var(--rg-ink); border-radius: 22px 22px 0 0; padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); transform: translateY(24px); transition: transform .25s var(--rg-ease); box-shadow: var(--rg-shadow-lg);
  background-image: linear-gradient(var(--rg-paper), var(--rg-paper)), var(--rg-festive); background-size: 100% 100%, 100% 5px; background-position: 0 5px, 0 0; background-repeat: no-repeat; }
.rg-sheet-back.is-open .rg-sheet { transform: none; }
@media (min-width: 700px) { .rg-sheet-back { align-items: center; } .rg-sheet { border-radius: 22px; padding: 30px 26px 26px; } }
.rg-sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.rg-sheet-title { font-family: var(--rg-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; flex: 1; }
.rg-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rg-line); background: var(--rg-paper); display: grid; place-items: center; }
.rg-x:hover { border-color: var(--rg-ink); }

/* ── toast ── */
.rg-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 120; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--rg-ink); color: var(--rg-ground); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--rg-shadow-lg); transition: opacity .2s ease, transform .2s ease; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
.rg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* a celebration toast: the same toast in the owner's colors */
.rg-toast.is-party { background: var(--rg-accent) var(--rg-grad); color: var(--rg-accent-ink); }

/* ── celebration ── */
.rg-party { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
@keyframes rgPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rgRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rgSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.rg-pop { animation: rgPop .6s var(--rg-ease) both; }
/* the success badge: a gradient seal with the occasion's sparkle around it */
.rg-seal { position: relative; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rg-accent) var(--rg-grad); color: var(--rg-accent-ink); box-shadow: 0 0 0 6px var(--rg-accent-wash), 0 14px 26px -12px var(--rg-glow); animation: rgPop .6s var(--rg-ease) both; }
.rg-seal svg { width: 28px; height: 28px; }
.rg-seal::before, .rg-seal::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--oc-3);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.rg-seal::before { left: -14px; top: 6px; }
.rg-seal::after { right: -12px; bottom: 4px; width: 9px; height: 9px; background: var(--oc-2); }

/* ── footer: the festive ribbon closes the page too ── */
.rg-foot { position: relative; border-top: 1px solid var(--rg-line-2); margin-top: 64px; padding: 32px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--rg-muted); font-size: 13.5px; }
.rg-foot::before { content: ""; position: absolute; left: 50%; top: -2px; width: 96px; height: 3px; margin-left: -48px; border-radius: 3px; background: var(--rg-festive); }
.rg-foot a { color: var(--rg-muted); text-decoration: none; }
.rg-foot a:hover { color: var(--rg-ink); }

/* ── the light/dark toggle (theme.js builds .gmode) ── */
body.rg .gmode { position: fixed; z-index: 60; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--rg-line); background: var(--rg-paper); color: var(--rg-ink); box-shadow: var(--rg-shadow); font: 600 12.5px var(--rg-sans); line-height: 1; cursor: pointer; }
body.rg .gmode:hover { transform: none; border-color: var(--rg-ink); }
body.rg .gmode-i { display: inline-grid; place-items: center; width: 14px; height: 14px; }
body.rg .gmode-i svg { width: 14px; height: 14px; }
@media (max-width: 560px) { body.rg .gmode { right: 12px; bottom: 12px; padding: 9px; } body.rg .gmode-t { display: none; } }

@media (prefers-reduced-motion: reduce) {
  body.rg *, body.rg *::before, body.rg *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rg-gift:hover, .rg-btn.accent:hover { transform: none; }
  .rg-party { display: none; }
}
@media print { .rg-top, .gmode, .rg-toast, .rg-party, .rg-liner { display: none !important; } body.rg { background: #fff; } }

/* phones: 16px fields so iOS does not zoom; one focus ring on fields */
@media (max-width: 640px) { .rg-input, .rg-textarea, .rg-select { font-size: 16px; } }
.rg-input:focus-visible, .rg-textarea:focus-visible, .rg-select:focus-visible { outline: none; }

/* Drawing layers start as a transparent image. /registry/rg-motifs.css
   (generated, loaded without blocking first paint) fills them per occasion.
   Never "none": a mask of none would paint the layer as a solid block. */
:root {
  --rg-empty: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'/>");
  --crest-1: var(--rg-empty); --crest-2: var(--rg-empty); --crest-3: var(--rg-empty); --crest-4: var(--rg-empty);
  --liner-1: var(--rg-empty); --liner-2: var(--rg-empty); --liner-3: var(--rg-empty);
}