/* FijiLearn — Dimau sky-blue brand theme (4 Oct 2026)
   Same look as Dimau Fintech and Fiji Tap: sky-blue page, frosted light-blue
   glass cards, blue edges, dark words. Loaded last on every page. */


html:root{
  color-scheme:light!important;
  --glass:rgba(240,248,255,.55);
  --glass-strong:rgba(240,248,255,.82);
  --glass-edge:rgba(240,248,255,.9);
  --edge:#1E90FF;
  --glow:0 0 0 1px rgba(135,206,235,.35),0 0 12px rgba(30,144,255,.35),inset 0 0 14px rgba(30,144,255,.12);
  --glass-shadow:inset 0 1px 0 rgba(240,248,255,.95),inset 0 0 22px rgba(240,248,255,.35),0 10px 28px rgba(70,130,180,.22);
  /* app colour tokens */
  --bg:rgba(240,248,255,.6); --card:rgba(240,248,255,.62); --ink:#000000; --muted:#191970;
  --teal:#000080; --teal-dark:#191970; --blue:#1E90FF; --purple:#4682B4;
  --line:rgba(30,144,255,.35); --shadow:0 10px 28px rgba(70,130,180,.18);
  --dm-header:rgba(240,248,255,.42); --dm-header-text:#000080; --dm-ink:#000000;
  --dm-border:rgba(30,144,255,.35); --dm-focus:#1E90FF; --dm-shadow:0 10px 28px rgba(70,130,180,.18);
  --dm-font:Verdana,Geneva,Arial,sans-serif;
  background:radial-gradient(circle at 6% 72%,rgba(240,248,255,.45) 0 15vmax,rgba(176,224,230,.25) 15.2vmax,transparent 15.6vmax),radial-gradient(circle at 94% 8%,rgba(240,248,255,.6) 0 11vmax,rgba(135,206,235,.3) 11.2vmax,transparent 11.6vmax),radial-gradient(circle at 82% 90%,rgba(224,255,255,.4) 0 9vmax,transparent 9.4vmax),radial-gradient(circle at 38% 3%,rgba(240,248,255,.5) 0 4vmax,transparent 4.3vmax),linear-gradient(165deg,#E0FFFF 0%,#B0E0E6 22%,#87CEEB 55%,#00BFFF 100%)!important;
  background-attachment:fixed!important;min-height:100%;
}
html:root>body{background:transparent!important;color:#000000;font-family:var(--dm-font)}
::selection{background:#87CEEB;color:#000000}
html body :is(h1,h2,h3,h4){font-family:Trebuchet MS,Arial,sans-serif;color:#000000}
html body :is(h1,h2,h3) span{color:#000080}
html body li::marker{color:#1E90FF}

/* ---------- header: frosted glass bar, dark words ---------- */
html body > header,html body header#learning-header,html body #dimau-shell-header{
  background:rgba(240,248,255,.42)!important;color:#000000!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1.5px solid rgba(240,248,255,.9)!important;box-shadow:0 1px 0 rgba(6,26,85,.04)!important}
html body header .brand,html body header .brand span{color:#000000!important;font-family:Verdana,Geneva,Arial,sans-serif!important;font-weight:800!important}
html body header :is(.learner-nav a,.navlink,nav a){color:#000080!important;font-weight:600}
html body header #sync-status{color:#191970!important}
html body header#learning-header .fl-more{color:#000080!important}
html body header#learning-header .fl-more:hover{background:rgba(240,248,255,.7)!important}
html body header .logo-tile,html body .dimau-owner-logo-frame{background:#FFFFFF!important;border:0!important;box-shadow:0 4px 14px rgba(70,130,180,.25)!important;border-radius:14px!important}

/* Welcome, Share, Sign in, sound, streak, XP — one button style on every app */
html body :is(.bw-pill,.bw-share,#dimau-shell-utility,#dimau-shell-account,.dm-acct-btn,.fb-open),
html body header#learning-header :is(.bw-pill,.bw-share,.dm-acct-btn),
html body header .hstats .pill,html body header#learning-header .hstats .pill{
  background:var(--glass)!important;background-image:none!important;color:#000080!important;
  border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important;
  box-shadow:var(--glow)!important;text-shadow:none!important;font-family:Verdana,Geneva,Arial,sans-serif!important;font-weight:700!important}
html body :is(.bw-pill,.bw-share,.dm-acct-btn,.fb-open):hover,html body header .hstats .pill:hover{background:rgba(240,248,255,.8)!important}
html body .bw-pill *{color:#000080!important}
html body header .hstats .pill.xp{background:rgba(255,236,170,.75)!important}
html body header .hstats .pill.streak{background:rgba(255,226,220,.75)!important}

/* ---------- cards: frosted glass, blue edge, leaf corners ---------- */
html body :is(.levelbar,.ccard,.stg,.joinbox,.badge-t,.clsline,.note,.path-node,.catalogue-lane,.catalogue-planned,.record-trace,.lesson-card,.subject-card,.card,.panel,.stat,.sheet,.modal,.fl-sheet){
  background:var(--glass)!important;background-image:none!important;color:#000000;
  border:1.5px solid #1E90FF!important;box-shadow:var(--glow)!important;
  border-radius:6px 26px 6px 26px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body :is(.levelbar,.ccard,.stg,.joinbox,.note,.card,.panel) :is(p,small,.lrow,span:not([class])){color:#191970}
html body .levelbar :is(b,.lrow b){color:#000000!important}
html body .levelbar *{color:#191970}
html body .lp{background:rgba(30,144,255,.15)!important}
html body .lp i{background:linear-gradient(90deg,#1E90FF,#87CEEB)!important}
html body .stg.open{border-color:#000080!important}
html body .ccard .cb{border-radius:6px 16px 6px 16px}
html body .catalogue-art{background:var(--glass-strong)!important;border-color:rgba(30,144,255,.45)!important}

/* ---------- primary buttons: blue gradient, light words ---------- */
html body :is(.resume,.btn:not(.ghost),.chip.on,.chip.sel,button[type=submit],.record-controls button[aria-pressed=true]){
  background:linear-gradient(135deg,#1E90FF,#4682B4)!important;color:#F0F8FF!important;
  border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important;
  box-shadow:0 0 0 1px rgba(135,206,235,.35),0 0 12px rgba(30,144,255,.45),inset 0 0 14px rgba(240,248,255,.18)!important}
html body :is(.resume,.btn:not(.ghost)) *{color:#F0F8FF!important}
html body .resume{border-radius:6px 26px 6px 26px!important}
html body .resume.review{background:linear-gradient(135deg,#4682B4,#191970)!important}
html body :is(.resume,.btn:not(.ghost)):hover{filter:brightness(1.06)}

/* secondary buttons, chips, inputs */
html body :is(.chip:not(.on):not(.sel),.btn.ghost,.learn-help button,.learn-secondary,.record-table button,.record-controls button:not([aria-pressed=true]),.navlink){
  background:var(--glass)!important;color:#000080!important;border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important}
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){
  background:var(--glass-strong)!important;color:#000000!important;border:1.5px solid rgba(30,144,255,.55)!important;border-radius:4px 16px 4px 16px!important}
html body :is(input,select,textarea)::placeholder{color:#4682B4}
html body :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #1E90FF!important;outline-offset:3px}

/* section labels and links */
html body .sect{color:#000080!important}
html body main a:not([class]){color:#000080}

/* ---------- 4 Oct 2026 (rev 2): full welcome words, less empty space ---------- */
/* always "Bula! Welcome to FijiLearn" — never the short "Bula!" */
html body header .bw-pill .bw-txt.bw-long,html body .bw-pill.bw-inline .bw-txt.bw-long{display:inline!important}
html body header .bw-pill .bw-txt.bw-short,html body .bw-pill.bw-inline .bw-txt.bw-short{display:none!important}
/* nav link under the buttons: dark and readable */
html body header#learning-header .learner-nav a,html body header#learning-header .learner-nav{color:#000080!important;opacity:1!important}
html body header#learning-header #sync-status{color:#191970!important}
/* header: no dead space */
html body header#learning-header{row-gap:6px!important}
html body header#learning-header .header-tools{padding-bottom:4px!important}
html body header#learning-header .learner-nav :is(a,button){min-height:30px!important}
@media(max-width:640px){
  html body header#learning-header{padding:8px 12px 6px!important;row-gap:6px!important}
  html body header#learning-header .bw-pill{min-height:38px!important;padding:6px 12px!important}
  html body header#learning-header .learner-nav{margin:0!important;padding:0!important}
}
/* page: panels closer together */
html body .hero{padding:14px 0 2px!important}
html body .hero p{margin-top:6px!important}
html body :is(.levelbar,.resume){margin-top:10px!important}
html body .stg{margin-top:8px!important}
html body .ccard{margin-top:8px!important}
html body .joinbox{margin-top:10px!important}
html body .chips{margin-top:12px!important}
html body .sect{margin:16px 0 4px!important}
html body .note{margin-top:14px!important}
html body .wrap{padding-bottom:28px!important}


/* FijiLearn's own logo beside its name */
html body .brand .fl-logo{display:inline-block;width:30px;height:30px;vertical-align:middle;margin:0 6px 0 0;border-radius:50%;flex:0 0 30px}
html body .brand:has(.fl-logo){display:inline-flex!important;align-items:center}
@media(max-width:640px){html body .brand .fl-logo{width:28px;height:28px;flex-basis:28px;margin-right:5px}}

/* full welcome words on every screen size — stronger than dimau-shell.css's phone rule */
html:root body :is(#dimau-shell-utility,.bw-pill).bw-pill.bw-full .bw-txt.bw-long,
html:root body :is(#dimau-shell-utility,.bw-pill).bw-pill .bw-txt.bw-long{display:inline!important}
html:root body :is(#dimau-shell-utility,.bw-pill).bw-pill.bw-full .bw-txt.bw-short,
html:root body :is(#dimau-shell-utility,.bw-pill).bw-pill .bw-txt.bw-short{display:none!important}

/* Demo guide button: brand glass, not red */
html body #gt-launcher{background:rgba(240,248,255,.7)!important;background-image:none!important;color:#000080!important;border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important;box-shadow:0 0 0 1px rgba(135,206,235,.35),0 0 12px rgba(30,144,255,.45)!important}
html body #gt-launcher .gt-label{color:#000080!important}

/* Matua language switch */
html body .langs button{background:rgba(240,248,255,.6)!important;color:#000080!important;border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important}
html body .langs button.on{background:linear-gradient(135deg,#1E90FF,#4682B4)!important;color:#F0F8FF!important}
html body #gt-launcher .gt-reddot{background:#1E90FF!important;box-shadow:0 0 0 4px rgba(30,144,255,.25)!important}

/* User supplied woven mat background — 25 October 2026. */
html:root:root{background:#e9d9ad url("/fijilearn-weave-20261029.webp") center top / 824px 600px repeat!important;background-attachment:scroll!important}
html:root>body{background:transparent!important;min-height:100vh}
html body :is(.hero,footer){background:rgba(255,253,245,.92);border-radius:16px;padding:16px!important}

/* Native learning styles use important rules in the first cascade layer.
   Reveal the root's woven image without competing with the learner theme. */
@layer fijilearn-mobile {
  html:root > body.fl-experience {
    background: transparent !important;
    min-height: 100vh;
  }
  html:root > body.fl-experience .catalogue-wrap {
    background: transparent !important;
  }
  body.fl-experience .catalogue-hero,
  body.fl-experience .catalogue-controls,
  body.fl-experience .catalogue-path {
    background: rgba(255, 253, 247, .95);
    border: 1px solid rgba(111, 87, 39, .18);
    border-radius: 20px;
    padding: 20px !important;
  }
  body.fl-experience .catalogue-path {
    margin-top: 14px !important;
  }
  body.fl-experience .catalogue-status {
    width: fit-content;
    background: rgba(255, 253, 247, .95);
    border-radius: 12px;
    padding: 8px 14px !important;
  }
  html:root > body.fl-experience #app {
    background: rgba(255, 253, 247, .95);
    border-radius: 20px;
  }
  html:root > body.fl-experience[data-learning-screen=lesson] #app {
    background: var(--fx-bg);
  }
  @media (max-width: 600px) {
    body.fl-experience .catalogue-hero,
    body.fl-experience .catalogue-controls,
    body.fl-experience .catalogue-path { padding: 16px !important; }
  }
  @media (forced-colors: active) {
    html:root > body.fl-experience { background: Canvas !important; }
    body.fl-experience .catalogue-hero,
    body.fl-experience .catalogue-controls,
    body.fl-experience .catalogue-path,
    body.fl-experience .catalogue-status,
    html:root > body.fl-experience #app { background: Canvas; }
  }
}