/* ============================================================================
   DICE — D1 §1 · UNIFIED CHROME  (ONE canonical shell)   FLAT REFERENCE
   Retires the two-shell split (store shell w/ centered logo + LIGHT footer  vs
   discovery shell w/ stacked logo + pillar tabs + DARK footer). Per DH 07-25:
   the DISCOVERY shell is canonical — unified header + DARK footer + one token
   set — and CONTEXTUAL NAV is the only per-context variation.

   ONE header treatment. ONE footer. ONE token set. Two slots vary:
     · nav slot   → .dch-nav--pillars   (discovery: pillar tabs, active = C tab)
                    .dch-nav--marketing (marketing/store: plain links)
     · end slot   → .dch-end--anon      (Sign in + Request access)
                    .dch-end--auth      (Lightbox + Messages + account)
   Set ONE context class on the shell root: .dsh--marketing | .dsh--discovery,
   plus .dsh--anon | .dsh--auth. Nothing else changes between pages.

   ★ a11y fixed AT SOURCE in this pass (recurs on every authed page):
     · header logo <img> carries alt="DICEVERSE"
     · brand link + every icon control has an accessible name (aria-label)
     · Messages Prev/Next contrast: #777 (4.47:1) → var(--muted) #595959 (7.0:1)
   ★ .dcf--on-light is DELETED — dark footer everywhere incl. legal (single source).
   ========================================================================== */

:root{
  --navy:#071E32;--ink:#0B1B2B;--text:#3D4754;--muted:#595959;
  --accent:#0B599C;--accent-strong:#094B82;--accent-2:#1F80BE;
  --bg:#FFFFFF;--bg-subtle:#F8F8F8;--bg-muted:#EEF1F4;
  --border:#E2E6EA;--border-strong:#CBD2D9;--surface-page:#FFFFFF;
  --text-on-dark-muted:#B7C2CE;--focus-ring:rgba(31,128,190,.5);
  --ps:#0E8C7E;--psf:#D7F0EC;--psi:#00504A;
  --pe:#7B2FBE;--pef:#ECE3F7;--pei:#4A148C;
  --pc:#C08A12;--pcf:#FBEFCC;--pci:#6B4A00;
  --pso:#1E5FC4;--psof:#DEEAFB;--psoi:#0D3C8B;
  --font:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:6px;--rl:10px;--rp:999px;
  --xs:0 1px 2px rgba(7,30,50,.06);
  --sm:0 1px 3px rgba(7,30,50,.08),0 1px 2px rgba(7,30,50,.04);
  --md:0 6px 18px rgba(7,30,50,.10);
  --menu:0 12px 32px rgba(7,30,50,.18);
  --container:1320px;--header-h:64px;
  --ease:cubic-bezier(.22,1,.36,1);--ease-std:cubic-bezier(.4,0,.2,1);--durf:.15s;--dur:.25s;
}

*,*::before,*::after{box-sizing:border-box}
.dch,.dcf{font-family:var(--font);-webkit-font-smoothing:antialiased}
.dch a,.dcf a{text-decoration:none}
.dch img,.dcf img{display:block}
.dch button{font-family:var(--font);cursor:pointer}

/* shared button atoms — primary is ALWAYS white on the blue (locked rule) */
.dch-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;white-space:nowrap;border-radius:var(--r);cursor:pointer;transition:background var(--durf) var(--ease-std),color var(--durf) var(--ease-std),border-color var(--durf) var(--ease-std)}
.dch-btn--sm{height:38px;padding:0 16px;font-size:14px}
.dch-btn--primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.dch-btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.dch-btn--white{background:#fff;color:var(--navy);border:1px solid #fff}
.dch-btn--white:hover{background:#EAF1F8}
.dch-btn--outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.dch-btn--outline-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}

/* ============================================================================
   HEADER — one treatment for every context
   ========================================================================== */
.dch-header{position:sticky;top:0;z-index:50;background:rgba(7,30,50,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.dch-header__inner{max-width:var(--container);margin:0 auto;padding:0 32px;height:var(--header-h);display:flex;align-items:center;gap:24px}

/* brand — left-aligned in ALL contexts (the store shell's centered logo is retired) */
.dch-logo{flex:none;display:inline-flex;align-items:center}
.dch-logo img{height:22px}
.dch-logo:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:2px}

/* ---- nav slot (the ONLY per-context variation) --------------------------- */
.dch-nav{display:flex;flex:none;align-self:stretch}
.dch-nav{--nav-accent:var(--ps)}
.dch-nav--ent{--nav-accent:var(--pe)}
.dch-nav--channels{--nav-accent:var(--pc)}
.dch-nav--solutions{--nav-accent:var(--pso)}
.dch-nav .dch-nav__link{position:relative;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;transition:color var(--durf) var(--ease-std),background var(--durf) var(--ease-std)}
.dch-nav .dch-nav__link:hover{color:#fff}
.dch-nav .dch-nav__link:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}

/* discovery: full-height pillar tabs (active = C treatment, DH-picked) */
.dch-nav--pillars{align-items:stretch;gap:2px}
.dch-nav--pillars .dch-nav__link{height:100%;padding:0 16px}
.dch-nav--pillars .dch-nav__link:hover{background:rgba(255,255,255,.05)}
.dch-nav--pillars .dch-nav__link--active{font-weight:700;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--nav-accent) 24%,transparent),transparent 74%)}
.dch-nav--pillars .dch-nav__link--active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--nav-accent)}

