/* css/wc-lux.css  [lux] 11 Oct 2026. Owner (Ben): the hero sections went flat; make them metallic, glistening, high definition, still
   professional. One shared material for every page hero, opted in with class="wc-lux" (dark emerald) or "wc-lux wc-lux--light" (pearl).
   Loaded once from admin/includes/admin-navigation.php. The material:
     deep emerald (its own tokens: the theme's sage-deep is an olive that turns muddy at hero size), a light source from the top left,
     a vignette at the foot, fine grain so gradients never band, a brushed-gold foil edge, a bevel, layered depth shadow, glass stat tiles,
     foil kicker text, and one slow, narrow glint across the surface once per page view (never a loop). No glint with reduced motion. */

:root {
  --lux-emerald-hi: #204C3C;   /* where the light lands */
  --lux-emerald: #173F31;
  --lux-emerald-lo: #0D271E;   /* the shadowed corner */
  --lux-gold-dk: #7A5C17;
  --lux-gold: #D4B05A;
  --lux-gold-hi: #F7E9B8;      /* specular on the foil */
  --lux-on: #FBF8F0;
  --lux-kicker: #F5E7BE;        /* champagne label: 5.9:1 at rest on the lit corner */
  --lux-kicker-light: #6E5214;  /* dark gold label on pearl: 5.9 to 7.3:1 */
  --lux-on-2: rgba(251, 248, 240, .86);
  --lux-pearl: #FFFFFF;
  --lux-pearl-2: #FBF7EE;
  --lux-pearl-3: #F0E7D2;
  --lux-pearl-ink: #2F3830;
  --lux-pearl-ink-2: #4F4739;
  --lux-pearl-muted: #6A5F50;
  --lux-cream-field: #FFFDF8;
  --lux-btn-hi: #2C6A52;
  --lux-btn: #1F5341;
  --lux-btn-lo: #163E30;
  --lux-btn-edge: #133627;
  --lux-btn-hover: #33765C;
  --lux-paper: #FFFFFF;
  --lux-paper-2: #FBF9F4;
  --lux-print-ink: #000000;
  --lux-print-line: #999999;
  --lux-glint-dur: 1700ms;      /* one pass per page view, never a loop (owner, 6 Oct: nothing that keeps moving) */
  --lux-champ-fill: linear-gradient(180deg, #F3E3AE 0%, #D9B866 52%, #B18D3E 100%);
  --lux-champ-ink: #2B220C;
  --lux-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lux-grain-dk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lux-foil: linear-gradient(118deg, var(--lux-gold-dk) 0%, #E6CB80 16%, #9B7826 32%, var(--lux-gold-hi) 50%, #A07E2C 66%, #E3C477 84%, var(--lux-gold-dk) 100%);
}

/* the surface (also the shared KPI strip .wc-kpis on 26 pages, so it upgrades without page edits) */
[data-theme] .wc-lux.wc-lux, .wc-lux.wc-lux, [data-theme] .wc-kpis.wc-kpis, #wcal .wc-lux.wc-lux {   /* #wcal: calendar.css styles its masthead by id */
  position: relative;
  isolation: isolate;
  font-feature-settings: "lnum" 1;   /* upright figures for every child, alongside any tabular-nums */
  color: var(--lux-on);
  border: 1px solid transparent;
  background:
    linear-gradient(104deg, transparent 0 46%, rgba(255, 246, 214, .07) 48.5%, rgba(255, 255, 255, .17) 50%, rgba(255, 246, 214, .07) 51.5%, transparent 54% 100%) padding-box,
    var(--lux-grain) padding-box,
    radial-gradient(70% 110% at 8% -10%, rgba(255, 255, 255, .10), transparent 58%) padding-box,
    radial-gradient(45% 90% at 104% -6%, rgba(247, 233, 184, .06), transparent 62%) padding-box,
    radial-gradient(130% 120% at 60% 135%, rgba(0, 0, 0, .38), transparent 58%) padding-box,
    linear-gradient(138deg, var(--lux-emerald-hi) 0%, var(--lux-emerald) 42%, var(--lux-emerald-lo) 100%) padding-box,
    var(--lux-foil) border-box;
  background-size: 260% 100%, 180px 180px, auto, auto, auto, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 135% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(0, 0, 0, .34),
    0 1px 2px rgba(8, 26, 19, .22),
    0 18px 38px -18px rgba(8, 30, 22, .60),
    0 44px 90px -46px rgba(8, 30, 22, .50);
  /* !important only here: wc-ui.css [still] stops page animation with !important; this one pass is the owner-directed exception (11 Oct) */
  animation: lux-glint var(--lux-glint-dur) cubic-bezier(.45, .05, .25, 1) 1200ms 1 both !important;
  /* inside the surface the theme gold becomes champagne-bronze, so rings, bars and icons stop reading as mustard */
  --wcs-gold: var(--lux-gold);
  --wcs-gold-ink: var(--lux-gold-hi);
}
@keyframes lux-glint      { from { background-position: 135% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: -35% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }

/* page overlays that muddy the material: a gold glow over green turns olive, and the stripe texture reads as a smudge */
[data-theme] .wc-lux.mm-hero::after, [data-theme] .wc-lux.ja-hero::after, [data-theme] .wc-lux.aw-hero::before { display: none; }
[data-theme] .wc-lux.digest-hero::before { background: var(--lux-foil); height: 3px; }

/* type on the surface */
:is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) h1, .wc-lux.wc-lux h2:first-of-type {
  color: var(--lux-on);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 12px 32px rgba(0, 0, 0, .28);
}
[data-theme] :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([class$="-k"], [class*="-k "], [class$="-kicker"], [class*="-kicker "], [class*="eyebrow"]),
:is(.wc-lux.wc-lux:not(.wc-lux--light), .wc-kpis.wc-kpis) p:is([class$="-k"], [class*="-k "], [class$="-kicker"], [class*="-kicker "], [class*="eyebrow"]) {
  color: var(--lux-kicker);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* figures stand upright: Cormorant's default old-style numerals read as "$4oo" at display size */
[data-theme] :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is(h1, h2, h3, dd, dt, b, strong, td, th, output, data, [class*="big"], [class*="num"], [class*="val"], [class*="figure"], [class*="amount"], [class*="total"], [class$="-n"]) { font-variant-numeric: lining-nums tabular-nums; }
/* every glass tile shares one corner; cells that were never boxes get room to breathe */
:is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([class$="-tile"], [class*="-tile "], [class$="-stat"], [class*="-stat "], [class$="-kpi"], [class*="-kpi "]) { border-radius: var(--wcs-radius-sm, 12px); }
[data-theme] .wc-lux.wc-lux .ta-stat { padding: 16px 18px; border-top: 1px solid rgba(255, 255, 255, .14); }

/* body copy never sinks below about 88% white */
:is(.wc-lux.wc-lux:not(.wc-lux--light), .wc-kpis.wc-kpis) p { color: var(--lux-on-2); opacity: 1; }
/* the chosen pill or button: polished champagne, not a flat mustard */
:is(.wc-lux.wc-lux:not(.wc-lux--light), .wc-kpis.wc-kpis) :is([aria-pressed="true"], [aria-current="page"], [aria-current="true"], .is-on, .is-active, a.on, button.on) {
  background: var(--lux-champ-fill); color: var(--lux-champ-ink); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 64, 14, .35), 0 6px 16px -8px rgba(0, 0, 0, .55);
}

/* glass tiles inside the surface: lit top edge, depth below; a tile's own state colour still wins the border */
:is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([class$="-tile"], [class*="-tile "], [class$="-stat"], [class*="-stat "], [class$="-kpi"], [class*="-kpi "], .rv-mode) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 14px 30px -18px rgba(0, 0, 0, .60);
  transition: box-shadow .25s ease, transform .25s ease;
}
:where(.wc-lux) :where([class$="-tile"], [class*="-tile "], [class$="-stat"], [class*="-stat "], [class$="-kpi"], [class*="-kpi "], .rv-mode) { border-color: rgba(255, 255, 255, .15); }
:is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([class$="-tile"], [class*="-tile "], [class$="-stat"], [class*="-stat "], [class$="-kpi"], [class*="-kpi "]):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(212, 176, 90, .35), 0 18px 34px -18px rgba(0, 0, 0, .65);
}
.wc-lux.wc-lux .ss-ledger { background: linear-gradient(90deg, rgba(212, 176, 90, .35), rgba(255, 255, 255, .14), rgba(212, 176, 90, .35)); }
.wc-lux.wc-lux .ss-ledger > div { background: linear-gradient(180deg, rgba(14, 40, 30, .78), rgba(10, 32, 24, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* pearl: the same material in light, for heroes that sit on white */
[data-theme] .wc-lux.wc-lux--light, .wc-lux.wc-lux--light {
  --wcs-ink: var(--lux-pearl-ink); --wcs-ink-2: var(--lux-pearl-ink-2); --wcs-muted: var(--lux-pearl-muted);
  color: var(--lux-pearl-ink);
  font-feature-settings: "lnum" 1;
  background:
    linear-gradient(104deg, transparent 0 46%, rgba(255, 255, 255, .30) 48.5%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .30) 51.5%, transparent 54% 100%) padding-box,
    var(--lux-grain-dk) padding-box,
    radial-gradient(70% 120% at 6% -10%, rgba(255, 255, 255, 1), transparent 60%) padding-box,
    radial-gradient(50% 100% at 104% -8%, rgba(212, 176, 90, .14), transparent 62%) padding-box,
    linear-gradient(138deg, var(--lux-pearl) 0%, var(--lux-pearl-2) 46%, var(--lux-pearl-3) 100%) padding-box,
    var(--lux-foil) border-box;
  background-size: 260% 100%, 180px 180px, auto, auto, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 135% 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(122, 92, 23, .12), 0 1px 2px rgba(60, 45, 15, .08), 0 18px 40px -22px rgba(60, 45, 15, .28);
  animation-name: lux-glint-l !important;
}
@keyframes lux-glint-l      { from { background-position: 135% 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: -35% 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }
.wc-lux.wc-lux--light h1, .wc-lux.wc-lux--light h2:first-of-type { color: var(--lux-pearl-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
[data-theme] .wc-lux.wc-lux--light :is([class$="-k"], [class*="-k "], [class$="-kicker"], [class*="-kicker "], [class*="eyebrow"]) { color: var(--lux-kicker-light); text-shadow: none; }

[data-theme] .wc-lux.wc-lux--light :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
  background-color: var(--lux-cream-field); border-color: rgba(122, 92, 23, .28); box-shadow: inset 0 1px 2px rgba(60, 45, 15, .06);
}
[data-theme] .wc-lux.wc-lux--light :is(select, input, textarea):focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 2px; border-color: var(--lux-gold-dk); }

@media (prefers-reduced-motion: reduce) {
  [data-theme] .wc-lux.wc-lux, [data-theme] .wc-lux.wc-lux:hover, .wc-lux.wc-lux, .wc-lux.wc-lux:hover, [data-theme] .wc-kpis.wc-kpis, [data-theme] .wc-kpis.wc-kpis:hover { animation: none !important; background-position: -35% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  .wc-lux.wc-lux--light, .wc-lux.wc-lux--light:hover { background-position: -35% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([class$="-tile"], [class*="-tile "], [class$="-stat"], [class*="-stat "], [class$="-kpi"], [class*="-kpi "], .rv-mode) { transition: none; }
}
@media print {
  [data-theme] :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis), :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) { animation: none !important; background: none !important; box-shadow: none !important; border: 1px solid var(--lux-print-line) !important; color: var(--lux-print-ink) !important; }
  :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) * { color: var(--lux-print-ink) !important; text-shadow: none !important; background: none !important; box-shadow: none !important; }
}
@media (forced-colors: active) {
  [data-theme] :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis), :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) { animation: none !important; background: Canvas !important; color: CanvasText; border: 1px solid CanvasText; forced-color-adjust: auto; }
  :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([class$="-tile"], [class*="-tile "], [class$="-stat"], [class*="-stat "], [class$="-kpi"], [class*="-kpi "], .rv-mode) { border: 1px solid CanvasText; }
  :is(.wc-lux.wc-lux, .wc-kpis.wc-kpis) :is([aria-pressed="true"], [aria-current="page"], [aria-current="true"], .is-on, .is-active) { outline: 2px solid Highlight; }
}

