/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════
   The house look for every Eat with Ease and Staff with Ease page (6 Nov 2026, Jacques: "every subsequent page
   to have the shimmery Ease format and colour, including the side nav bars"), the same as livewithease.org:

     - the app name in the home page's lettering (Cormorant Garamond), with the shimmering gold "Ease"
     - one app, one gem: Eat with Ease is sapphire, Staff with Ease is garnet; the header and the side menu are
       cut from it, and the app's buttons and links take its colour
     - page titles in the same lettering

   ewe/middleware.py adds this stylesheet at the end of <head> on every HTML page (after the page's own styles, so
   these rules win), like the shared button look. The side-by-side check ignores that tag (tools/compare_django.py).
   Wording, sizes, contrast and the big buttons are unchanged (guest feedback, 20 Oct 2026).
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --ease-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --ease-gold: #c9a45e; --ease-gold-deep: #8a6420; }

/* one app, one gem (the same stones as livewithease.org) */
body, body.site-eat { --deep: #08236b; --g: #0f52ba; --fire: #5a95ff; }
body.site-staff, body.console.site-staff { --deep: #3f0410; --g: #8a0f22; --fire: #e0304a; }
/* the header card, as on Study with Ease (10 Nov 2026): a soft wash of the app's gem, the title in its deep colour */
body, body.site-eat { --hd: linear-gradient(135deg, #9CC0F2 0%, #BFD3F6 45%, #DCE6F8 75%, #EEF2FA 100%); --hd-ink: #08236b; --hd-sub: #1a3f8a; }
body.site-staff, body.console.site-staff { --hd: linear-gradient(135deg, #E7A3AE 0%, #F0C3C6 45%, #F6DAD3 75%, #FAEDE6 100%); --hd-ink: #3f0410; --hd-sub: #6b1626; }
body { --navy: var(--g); --navy-dark: var(--deep); --back-ink: var(--g); }   /* the app's buttons and links wear its gem */
body:not(.console) { --app: var(--g); }                                     /* (the console's pick buttons keep their gold) */

/* ── the shimmering Ease ───────────────────────────────────────────────────────────────────────────────────── */
.ease { font-style: italic; font-weight: inherit; padding-right: .06em; color: transparent;
  background: linear-gradient(100deg, var(--ease-gold-deep) 0%, var(--ease-gold) 30%, #fff6dc 45%, var(--ease-gold) 60%, var(--ease-gold-deep) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; animation: ease-run 6s ease-in-out infinite; }
/* on the gem (a dark header or the side menu): the lighter gold, so it reads */
.cside .ease, .on-gem .ease {
  background-image: linear-gradient(100deg, #c9a45e 0%, #f3dca6 30%, #fff6dc 45%, #f3dca6 60%, #c9a45e 100%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
@keyframes ease-run { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
@keyframes ease-sheen { 0%, 64% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .ease, .cside::before { animation: none !important; } }

/* ── the app header on every page built on base.html (sign-in, guest pages, Help, the staff pages …) ───────── */
.brand-header { position: relative; text-align: left; margin: 8px 0 10px; padding: 22px 18px 18px; border-radius: 18px;
  background: var(--hd); color: var(--hd-ink); box-shadow: 0 1px 2px rgba(22,32,58,.05), 0 14px 32px -22px rgba(22,32,58,.4); }
.brand-header a { display: block; color: var(--hd-ink); }
.brand-name, body.site-eat .brand-name, body.site-staff .brand-name { display: block; font-family: var(--ease-serif); font-size: 2rem; font-weight: 600;
  line-height: 1.1; letter-spacing: 0; color: var(--hd-ink); }
.brand-name i { color: #7A5C1E !important; font-weight: 400 !important; }
.brand-sub { color: var(--hd-sub); font-size: .94rem; letter-spacing: 0; text-transform: none; margin-top: 2px; }

/* the page's menu under it: pills in the gem; the page you are on stays ivory in its gold ring */
.nav { padding-top: 2px; }
/* (base.html's own <style> comes after this sheet, so these are written to outrank it) */
body .nav a { border-radius: 999px; }
body .nav a.here { box-shadow: 0 0 0 1px var(--ease-gold); }   /* the ring follows the pill */

/* titles in the app-name lettering */
body:not(.console) h1 { font-family: var(--ease-serif); font-size: 1.9rem; font-weight: 600; line-height: 1.12; letter-spacing: 0; }
body:not(.console) h1 i { font-style: italic; font-weight: 500; color: var(--ease-gold-deep); }

/* ── the console (inside a restaurant): the side menu is cut from the gem ─────────────────────────────────── */
body.console, body.console.site-staff { --c-side: var(--deep); --c-side-2: color-mix(in srgb, var(--deep) 72%, #000); --c-side-active: var(--g);
  --c-side-accent: #d9b25c; --c-side-ink: rgba(255,255,255,.86); --c-side-muted: rgba(255,255,255,.6); }
.cside { position: sticky; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 50% at 0% 0%, rgba(255,255,255,.16), transparent 52%),
              radial-gradient(70% 36% at 100% 0%, color-mix(in srgb, var(--fire) 50%, transparent), transparent 70%),
              linear-gradient(180deg, var(--c-side), var(--c-side-2)); }
.cside::before { content: ""; position: absolute; top: 0; height: 240px; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16) 45%, transparent); animation: ease-sheen 12s ease-in-out infinite; }
.cside__house { display: block; padding: 16px 16px 0; font-family: var(--ease-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.05;
  color: #fff; text-decoration: none; letter-spacing: 0; }
.cside__house i { font-style: italic; font-weight: 500; color: #f3dca6; }
.cside__house small { display: block; font-family: var(--c-font, 'IBM Plex Sans', sans-serif); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 3px; }
.cside__brand { padding-top: .8rem; }
.cside__brand .nm { font-family: var(--ease-serif); font-size: 1.15rem; font-weight: 600; }
.cside__brand .nm small { font-family: var(--c-font, 'IBM Plex Sans', sans-serif); }
.cbrandmark { background: linear-gradient(150deg, #f3dca6, #c9a45e 55%, #a07a2a); color: var(--deep); border-radius: 50%; }
.cnav a { border-radius: 999px; }
.cnav a.active { background: rgba(255,255,255,.14); border-color: rgba(217,178,92,.55); }
.cnav a.active svg { color: #f3dca6; }
.cavatar, body.console.site-staff .cavatar { background: var(--g); }
/* the top bar is the header card: the app's soft gem wash, dark title (:not(#lwe-hd) only makes these outrank style.css's own Eat-only bar) */
html body.console:not(#lwe-hd) .ctop { color: var(--hd-ink); border-bottom: 0; background: var(--hd); margin: 12px 14px 0; border-radius: 18px; top: 8px;
  box-shadow: 0 1px 2px rgba(22,32,58,.05), 0 14px 32px -22px rgba(22,32,58,.4); }
html body.console:not(#lwe-hd) .ctop .ccrumb, html body.console:not(#lwe-hd) .ctop .ccrumb b { color: var(--hd-ink); }
html body.console:not(#lwe-hd) .ctop .ccrumb { min-width: 0; flex: 1 1 auto; overflow: hidden; }
html body.console:not(#lwe-hd) .ctop .ccrumb b { display: block; font-family: var(--ease-serif); font-size: 1.35rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.console:not(#lwe-hd) .ctop .chamb { color: var(--hd-ink); border-color: color-mix(in srgb, var(--hd-ink) 35%, transparent); width: auto; }
html:not(#ewe-polish) body.console:not(#lwe-hd) .ctop :is(a, button):not(.chamb) { background: var(--deep) !important; border: 1px solid var(--deep) !important; color: #fff !important; }
html:not(#ewe-polish) body.console:not(#lwe-hd) .ctop :is(a, button):not(.chamb):hover { background: var(--g) !important; }
/* Staff with Ease gets the same lettering and card shapes as Eat with Ease (style.css wrote these for Eat only) */
body.console .chead h1, body.console .pane-title { font-family: var(--ease-serif); font-size: 2rem; font-weight: 600; letter-spacing: .005em; line-height: 1.08; }
body.console .pane-title { font-size: 1.6rem; }
body.console .mc-title, body.console .card h2, body.console .group-title { font-family: var(--ease-serif); font-size: 1.22rem; font-weight: 600; letter-spacing: .005em; }
body.console .card, body.console .mc { border-radius: 18px; }
.cside__brand .nm small { display: none; }   /* "Operations console" is said once, under the app's name */

/* ── the Live with Ease pages (hub, legal, for sale, landing): the brand in the house lettering ─────────────── */
a.brand, p.brand { font-family: var(--ease-serif) !important; font-weight: 600 !important; letter-spacing: 0; }
a.brand i, p.brand i { font-style: italic; font-weight: 500 !important; }