/* marketing/store: plain links, lighter rhythm (no tab chrome) */
.dch-nav--marketing{align-items:center;gap:18px}
.dch-nav--marketing .dch-nav__link{height:auto;padding:6px 0}
.dch-nav--marketing .dch-nav__link--active{font-weight:700;color:#fff;box-shadow:inset 0 -2px 0 var(--nav-accent)}
/* the marketing nav carries more items than the pillar nav, so search yields
   space to it first: narrower box, and it collapses earlier (search is a
   discovery affordance — nav is the priority on marketing routes) */
.dsh--marketing .dch-search{max-width:300px}

/* search — same treatment everywhere */
.dch-search{flex:1;min-width:0;max-width:420px;margin:0 auto;position:relative}
.dch-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(255,255,255,.55)}
.dch-search input{width:100%;height:40px;font-family:var(--font);font-size:14px;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:0 14px 0 38px;outline:none;transition:background var(--durf),border-color var(--durf),box-shadow var(--durf)}
.dch-search input::placeholder{color:rgba(255,255,255,.5)}
.dch-search input:focus{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);box-shadow:0 0 0 3px rgba(255,255,255,.10)}

/* ---- end slot ------------------------------------------------------------ */
.dch-end{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.dch-end--anon,.dch-end--auth{display:none;align-items:center}
.dsh--anon .dch-end--anon{display:flex;gap:10px}
.dsh--auth .dch-end--auth{display:flex;gap:6px}

.dch-ico{position:relative;width:42px;height:42px;border-radius:var(--r);background:none;border:none;color:rgba(255,255,255,.72);display:inline-flex;align-items:center;justify-content:center;transition:background var(--durf),color var(--durf)}
.dch-ico:hover{background:rgba(255,255,255,.10);color:#fff}
.dch-ico:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.dch-ico__badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--rp);background:#E5484D;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--navy)}

.dch-acct{position:relative;margin-left:8px}
.dch-acct__btn{display:inline-flex;align-items:center;gap:9px;background:none;border:none;padding:4px 6px 4px 8px;border-radius:var(--rp);transition:background var(--durf)}
.dch-acct__btn:hover{background:rgba(255,255,255,.10)}
.dch-acct__btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.dch-acct__name{font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.dch-acct__avatar{width:34px;height:34px;border-radius:var(--rp);background:var(--ps);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.dch-acct__chev{color:rgba(255,255,255,.6);transition:transform var(--dur) var(--ease-std)}
.dch-acct--open .dch-acct__chev{transform:rotate(180deg)}
.dch-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:232px;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--menu);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--durf),transform var(--durf),visibility var(--durf)}
.dch-acct--open .dch-menu{opacity:1;visibility:visible;transform:none}
.dch-menu__head{padding:10px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.dch-menu__co{font-size:14px;font-weight:700;color:var(--ink)}
.dch-menu__role{font-size:12.5px;color:var(--muted);margin-top:1px}
.dch-menu__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:4px;font-size:14px;color:var(--text)}
.dch-menu__item svg{color:var(--muted);flex:none}
.dch-menu__item:hover{background:var(--bg-subtle);color:var(--ink)}
.dch-menu__sep{height:1px;background:var(--border);margin:6px 0}
.dch-menu__item--signout{color:var(--accent);font-weight:600}