/* [contrast] 13 Oct 2026, owner: the Start tiles and the morning brief were unreadable on the dark panel. The tile label, sub
   line and the brief's item titles took slate/ink colours from the light-card styles. On a lux surface they use the lux text
   tokens; a quiet tile (zero) stays calmer than a live one but is still readable (AA on the darkest stop of the gradient). */
[data-theme] .wc-kpis.wc-kpis .wc-kpi .wc-kpi__label, .wc-kpis.wc-kpis .wc-kpi .wc-kpi__label { color: var(--lux-on-2); letter-spacing: .08em; }
[data-theme] .wc-kpis.wc-kpis .wc-kpi .wc-kpi__value, .wc-kpis.wc-kpis .wc-kpi .wc-kpi__value { color: var(--lux-on); }
[data-theme] .wc-kpis.wc-kpis .wc-kpi .wc-kpi__sub, .wc-kpis.wc-kpis .wc-kpi .wc-kpi__sub { color: var(--lux-on-2); opacity: .92; }
[data-theme] .wc-kpis.wc-kpis .wc-kpi.is-quiet .wc-kpi__label, [data-theme] .wc-kpis.wc-kpis .wc-kpi.is-quiet .wc-kpi__sub,
.wc-kpis.wc-kpis .wc-kpi.is-quiet .wc-kpi__label, .wc-kpis.wc-kpis .wc-kpi.is-quiet .wc-kpi__sub { color: var(--lux-on-2); opacity: .8; }
[data-theme] .wc-kpis.wc-kpis .wc-kpi.is-quiet .wc-kpi__value, .wc-kpis.wc-kpis .wc-kpi.is-quiet .wc-kpi__value { color: var(--lux-on); opacity: .7; }
[data-theme] .wc-kpis.wc-kpis .wc-kpi.is-urgent .wc-kpi__value, .wc-kpis.wc-kpis .wc-kpi.is-urgent .wc-kpi__value { color: var(--lux-gold-2, #E9C98A); }
[data-theme] .lw-hero.cm-morning .cm-morning-list h3, .lw-hero.cm-morning .cm-morning-list h3 { color: var(--lux-on); font-weight: 600; }
[data-theme] .lw-hero.cm-morning .cm-morning-list p, .lw-hero.cm-morning .cm-morning-list p { color: var(--lux-on-2); }
/* [contrast] wc-ui.css styles quiet/urgent values with :not(#wc-x) (id weight); on the lux panel these win */
[data-theme] .wc-kpis.wc-kpis .wc-kpi.wc-kpi.is-quiet .wc-kpi__value:not(#wc-x):not(#wc-y) { color: var(--lux-on); opacity: .62; }
[data-theme] .wc-kpis.wc-kpis .wc-kpi.wc-kpi.is-urgent .wc-kpi__value:not(#wc-x):not(#wc-y) { color: #F2C978; }