/* ============================================================
   SG Maths Exam — shared app shell
   Unified, kid-friendly navigation + shared tokens.
   Loaded on every page; nav classes are prefixed .appnav so they
   never clash with a page's own inline styles.
   ============================================================ */

:root{
  --sg-indigo:#4f46e5; --sg-indigo-dark:#4338ca; --sg-indigo-light:#eef2ff;
  --sg-orange:#f97316; --sg-orange-dark:#ea580c;
  --sg-red:#d7263d;            /* Singapore / MOE accent */
  --sg-red-light:#fdecee;
  --sg-text:#0f172a; --sg-muted:#64748b;
  --sg-border:#e2e8f0; --sg-bg:#f8fafc; --sg-soft:#f1f5f9;
  --sg-shadow:0 4px 14px rgba(15,23,42,.07);
}

/* ---- shared buttons (self-contained; pages may override) ---- */
.appnav .btn,.btn-sg{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:12px;border:1.5px solid transparent;font-weight:700;
  font-size:.95rem;line-height:1;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;white-space:nowrap;}
.appnav .btn:hover{transform:translateY(-1px);text-decoration:none;}
.appnav .btn-sm{padding:9px 16px;font-size:.9rem;border-radius:10px;}
.appnav .btn-primary{background:var(--sg-indigo);color:#fff;}
.appnav .btn-primary:hover{background:var(--sg-indigo-dark);color:#fff;}
.appnav .btn-accent{background:var(--sg-orange);color:#fff;}
.appnav .btn-accent:hover{background:var(--sg-orange-dark);color:#fff;}
.appnav .btn-ghost{background:#fff;color:var(--sg-text);border-color:#cbd5e1;}
.appnav .btn-ghost:hover{background:var(--sg-soft);color:var(--sg-text);}

/* ============================ NAV ============================ */
.appnav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--sg-border);backdrop-filter:saturate(150%) blur(8px);}
.appnav-inner{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;
  align-items:center;gap:14px;}

/* brand */
.appnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
.appnav-mark{width:34px;height:34px;display:block;border-radius:9px;}
.appnav-name{font-weight:800;font-size:1.18rem;color:var(--sg-text);letter-spacing:-.01em;}
.appnav-name-em{color:var(--sg-indigo);}
.appnav-brand:hover{text-decoration:none;}

/* main links */
.appnav-links{display:flex;align-items:center;gap:4px;margin-left:6px;}
.appnav-link{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:11px;
  color:var(--sg-muted);font-weight:700;font-size:.98rem;text-decoration:none;line-height:1;
  min-height:44px;transition:background .15s ease,color .15s ease;}
.appnav-link:hover{background:var(--sg-soft);color:var(--sg-text);text-decoration:none;}
.appnav-link.is-active{background:var(--sg-indigo-light);color:var(--sg-indigo-dark);}
.appnav-ico{font-size:1.18rem;line-height:1;}

/* right cluster */
.appnav-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.appnav-streak:empty{display:none;}
.appnav-me{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;
  color:var(--sg-muted);font-weight:700;text-decoration:none;min-height:44px;}
.appnav-me:hover{background:var(--sg-soft);color:var(--sg-text);text-decoration:none;}
.appnav-me.is-active{background:var(--sg-indigo-light);color:var(--sg-indigo-dark);}
.appnav-logout{color:var(--sg-muted);font-weight:600;font-size:.9rem;padding:8px 10px;
  text-decoration:none;border-radius:10px;}
.appnav-logout:hover{color:var(--sg-text);background:var(--sg-soft);text-decoration:none;}

/* MOE trust ribbon under the nav (optional per page) */
.moe-ribbon{background:var(--sg-red-light);border-bottom:1px solid #f6d7db;color:#9b1c2b;
  font-weight:700;font-size:.82rem;text-align:center;padding:6px 16px;}
.moe-ribbon .moe-flag{color:var(--sg-red);}

/* ---- responsive: keep it simple & tappable for kids ---- */
@media (max-width:640px){
  .appnav-inner{padding:8px 12px;gap:8px;flex-wrap:wrap;}
  .appnav-name{font-size:1.05rem;}
  .appnav-mark{width:30px;height:30px;}
  .appnav-links{order:3;width:100%;justify-content:space-around;margin:2px 0 0;gap:2px;
    border-top:1px solid var(--sg-border);padding-top:6px;}
  .appnav-link{flex-direction:column;gap:2px;font-size:.74rem;padding:6px 8px;flex:1;text-align:center;}
  .appnav-ico{font-size:1.35rem;}
  .appnav-right{gap:6px;}
  .appnav-logout{display:none;}     /* logout lives in the Me page on mobile */
  .appnav-me-label{display:none;}
}