.dch-burger{display:none;width:42px;height:42px;border-radius:var(--r);background:none;border:none;color:#fff;align-items:center;justify-content:center}
.dch-burger:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ============================================================================
   PAGINATION — a11y fix at source (#777 4.47:1 → --muted #595959 7.0:1)
   Used by Messages and any paged list. One component, one source.
   ========================================================================== */
.pgn{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px 0}
.pgn__btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r);background:#fff;border:1px solid var(--border-strong);color:var(--muted);font-family:var(--font);font-size:14px;font-weight:600;transition:border-color var(--durf),color var(--durf),background var(--durf)}
.pgn__btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pgn__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pgn__btn:disabled{color:#8A929B;background:var(--bg-subtle);cursor:not-allowed}
.pgn__at{font-size:14px;color:var(--muted);padding:0 6px}
.pgn__at strong{color:var(--ink);font-weight:700}

/* ============================================================================
   FOOTER — DARK, canonical, on EVERY page incl. legal.
   .dcf--on-light is intentionally NOT defined: retired in this pass.
   Owns its own surface + ink so it can never inherit page colour again.
   ========================================================================== */
.dcf{
  --dcf-surface:var(--navy);
  --dcf-ink:#B7C2CE;        /* 8.0:1 on navy */
  --dcf-ink-strong:#FFFFFF; /* 15.9:1 on navy */
  --dcf-rule:rgba(255,255,255,.10);
  background:var(--dcf-surface);color:var(--dcf-ink);
}
.dcf__inner{max-width:var(--container);margin:0 auto;padding:52px 32px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.dcf__brand img{height:22px;margin-bottom:16px}
.dcf__tagline{font-size:14px;line-height:1.6;color:var(--dcf-ink);margin:0 0 20px;max-width:300px}
.dcf__seller{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--dcf-ink-strong);border:1px solid rgba(255,255,255,.28);border-radius:var(--r);padding:9px 14px;transition:background var(--durf),border-color var(--durf)}
.dcf__seller:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.dcf__col h3{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dcf-ink-strong);margin:0 0 16px}
.dcf__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.dcf__col a{font-size:14px;color:var(--dcf-ink);transition:color var(--durf)}
.dcf__col a:hover{color:var(--dcf-ink-strong)}
.dcf a:focus-visible,.dcf button:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
.dcf__bar{max-width:var(--container);margin:0 auto;padding:20px 32px;border-top:1px solid var(--dcf-rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.dcf__copy{font-size:13px;color:var(--dcf-ink)}
.dcf__legal{display:flex;flex-wrap:wrap;gap:22px}
.dcf__legal a{font-size:13px;color:var(--dcf-ink)}
.dcf__legal a:hover{color:var(--dcf-ink-strong)}

/* mobile drawer scrim */
.dch-scrim{display:none}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  /* marketing context runs out of header budget before discovery does */
  .dsh--marketing .dch-search{display:none}
}
@media (max-width:1080px){
  .dch-header__inner{padding-left:24px;padding-right:24px;gap:18px}
  .dcf__inner,.dcf__bar{padding-left:24px;padding-right:24px}
  .dch-search{max-width:300px}
  .dch-nav--marketing{gap:14px}
}
@media (max-width:860px){
  /* both nav variants collapse into the SAME drawer — one pattern */
  .dch-nav{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:86vw;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;background:var(--navy);
    padding:calc(var(--header-h) + 12px) 0 0;transform:translateX(-102%);
    transition:transform var(--dur) var(--ease);overflow-y:auto}
  .dsh--menuopen .dch-nav{transform:none}
  .dch-nav .dch-nav__link{height:auto;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
  .dch-nav .dch-nav__link:hover{background:rgba(255,255,255,.06)}
  /* the full-height tab flattens to a left-accent row (no wash / no foot bar) */
  .dch-nav--pillars .dch-nav__link--active{background:rgba(255,255,255,.06);border-left:3px solid var(--nav-accent);padding-left:21px}
  .dch-nav--pillars .dch-nav__link--active::after{content:none}
  .dch-nav--marketing .dch-nav__link--active{box-shadow:none;background:rgba(255,255,255,.06);border-left:3px solid var(--nav-accent);padding-left:21px}
  .dsh--menuopen .dch-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(7,30,50,.5)}
  .dch-burger{display:inline-flex}
  .dch-search{display:none}
  .dch-acct__name{display:none}
  .dcf__inner{grid-template-columns:1fr 1fr;gap:32px}
  .dcf__brand{grid-column:1/-1}
}
@media (max-width:600px){
  .dch-header__inner{padding:0 16px;gap:10px}
  .dch-ico{width:40px;height:40px}
  .dcf__inner{grid-template-columns:1fr;gap:30px;padding:40px 16px 32px}
  .dcf__bar{flex-direction:column;align-items:flex-start;padding:20px 16px}
  .pgn{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .dch *,.dch *::before,.dch *::after,.dcf *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}