/* =========================================================================
   MOZAIK ACADEMY — sign-in gate, welcome toast, tour, admin analytics
   Markup for all of these is injected by shared/academy.js
   ========================================================================= */
  #gate{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(160deg,#f6f5fb 0%, #ece9f9 100%); padding:24px; }
  #gate[hidden]{ display:none; }
  #gate .card{ background:#fff; border:1px solid var(--border-gray); border-radius:18px; position:relative;
    box-shadow: 0 22px 64px rgba(40,30,90,0.20); width:100%; max-width:420px; padding:36px 32px; }
  .langswitch{ font-size:12.5px; font-weight:600; color:var(--kraken-purple); text-decoration:none;
    border:1px solid var(--border-gray); border-radius:9999px; padding:5px 12px; white-space:nowrap; background:#fff; }
  .langswitch:hover{ background:var(--kraken-purple-subtle); text-decoration:none; }
  #gate .gatelang{ position:absolute; top:16px; right:16px; }
  nav.top .navlang{ flex:0 0 auto; margin-left:4px; }
  @media(max-width:520px){ nav.top .navlang{ display:none; } }
  #gate .glogo{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
  #gate .glogo .chip{ width:36px;height:36px;border-radius:9px;background:var(--kraken-purple);color:#fff;
    font-family:var(--font-brand);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;}
  #gate .glogo .wm{ font-family:var(--font-brand);font-weight:700;font-size:19px;letter-spacing:-.5px;}
  #gate .glogo .wm span{ color:var(--cool-gray);font-weight:500;}
  #gate h2{ font-family:var(--font-brand); font-size:24px; letter-spacing:-.6px; margin:0 0 4px;}
  #gate p.hint{ color:var(--cool-gray); font-size:14px; margin:0 0 22px;}
  #gate label{ display:block; font-size:12px; font-weight:600; color:var(--cool-gray);
    text-transform:uppercase; letter-spacing:.5px; margin:0 0 7px;}
  #gate select, #gate input{ width:100%; box-sizing:border-box; font-size:15px; font-family:inherit;
    padding:12px 13px; border:1px solid var(--border-gray); border-radius:10px; background:#fff; color:#101114;
    margin:0 0 18px; transition:border-color .15s, box-shadow .15s;}
  #gate select:focus, #gate input:focus{ outline:none; border-color:var(--kraken-purple);
    box-shadow:0 0 0 3px var(--kraken-purple-subtle);}
  #gate button{ width:100%; font-family:inherit; font-size:15px; font-weight:600; color:#fff; cursor:pointer;
    background:var(--kraken-purple); border:none; border-radius:10px; padding:13px; transition:background .15s, transform .05s;}
  #gate button:hover{ background:var(--kraken-purple-deep);}
  #gate button:active{ transform:translateY(1px);}
  #gate .err{ color:var(--danger,#e2495b); font-size:13.5px; margin:-8px 0 14px; min-height:18px; }
  body.locked{ overflow:hidden; }

  #welcome{ position:fixed; top:80px; left:50%; transform:translateX(-50%) translateY(-12px);
    z-index:200; background:var(--kraken-purple); color:#fff; font-weight:600; font-size:15px;
    padding:12px 22px; border-radius:9999px; box-shadow:0 14px 34px rgba(80,50,180,.30);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
  #welcome.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- first-steps walkthrough ---------- */
  #tour{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
    background:rgba(20,16,40,0.46); backdrop-filter:blur(3px); padding:24px; }
  #tour[hidden]{ display:none; }
  #tour .tcard{ background:#fff; border-radius:18px; box-shadow:0 24px 70px rgba(30,20,80,.30);
    width:100%; max-width:440px; padding:30px 30px 24px; }
  #tour .tnum{ font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
    color:var(--kraken-purple); margin:0 0 10px; }
  #tour h3{ font-family:var(--font-brand); font-size:23px; letter-spacing:-.5px; margin:0 0 10px; }
  #tour p{ color:var(--cool-gray); font-size:15px; line-height:1.55; margin:0; min-height:96px; }
  #tour .trow{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; }
  #tour .dots{ display:flex; gap:7px; }
  #tour .dots i{ width:8px; height:8px; border-radius:50%; background:var(--border-gray); display:block;
    transition:background .2s, width .2s; }
  #tour .dots i.on{ background:var(--kraken-purple); width:20px; border-radius:9999px; }
  #tour .tbtns{ display:flex; align-items:center; gap:12px; }
  #tour .skip{ font-size:14px; color:var(--cool-gray); background:none; border:none; cursor:pointer; padding:6px; }
  #tour .skip:hover{ color:#101114; }
  #tour .next{ font-family:inherit; font-size:14.5px; font-weight:600; color:#fff; background:var(--kraken-purple);
    border:none; border-radius:10px; padding:11px 20px; cursor:pointer; transition:background .15s, transform .05s; }
  #tour .next:hover{ background:var(--kraken-purple-deep); }
  #tour .next:active{ transform:translateY(1px); }

  /* ---------- admin analytics dashboard ---------- */
  #analytics{ position:fixed; inset:0; z-index:400; display:none; overflow:auto;
    background:#0f1115; color:#e7e9ee; font-family:var(--font-sans, inherit); }
  #analytics.open{ display:block; }
  #analytics .abar{ position:sticky; top:0; display:flex; align-items:center; gap:14px;
    padding:16px 26px; background:#12141a; border-bottom:1px solid #23262f; }
  #analytics .atitle{ font-family:var(--font-brand); font-weight:700; font-size:18px; letter-spacing:-.4px; color:#fff; }
  #analytics .asub{ color:#8b90a0; font-size:12.5px; }
  #analytics .aspacer{ flex:1; }
  #analytics .abtn{ font-family:inherit; font-size:13.5px; font-weight:600; border-radius:9px; cursor:pointer;
    padding:9px 15px; border:1px solid #2b2f3a; background:#1b1e26; color:#e7e9ee; }
  #analytics .abtn:hover{ background:#232733; }
  #analytics .aclose{ background:var(--kraken-purple); border-color:var(--kraken-purple); color:#fff; }
  #analytics .awrap{ max-width:1000px; margin:0 auto; padding:28px 26px 70px; }
  #analytics .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  #analytics .kpi{ background:#161922; border:1px solid #23262f; border-radius:14px; padding:18px 20px; }
  #analytics .kpi .k{ font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:#8b90a0; }
  #analytics .kpi .v{ font-family:var(--font-brand); font-weight:700; font-size:30px; margin-top:6px; color:#fff; }
  #analytics h4{ font-family:var(--font-brand); font-size:15px; margin:30px 0 12px; color:#c7cbd6; font-weight:600; }
  #analytics table{ width:100%; border-collapse:collapse; font-size:14px; }
  #analytics th{ text-align:left; color:#8b90a0; font-weight:600; font-size:11.5px; text-transform:uppercase;
    letter-spacing:.4px; padding:10px 12px; border-bottom:1px solid #23262f; }
  #analytics td{ padding:11px 12px; border-bottom:1px solid #1b1e26; }
  #analytics tr:hover td{ background:#161922; }
  #analytics .bar{ height:8px; border-radius:6px; background:var(--kraken-purple); min-width:6px; }
  #analytics .amuted{ color:#8b90a0; }
  @media(max-width:720px){ #analytics .kpis{ grid-template-columns:repeat(2,1fr); } }

  .userchip{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--cool-gray); white-space:nowrap; }
  .userchip b{ color:#101114; font-weight:600; }
  .userchip a{ color:var(--kraken-purple); text-decoration:none; cursor:pointer; }
  .userchip a:hover{ text-decoration:underline; }
  @media(max-width:520px){ .userchip .lbl{ display:none; } }

/* ========================================================================
   ACADEMY EXTRAS — added with the multi-course restructure
   ======================================================================== */

/* brand in the nav is now a link back to the Academy home */
nav.top a.brand, footer.foot a.brand{ text-decoration:none; color:inherit; }
nav.top a.brand:hover{ text-decoration:none; }

.backlink{ flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--cool-gray);
  text-decoration:none; border:1px solid var(--border-gray); border-radius:9999px;
  padding:5px 12px; white-space:nowrap; background:#fff;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.backlink:hover{ background:var(--kraken-purple-subtle); color:var(--kraken-purple); text-decoration:none; }
@media(max-width:1100px){ nav.top .backlink{ display:none; } }

/* keep the wordmark on one line now that the bar carries more controls */
nav.top .brand{ flex:0 0 auto; white-space:nowrap; }

/* hero without a big opening diagram */
header.hero.compact{ padding-bottom:28px; }

/* “mark as complete” block at the end of a course */
.complete{ max-width:var(--maxw); margin:52px auto 64px; padding:22px 26px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  border:1px solid var(--border-gray); border-radius:18px; background:#fff;
  box-shadow:var(--shadow-subtle); }
.complete .ctext{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px; }
.complete .ctext b{ font-family:var(--font-brand); font-size:18px; letter-spacing:-.3px; }
.complete .ctext span{ font-size:14px; color:var(--cool-gray); }
.complete .cbtn{ font-family:inherit; font-size:14.5px; font-weight:600; color:#fff; cursor:pointer;
  background:var(--kraken-purple); border:none; border-radius:11px; padding:12px 20px;
  transition:background var(--dur-fast) var(--ease-standard), transform .05s; }
.complete .cbtn:hover{ background:var(--kraken-purple-deep); }
.complete .cbtn:active{ transform:translateY(1px); }
.complete.is-done{ background:var(--success-subtle); border-color:rgba(20,158,97,.35); box-shadow:none; }
.complete.is-done .ctext b{ color:var(--success-text); }
.complete .cundo{ font-family:inherit; font-size:13.5px; color:var(--cool-gray); background:none;
  border:none; cursor:pointer; text-decoration:underline; padding:6px; }
.complete .cundo:hover{ color:var(--near-black); }
@media(max-width:560px){ .complete{ margin-left:16px; margin-right:16px; } }