/* PURE UI — the 5.0 design system, single source of truth.
   Tokens for visual cohesion (#3) + loading / empty / mobile utilities (#5).
   Any page (and Code's v5-slim / lane-b pages) can <link> this for a guaranteed-consistent look.
   Pages may still define :root locally; these names match exactly so nothing breaks. */
:root{
  /* brand */
  --navy:#172e55; --navy2:#0e1c33;
  --gold:#dccaaf; --gold-ink:#847969; --gold-50:#f8f4ef; --gold-100:#f1eadf;
  /* status */
  --green:#117f39; --green-soft:#e3f1e8;
  --blue:#2d5a9e;  --blue-soft:#d4eef9;
  --amber:#9a6a12; --amber-50:#fbf3e2;
  --purp:#5b4b8a;  --purp-soft:#ece8f6;
  --red:#b4452f;   --red-soft:#ece7da;
  /* neutral */
  --hair:#e3ddd2; --t2:#404040; --t3:#8e8e8e;
  /* type */
  --disp:Montserrat,sans-serif; --ui:"Open Sans",sans-serif;
  /* shape */
  --r-sm:9px; --r-md:13px; --r-lg:16px; --r-md:13px; --word:"Cinzel",serif;
  --shadow:5px 5px 12px rgba(9,18,34,.06);
  --shadow-hi:8px 12px 24px rgba(9,18,34,.13);
}

/* ---- skeleton / loading (#5) ---- */
.pu-skel{display:inline-block;border-radius:6px;background:linear-gradient(100deg,var(--gold-100) 30%,#fff 50%,var(--gold-100) 70%);background-size:200% 100%;animation:pu-shimmer 1.3s ease-in-out infinite;color:transparent!important;min-width:28px;min-height:1em;vertical-align:middle}
.pu-skel.line{display:block;height:11px;margin:7px 0}
.pu-skel.w40{width:40%}.pu-skel.w60{width:60%}.pu-skel.w80{width:80%}
@keyframes pu-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.pu-skel{animation:none}}

/* ---- empty state (#5) ---- */
.pu-empty{text-align:center;padding:34px 20px;color:var(--t3)}
.pu-empty .pu-ic{font-size:32px;opacity:.7;margin-bottom:8px}
.pu-empty b{display:block;font:800 14px var(--disp);color:var(--navy);margin-bottom:3px}
.pu-empty span{font-size:12.5px}
.pu-empty .pu-cta{display:inline-flex;margin-top:13px;min-height:40px;align-items:center;padding:0 16px;border-radius:11px;background:var(--navy);color:var(--gold);font:800 12px var(--disp);text-decoration:none}

/* ---- inline spinner ---- */
.pu-spin{display:inline-block;width:15px;height:15px;border:2px solid var(--hair);border-top-color:var(--navy);border-radius:50%;animation:pu-rot .7s linear infinite;vertical-align:-3px}
@keyframes pu-rot{to{transform:rotate(360deg)}}

/* ---- mobile helpers (#5) ---- */
@media(max-width:640px){
  .pu-hide-mobile{display:none!important}
  .pu-stack-mobile{grid-template-columns:1fr!important;flex-direction:column!important}
  .pu-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* touch targets: ensure interactive controls clear 44px on small screens */
@media(max-width:640px){
  button,.btn,a.tile,.tcard{min-height:44px}
}

/* ---- PURE icon helper (brand line icons; never emoji) ---- */
.ico{width:1.2em;height:1.2em;display:inline-block;vertical-align:-0.18em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico.lg{width:1.6em;height:1.6em}
.ico.xl{width:2em;height:2em}

/* ---- 4th color mode: Dusk (arc of day) — single source of truth ---- */
html[data-theme="dusk"]{--bg:#2a2740;--card:#353156;--ink:#ede7da;--t2:#cbc3da;--t3:#9b91b0;--hair:#4a4470;--gold-50:#2f2b4a;--gold-100:#39345a;--green-soft:#243a44;--blue-soft:#262a52;color-scheme:dark}

/* ---- arc-of-day theme palettes (Sunrise / Daylight=:root / Sunset / Midnight) ---- */
html[data-theme="sunrise"]{--bg:#ece7da;--card:#fdf6ed;--ink:#473827;--t2:#6f5c46;--t3:#a08a72;--hair:#e8d7c2;--gold-50:#fdf6ed;--gold-100:#ece7da;--green-soft:#eaefd9;--blue-soft:#f1e8dd;color-scheme:light}
html[data-theme="bright"]{--bg:#152544;--card:#172e55;--ink:#ece7da;--t2:#dccaaf;--t3:#a99f84;--hair:#33416a;--gold-50:#172e55;--gold-100:#28406a;--green-soft:#24443a;--blue-soft:#21305a;color-scheme:dark}
html[data-theme="dark"]{--bg:#0b1422;--card:#0e1c33;--ink:#e6edf7;--t2:#b6c2d6;--t3:#7f8ba3;--hair:#243349;--gold-50:#0e1c33;--gold-100:#172538;--green-soft:#16302a;--blue-soft:#16243d;color-scheme:dark}