/* Dimau Kit v1 — the Fiji History Museum look, for every Dimau app.
 *
 * Source of record: donovandimau/dimau-platform-standard/shell/dimau-kit.css
 * Copy this file byte-for-byte into an app as /dimau-kit.css. Never edit an
 * app's copy: change it here, then copy it out again.
 *
 * Put <style>@layer dimau-kit-light,dimau-kit;</style> as the FIRST element
 * of <head>, link this file LAST in <head>, and add class="dk-app" to <body>.
 * Markup contract and examples: shell/README.md.
 *
 * Every value below was measured from the rendered Museum (fiji-history-
 * virtual-museum, production build, 1440px and 390px) rather than copied from
 * its layered stylesheets, so the apps match what visitors actually see.
 *
 * Why layers: older Dimau stylesheets set !important rules inside cascade
 * layers, and a layered !important beats any unlayered rule however specific.
 * Important rules in the FIRST declared layer win over every later layer, so
 * declaring dimau-kit-light and dimau-kit before anything else lets the kit
 * outrank all older app styling without editing those files. (If the head
 * snippet is missing the kit still beats unlayered rules, just not older
 * layers.) :root:not(#dk) keeps selectors strong inside the layer too.
 */
@layer dimau-kit-light,dimau-kit;

@font-face{font-family:'Dimau Manrope';font-style:normal;font-weight:200 800;font-display:optional;src:url('/fonts/manrope-latin-v20.woff2') format('woff2')}
@font-face{font-family:'Dimau Manrope';font-style:normal;font-weight:200 800;font-display:optional;src:url('/fonts/manrope-latin-ext-v20.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. Tokens ---------- */
:root{
  --dk-font:'Dimau Manrope',Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Museum colours (CSS named colours it is built on) */
  --dk-blue:#1e90ff;      /* dodgerblue: outlines, accents, emphasis */
  --dk-sky:#87ceeb;       /* skyblue: selected tiles, soft rings */
  --dk-steel:#4682b4;     /* steelblue: end of the call-to-action gradient */
  --dk-alice:#f0f8ff;     /* aliceblue: glass */
  --dk-navy:#000080;      /* control labels */
  --dk-midnight:#191970;  /* subtitles, search hint */
  --dk-ink:#0b2540;       /* body copy */
  --dk-ink-2:#24506e;     /* supporting copy */
  --dk-title:#000;        /* app name and page titles */

  /* Glass tiles: the Museum's "house tile" */
  --dk-leaf:4px 16px 4px 16px;
  --dk-tile:rgba(240,248,255,.86);
  --dk-tile-soft:rgba(240,248,255,.42);
  --dk-tile-hover:rgba(214,238,250,.95);
  --dk-tile-on:rgba(135,206,235,.92);
  --dk-ring:0 0 0 1px rgba(135,206,235,.35),0 0 12px rgba(30,144,255,.45),inset 0 0 14px rgba(30,144,255,.18);

  /* Light-ups */
  --dk-glow:0 0 0 2px rgba(255,255,255,.98),0 0 14px 4px rgba(56,189,248,.95),0 0 32px 8px rgba(30,144,255,.72),inset 0 0 18px 3px rgba(240,249,255,.65);
  --dk-glow-tab:inset 0 0 0 1px rgba(30,144,255,.8),inset 0 0 8px rgba(56,189,248,.28);
  --dk-text-glow:0 0 1px #fff,0 0 5px rgba(255,255,255,.98),0 0 12px rgba(125,211,252,.95),0 0 22px rgba(56,189,248,.8);
  --dk-text-glow-tab:0 0 3px rgba(240,249,255,.85);

  /* Calls to action */
  --dk-cta:linear-gradient(135deg,#1e90ff,#4682b4);
  --dk-cta-shadow:inset 0 1px 0 rgba(240,248,255,.6),0 8px 24px rgba(30,144,255,.45);
  --dk-go:linear-gradient(135deg,#012169,#1f8fbf);

  /* Header: the Museum's dawn sky, drawn in CSS so no app downloads an image */
  --dk-bar:
    radial-gradient(110% 150% at 0% 0%,rgba(247,220,204,.95) 0%,rgba(247,220,204,0) 55%),
    radial-gradient(80% 170% at 100% 100%,rgba(166,194,235,.95) 0%,rgba(166,194,235,0) 60%),
    linear-gradient(100deg,#f5e4dc 0%,#f1e6e9 38%,#e8e2ee 68%,#d2daf0 100%);
  --dk-bar-line:rgba(30,144,255,.22);

  /* Panels and pop-ups: the Museum's Bula card */
  --dk-panel:#bae6fd;
  --dk-panel-ink:#12354b;
  --dk-panel-radius:20px;
  --dk-panel-shadow:0 20px 60px rgba(0,0,0,.35);
  --dk-scrim:rgba(3,14,34,.62);
  --dk-glass:rgba(255,255,255,.58);
  --dk-glass-line:rgba(255,255,255,.82);
  --dk-glass-shadow:0 10px 30px rgba(11,37,64,.12);

  --dk-page-title:clamp(32px,24px + 2.2vw,44px);
  --dk-section-title:clamp(24px,20px + 1vw,32px);
  --dk-card-title:clamp(20px,18px + .4vw,22px);
}

@layer dimau-kit{

/* ---------- 2. Type ---------- */
:root:not(#dk) body.dk-app,
:root:not(#dk) body.dk-app :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,a,button,input,select,textarea,small,strong,b,em,i,span,td,th,caption,figcaption,blockquote,summary):not(:where([class*=icon i],[class*=symbol i],[class^=fa-],.fa,.fas,.far,.fab,[aria-hidden=true],code,kbd,pre)){
  font-family:var(--dk-font)!important;
}
:root:not(#dk) body.dk-app :where(h1,h2,h3,h4){font-weight:800;letter-spacing:-.02em;line-height:1.2}
:root:not(#dk) body.dk-app :where(h1,h2,h3) :where(em,i){font-style:normal}

:root:not(#dk) .dk-kicker{display:inline-block!important;justify-self:start!important;width:fit-content!important;max-width:100%!important;margin:0 0 8px!important;padding:5px 12px!important;border:0!important;border-radius:999px!important;background:rgba(240,248,255,.85)!important;color:var(--dk-navy)!important;font:700 12px/1.4 var(--dk-font)!important;letter-spacing:.16em!important;text-transform:uppercase!important;text-shadow:none!important}
:root:not(#dk) .dk-title{margin:8px 0 12px!important;color:var(--dk-title)!important;font:800 var(--dk-page-title)/1.2 var(--dk-font)!important;letter-spacing:-.02em!important;text-transform:none!important}
:root:not(#dk) .dk-title :is(em,i,.dk-accent){color:var(--dk-blue)!important;font-style:normal!important;font-family:inherit!important;font-weight:inherit!important}
:root:not(#dk) .dk-title.dk-on-photo,:root:not(#dk) .dk-on-photo :is(.dk-title,.dk-lead){text-shadow:0 0 18px rgba(240,248,255,.95),0 0 4px rgba(240,248,255,.9)!important}
:root:not(#dk) .dk-on-dark .dk-title,:root:not(#dk) .dk-title.dk-on-dark{color:#fff!important}
:root:not(#dk) .dk-title :is(em,i,.dk-accent){font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
:root:not(#dk) .dk-on-dark .dk-title :is(em,i,.dk-accent),:root:not(#dk) .dk-title.dk-on-dark :is(em,i,.dk-accent){color:#7cc4ff!important}
:root:not(#dk) .dk-h2{margin:0 0 12px!important;font:800 var(--dk-section-title)/1.2 var(--dk-font)!important;letter-spacing:-.02em!important}
:root:not(#dk) .dk-h3{margin:0 0 8px!important;font:800 var(--dk-card-title)/1.25 var(--dk-font)!important;letter-spacing:-.015em!important}
:root:not(#dk) .dk-lead{font:400 16px/1.55 var(--dk-font)!important;max-width:60ch}

/* ---------- 3. Header (Museum, 18 Oct 2026) ----------
   Row 1 (48px): [logo 48][name / tagline] [tabs ... Share] ........ [account][music 48]
   Row 2: [Bula!] [search]
   900px and narrower: name and music on row 1, tabs scroll sideways on row 2, tools on row 3. */
/* Anchors and keyboard focus land below the sticky header. Not !important, so an app's own html{scroll-padding-top} wins. */
html:has(.dk-header){scroll-padding-top:132px}
@media (max-width:900px){html:has(.dk-header){scroll-padding-top:180px}}
@media (max-height:500px) and (min-width:600px){html:has(.dk-header){scroll-padding-top:80px}}
:root:not(#dk) .dk-header{
  position:sticky!important;top:0!important;z-index:60!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  grid-template-areas:"brand nav end" "tools tools tools"!important;
  align-items:center!important;gap:8px 12px!important;
  box-sizing:border-box!important;width:100%!important;max-width:none!important;min-height:64px!important;
  margin:0!important;padding:8px 12px!important;
  background:var(--dk-bar)!important;color:var(--dk-ink)!important;
  border:0!important;border-bottom:1px solid var(--dk-bar-line)!important;border-radius:0!important;
  box-shadow:0 6px 24px rgba(11,37,64,.08)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  font:400 16px/1.4 var(--dk-font)!important;
}
:root:not(#dk) .dk-header.dk-glass{background:rgba(240,248,255,.42)!important;backdrop-filter:blur(14px) saturate(1.2)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2)!important}
:root:not(#dk) .dk-header:not(:has(.dk-tools > *)){grid-template-areas:"brand nav end"!important}
:root:not(#dk) .dk-header *{box-sizing:border-box}
/* The kit sets display on its parts; the hidden attribute must still win. */
:root:not(#dk) [class*="dk-"][hidden]{display:none!important}
:root:not(#dk) .dk-header > .dk-contents{display:contents!important}
/* Resting header text has no shadow; the light-up layer adds the glow on hover and focus. */
:root:not(#dk) .dk-header :is(.dk-nav,.dk-tools,.dk-search,.dk-end) *{text-shadow:none!important}

/* Brand: logo tile + app name. The logo is always the Dimau mark, never cropped. */
:root:not(#dk) .dk-brand{grid-area:brand!important;display:flex!important;align-items:center!important;gap:8px!important;min-height:48px!important;min-width:0!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:inherit!important;text-decoration:none!important}
:root:not(#dk) .dk-logo{flex:0 0 48px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;border:1px solid var(--dk-blue)!important;border-radius:14px!important;box-shadow:var(--dk-ring)!important;text-decoration:none!important}
:root:not(#dk) .dk-logo :is(img,svg),:root:not(#dk) .dk-logo .dimau-owner-logo-frame{display:block!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;margin:0!important;padding:0!important;object-fit:contain!important;object-position:center!important;transform:none!important;filter:none!important;border:0!important;border-radius:0!important;outline:0!important;background:none!important;box-shadow:none!important}
/* Older app CSS draws its own tile around the mark; inside the kit tile there is only one. */
:root:not(#dk) .dk-logo .dimau-owner-logo-frame::before,:root:not(#dk) .dk-logo .dimau-owner-logo-frame::after{content:none!important;display:none!important}
:root:not(#dk) .dk-name{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:0!important;min-width:0!important;margin:0!important;line-height:1.1!important;text-decoration:none!important;color:inherit!important}
:root:not(#dk) .dk-name > :first-child{display:block!important;margin:0!important;color:var(--dk-title)!important;font:800 26px/1.1 var(--dk-font)!important;letter-spacing:-.02em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-transform:none!important;text-shadow:none!important}
:root:not(#dk) .dk-name > :nth-child(2){display:block!important;margin:0!important;color:var(--dk-midnight)!important;font:500 15px/1.3 var(--dk-font)!important;letter-spacing:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-transform:none!important;opacity:1!important}

/* Tabs: one row, right-aligned on desktop, sideways-scrolling on phone. */
:root:not(#dk) .dk-nav{grid-area:nav!important;justify-self:stretch!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;min-width:0!important;margin:0!important;padding:0 4px 10px!important;scroll-padding-inline:16px;overflow-x:auto!important;overflow-y:hidden!important;list-style:none!important;background:none!important;border:0!important;box-shadow:none!important;position:static!important;transform:none!important;visibility:visible!important;opacity:1!important;height:auto!important;max-height:none!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
:root:not(#dk) .dk-nav::-webkit-scrollbar{display:none}
/* The Museum's blue scroll handle under a tab row that overflows (drawn by dimau-kit.js). */
:root:not(#dk) .dk-nav-track{position:fixed!important;z-index:61;height:4px;border-radius:4px;background:rgba(30,144,255,.18);pointer-events:none}
:root:not(#dk) .dk-nav-track > span{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--dk-blue);box-shadow:0 0 6px rgba(30,144,255,.5)}
:root:not(#dk) .dk-nav > li{display:contents!important}
:root:not(#dk) .dk-menu-btn{display:none!important}

:root:not(#dk) :is(.dk-tab,.dk-nav > a,.dk-nav > button,.dk-nav > li > a,.dk-nav > li > button){
  flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  height:40px!important;min-height:40px!important;width:auto!important;min-width:0!important;margin:0!important;padding:7px 12px!important;
  color:var(--dk-navy)!important;background:var(--dk-tile)!important;
  border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  font:700 14px/1.2 var(--dk-font)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;text-shadow:none!important;white-space:nowrap!important;
  cursor:pointer;transition:background-color .18s ease-out,box-shadow .18s ease-out!important;
}
:root:not(#dk) :is(.dk-tab,.dk-nav > a,.dk-nav > button,.dk-nav > li > a,.dk-nav > li > button):hover{background:var(--dk-tile-hover)!important}
:root:not(#dk) :is(.dk-tab,.dk-nav > a,.dk-nav > button,.dk-nav > li > a,.dk-nav > li > button):is([aria-current]:not([aria-current=false]),[aria-pressed=true],[aria-selected=true],.is-current){background:var(--dk-tile-on)!important;border-width:2px!important}
:root:not(#dk) :is(.dk-tab,.dk-nav > a,.dk-nav > button) :is(svg,img){width:16px!important;height:16px!important;flex:0 0 16px!important}
:root:not(#dk) .dk-tab.dk-share,:root:not(#dk) .dk-nav > .dk-share{height:44px!important;min-height:44px!important;padding:10px 16px!important;background:var(--dk-tile-soft)!important}

/* Right end: account, then music. */
:root:not(#dk) .dk-end{grid-area:end!important;justify-self:end!important;display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;margin:0!important;padding:0!important}
:root:not(#dk) .dk-end:empty{display:none!important}
:root:not(#dk) .dk-end .dm-acct{display:inline-flex!important;margin:0!important}
:root:not(#dk) :is(.dk-account,.dk-end .dm-acct-btn){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:10px 16px!important;
  color:var(--dk-navy)!important;background:var(--dk-tile)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;
  font:700 14px/1.2 var(--dk-font)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:nowrap!important;cursor:pointer;
}
:root:not(#dk) :is(.dk-account,.dk-end .dm-acct-btn):hover{background:var(--dk-tile-hover)!important}
:root:not(#dk) .dk-music,:root:not(#dk) .dk-end [data-music-toggle]{flex:0 0 48px!important;width:48px!important;height:48px!important;min-height:48px!important;margin:0!important;border-radius:50%!important;box-shadow:var(--dk-ring)!important}

/* Row 2 tools: Bula! and search, under the logo. */
:root:not(#dk) .dk-tools{grid-area:tools!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;min-width:0!important;margin:0!important;padding:0!important}
:root:not(#dk) .dk-tools:not(:has(> :not(.dk-slot),> .dk-slot > *)){display:none!important}
:root:not(#dk) .dk-slot{display:none!important}
:root:not(#dk) .dk-tools .dk-slot:has(> *){display:contents!important}
:root:not(#dk) .dk-tools .bw-group{display:contents!important}
:root:not(#dk) :is(.dk-pill,.dk-tools .bw-pill,.dk-tools .bw-share){
  position:static!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;gap:8px!important;
  height:44px!important;min-height:44px!important;width:auto!important;max-width:none!important;margin:0!important;padding:10px 16px!important;
  color:var(--dk-navy)!important;background:var(--dk-tile-soft)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;
  font:700 14px/1.2 var(--dk-font)!important;letter-spacing:0!important;text-transform:none!important;text-shadow:none!important;white-space:nowrap!important;cursor:pointer;transform:none!important;
}
:root:not(#dk) :is(.dk-pill,.dk-tools .bw-pill,.dk-tools .bw-share):hover{background:var(--dk-tile-hover)!important}
:root:not(#dk) .dk-tools .bw-pill .bw-long{display:none!important}
:root:not(#dk) .dk-tools .bw-pill .bw-short{display:inline!important}
:root:not(#dk) .dk-tools .bw-pill .bw-dot{display:none!important}
:root:not(#dk) :is(.dk-pill,.dk-tools .bw-pill) :is(img,svg,.bw-flag){width:24px!important;height:12px!important;flex:0 0 24px!important;border-radius:2px!important;margin:0!important}
:root:not(#dk) .dk-tools .bw-share svg{width:16px!important;height:16px!important}
:root:not(#dk) .dk-status{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:44px!important;padding:0 6px!important;color:var(--dk-navy)!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important;font:700 13px/1.2 var(--dk-font)!important;letter-spacing:.02em!important;cursor:default!important}

:root:not(#dk) .dk-search{
  flex:0 1 420px!important;display:flex!important;align-items:center!important;gap:8px!important;
  width:auto!important;min-width:0!important;height:44px!important;min-height:44px!important;margin:0!important;padding:10px 16px!important;
  color:var(--dk-midnight)!important;background:var(--dk-tile-soft)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;
  font:500 14px/1.2 var(--dk-font)!important;text-align:left!important;text-decoration:none!important;cursor:pointer;
}
:root:not(#dk) .dk-search :is(input,button){text-shadow:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font:inherit!important;outline-offset:2px}
:root:not(#dk) .dk-search :is(input,button):not(:focus-visible){outline:0!important}
:root:not(#dk) .dk-search input{flex:1 1 auto!important;min-width:0!important;font-size:16px!important}
:root:not(#dk) .dk-search input::placeholder{color:var(--dk-midnight);opacity:.85}
:root:not(#dk) .dk-search svg{flex:0 0 18px!important;width:18px!important;height:18px!important;color:var(--dk-blue)!important}

@media (max-width:900px){
  :root:not(#dk) .dk-header{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand end" "nav nav" "tools tools"!important}
  :root:not(#dk) .dk-header:not(:has(.dk-tools > *)){grid-template-areas:"brand end" "nav nav"!important}
  :root:not(#dk) .dk-nav{padding:0 0 10px!important}
}
@media (max-width:760px){
  :root:not(#dk) .dk-logo{border-radius:10px!important}
  :root:not(#dk) .dk-name > :first-child{font-size:18px!important}
  :root:not(#dk) .dk-name > :nth-child(2){font-size:12px!important;line-height:1.3!important}
  :root:not(#dk) .dk-tools{gap:8px!important}
  :root:not(#dk) .dk-search{flex:1 1 auto!important}
  :root:not(#dk) .dk-end .dm-acct-btn,:root:not(#dk) .dk-account{padding:10px 12px!important}
}

/* Short landscape screens (phones on their side, map apps): one header row. */
@media (max-height:500px) and (min-width:600px){
  :root:not(#dk) .dk-header{grid-template-columns:auto auto minmax(0,1fr) auto!important;grid-template-areas:"brand tools nav end"!important;min-height:0!important;padding:6px 12px!important;gap:8px 10px!important}
  :root:not(#dk) .dk-nav{padding:2px 0 6px!important}
  :root:not(#dk) .dk-name > :nth-child(2){display:none!important}
}

/* ---------- 4. Buttons ---------- */
:root:not(#dk) .dk-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:44px!important;padding:10px 18px!important;
  color:var(--dk-navy)!important;background:var(--dk-tile)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  font-family:var(--dk-font)!important;font-size:14px!important;font-weight:700!important;text-shadow:none!important;text-decoration:none!important;cursor:pointer;
}
:root:not(#dk) .dk-btn:hover{background:var(--dk-tile-hover)!important}
:root:not(#dk) .dk-btn:is([aria-pressed=true],[aria-current]:not([aria-current=false]),[aria-selected=true],.is-current){background:var(--dk-tile-on)!important;border-width:2px!important}
:root:not(#dk) select.dk-btn{padding-right:34px!important}

:root:not(#dk) .dk-cta{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:48px!important;padding:14px 34px!important;
  color:#fff!important;background:var(--dk-cta)!important;border:1px solid rgba(240,248,255,.8)!important;border-radius:999px!important;box-shadow:var(--dk-cta-shadow)!important;
  font:800 16px/1.2 var(--dk-font)!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-shadow:none!important;text-decoration:none!important;cursor:pointer;
}
:root:not(#dk) .dk-cta :is(small,span:not(:first-child)){letter-spacing:.02em!important;text-transform:none!important;font-weight:600!important}
:root:not(#dk) .dk-cta:hover{filter:brightness(1.06)}
@media (min-width:761px){:root:not(#dk) .dk-cta.dk-cta-lg{font-size:18px!important}}

/* ---------- 5. Surfaces ---------- */
:root:not(#dk) .dk-panel{background:var(--dk-glass)!important;border:1px solid var(--dk-glass-line)!important;border-radius:22px!important;box-shadow:var(--dk-glass-shadow)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root:not(#dk) .dk-tile{background:var(--dk-tile-soft)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important}

/* ---------- 6. Pop-ups: Bula welcome, sign in, share, help ---------- */
:root:not(#dk) :is(.bw-back,.dm-ov,.dk-scrim){background:var(--dk-scrim)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important}
:root:not(#dk) :is(.dm-ov,.dk-scrim){z-index:2147483600!important}
:root:not(#dk) :is(#dimau-social-share,#dg-dialog,.dg-dialog,dialog.dk-dialog)::backdrop{background:var(--dk-scrim)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important}
:root:not(#dk) :is(.bw-card,.dm-card,#dimau-social-share,#dg-dialog,.dg-dialog,.dk-dialog,.dk-popup){
  color:var(--dk-panel-ink)!important;background:var(--dk-panel)!important;
  border:0!important;border-radius:var(--dk-panel-radius)!important;box-shadow:var(--dk-panel-shadow)!important;
  font-family:var(--dk-font)!important;
}
:root:not(#dk) :is(.bw-card,.dm-card,#dimau-social-share,#dg-dialog,.dg-dialog,.dk-dialog,.dk-popup) :is(h2,h3,p,label,span,small,strong,b,li,a,button,input){font-family:var(--dk-font)!important}
:root:not(#dk) :is(.bw-title,.dm-card h2,#dss-title,#dg-title),:root:not(#dk) :is(.dk-dialog,.dk-popup) > h2,:root:not(#dk) :is(.dk-dialog,.dk-popup) > :first-child h2:first-of-type{margin:0 0 6px!important;color:var(--dk-panel-ink)!important;font:800 24px/1.2 var(--dk-font)!important;letter-spacing:-.015em!important}
:root:not(#dk) :is(.bw-x,.dm-x,.dss-close,.dg-close,.dk-close){
  flex:0 0 44px!important;display:inline-grid!important;place-items:center!important;width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;
  color:var(--dk-navy)!important;background:var(--dk-tile)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;
  font:700 20px/1 var(--dk-font)!important;cursor:pointer;
}
:root:not(#dk) :is(.bw-go,.dm-go,.dss-copy,.dg-primary,.gt-primary,.dk-go){
  min-height:44px!important;padding:12px 18px!important;color:#fff!important;background:var(--dk-go)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;
  font:700 16px/1.2 var(--dk-font)!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer;
}
:root:not(#dk) :is(.dm-card,#dimau-social-share,#dg-dialog,.dg-dialog,.dk-dialog,.dk-popup) :is(input:not([type=checkbox]):not([type=radio]),textarea,select){
  min-height:44px!important;color:var(--dk-ink)!important;background:rgba(255,255,255,.9)!important;border:1.5px solid #74b5d7!important;border-radius:10px!important;font-size:16px!important;box-shadow:none!important;
}
:root:not(#dk) :is(.dm-card .dm-alt,.dm-card .dm-google,.dg-actions button:not(.dg-primary),.dk-dialog .dk-btn){
  min-height:44px!important;color:var(--dk-navy)!important;background:var(--dk-tile)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important;font-weight:700!important;
}
:root:not(#dk) .dm-card .dm-alt{padding:10px 14px!important}
:root:not(#dk) .dm-card h2{padding-right:52px!important}
:root:not(#dk) #dimau-social-share .dss-grid :is(a,button){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:14px!important;color:var(--dk-panel-ink)!important}
@media (max-width:760px){
  :root:not(#dk) :is(.bw-card,.dm-card,#dimau-social-share,#dg-dialog,.dg-dialog,.dk-dialog,.dk-popup){border-radius:18px!important}
}

/* Guided tour: the step card uses the panel colours; the launcher is a tile
   that keeps its red recording dot. */
:root:not(#dk) #gt-pop{color:var(--dk-panel-ink)!important;background:var(--dk-panel)!important;border:1px solid var(--dk-blue)!important;border-radius:16px!important;box-shadow:var(--dk-panel-shadow)!important;font-family:var(--dk-font)!important}
:root:not(#dk) #gt-pop *{font-family:var(--dk-font)!important}
:root:not(#dk) #gt-pop button:not(.gt-primary){color:var(--dk-navy)!important;background:var(--dk-tile)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring)!important}
:root:not(#dk) :is(#gt-launcher,#dg-launcher,.dg-launcher){color:var(--dk-navy)!important;background:var(--dk-tile)!important;border:1px solid var(--dk-blue)!important;border-radius:var(--dk-leaf)!important;box-shadow:var(--dk-ring),0 6px 18px rgba(11,37,64,.18)!important;font:700 15px/1.2 var(--dk-font)!important}

/* ---------- 7. Accessibility floors ---------- */
:root:not(#dk) .dk-header :is(a,button,input,select,summary):focus-visible{outline:2px solid var(--dk-blue)!important;outline-offset:2px!important}
@media (forced-colors:active){
  :root:not(#dk) :is(.dk-tab,.dk-btn,.dk-cta,.dk-pill,.dk-search,.dk-logo,.dk-account){border:2px solid ButtonText!important;forced-color-adjust:auto}
}
@media (prefers-reduced-transparency:reduce){
  :root:not(#dk) :is(.dk-tab,.dk-btn,.dk-pill,.dk-search,.dk-panel,.dk-header.dk-glass){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:#eef7ff!important}
}
@media (prefers-reduced-motion:reduce){
  :root:not(#dk) :is(.dk-tab,.dk-btn,.dk-cta,.dk-pill){transition:none!important}
}


/* Older Dimau lighting layers draw a resting outline on every control; the kit draws its own. */
:root:not(#dk) :is(.dk-tab,.dk-nav > a,.dk-nav > button,.dk-nav > li > a,.dk-nav > li > button,.dk-btn,.dk-cta,.dk-pill,.dk-tools .bw-pill,.dk-tools .bw-share,.dk-account,.dk-end .dm-acct-btn,.dk-close,.dk-go,.bw-x,.dm-x,.dss-close,.dg-close,#dimau-social-share .dss-grid :is(a,button)):not(:focus-visible){outline:0!important}

/* Bula card text keeps the Museum sizes even where an app theme sets !important heading sizes. */
:root:not(#dk) .bw-card :is(.bw-hi,.bw-h){font-size:12px!important;line-height:1.4!important;letter-spacing:.08em!important;text-transform:uppercase!important}
:root:not(#dk) .bw-card .bw-hi{font-weight:700!important}
:root:not(#dk) .bw-card .bw-h{font-weight:800!important;color:var(--dk-panel-ink)!important}
:root:not(#dk) .bw-card .bw-p{font-size:14px!important}
:root:not(#dk) .bw-card .bw-note{font-size:13px!important}
:root:not(#dk) .bw-card .bw-foot{font-size:12px!important}
}

/* ---------- 8. Light-ups (identical to museum-glow.css) ----------
   A cascade layer with !important beats ordinary !important rules, so every
   app lights up the same way regardless of its older shadows. Shadows only:
   no layout, colour or motion changes. */
@layer dimau-kit-light{
  body.dk-app :where(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],select,summary,.dk-btn,.dk-cta,.dk-tab,.dk-nav > a,.dk-nav > li > a):not(:disabled):not([aria-disabled="true"]):is(:focus-visible,:active){
    box-shadow:var(--dk-glow)!important;text-shadow:var(--dk-text-glow)!important;
  }
  body.dk-app :where(button,a[href],[role="button"],input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):not(:disabled):not([aria-disabled="true"]):focus-visible{
    outline:2px solid #fff!important;outline-offset:4px!important;box-shadow:var(--dk-glow)!important;text-shadow:var(--dk-text-glow)!important;
  }
  @media (hover:hover) and (pointer:fine){
    body.dk-app :where(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],select,summary,.dk-btn,.dk-cta,.dk-tab,.dk-nav > a,.dk-nav > li > a):not(:disabled):not([aria-disabled="true"]):hover{
      box-shadow:var(--dk-glow)!important;text-shadow:var(--dk-text-glow)!important;
    }
    body.dk-app :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,summary,figcaption,blockquote,span,small,strong,b,em,i,a,button,td,th,caption,time,div:not(:has(*))):not(:disabled):not([aria-disabled="true"]):not(:where(:disabled,[aria-disabled="true"],.dk-no-light) *):hover{
      text-shadow:var(--dk-text-glow)!important;
    }
  }
  /* Header tabs keep their light inside the tile so the scroll row never clips a halo. */
  .dk-header :is(.dk-nav > *,.dk-tab){--dk-glow:var(--dk-glow-tab);--dk-text-glow:var(--dk-text-glow-tab)}
  body.dk-app .dk-search :is(input,button){box-shadow:none!important;text-shadow:none!important}
  body.dk-app .dk-header .dk-status{--dk-glow:none;--dk-text-glow:none;box-shadow:none!important;text-shadow:none!important}
  body.dk-app .dk-search:is(:hover,:focus-within){box-shadow:var(--dk-glow)!important}
  body.dk-app .dk-header :is(.dk-nav > *,.dk-tab):not(:disabled):focus-visible{outline:2px solid var(--dk-blue)!important;outline-offset:-3px!important}
  body.dk-app .dk-header :is(.dk-end,.dk-tools,.dk-brand) :is(a,button,input,summary,[role=button]):focus-visible,body.dk-app .dk-header .dk-brand:focus-visible{outline:2px solid var(--dk-navy)!important;outline-offset:3px!important}
  .dk-header .dk-logo,.dk-header .dk-name *{text-shadow:none!important}
}