/* =====================================================================
   EXAM HUB — APP SHELL
   Sticky app bar (brand, breadcrumb, preferences) · side navigation
   with live progress on wide screens, a scrolling tab bar on narrow
   ones · the stream band · view headers · footer.
   ===================================================================== */

/* ---------- App bar ---------- */
.appbar{
  position:sticky;top:0;z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--teal-deep),var(--teal-bright) 45%,var(--teal) 70%,var(--sun));pointer-events:none}
.appbar-in{display:flex;align-items:center;gap:1rem;min-height:4.3rem;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.appbar-spacer{flex:1}

.brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;flex:none;min-width:0}
.brand-mark{
  position:relative;isolation:isolate;overflow:hidden;flex:none;
  width:2.8rem;height:2.8rem;border-radius:.9rem;display:grid;place-items:center;
  background:linear-gradient(160deg,#7AEDE3 0%,#14BAB0 52%,#07847D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 3px 0 #066F69,0 10px 18px -10px rgba(0,70,80,.7);
}
.brand-mark::before{content:"";position:absolute;z-index:-1;left:10%;right:10%;top:3%;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
.brand-mark svg{width:76%;height:76%}
.brand-text{display:grid;line-height:1.15;min-width:0}
.brand-text b{font-weight:900;font-size:1.1rem;letter-spacing:-.012em;color:var(--ink);white-space:nowrap}
.brand-text span{font-size:.76rem;font-weight:600;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text span em{font-style:normal;font-weight:800;color:var(--teal-ink)}

.crumbs{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:600;color:var(--fg-3);min-width:0;overflow:hidden;white-space:nowrap;padding-left:1rem;margin-left:.25rem;border-left:1px solid var(--line)}
.crumbs a{text-decoration:none;color:var(--fg-2)}
.crumbs a:hover{color:var(--teal-ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--fg);font-weight:800}
.crumbs .i{width:.9em;height:.9em;opacity:.55}
@media (max-width:1380px){.crumbs{display:none}}
@media (max-width:560px){.brand-text span{display:none}.appbar-in{gap:.55rem}.brand-mark{width:2.5rem;height:2.5rem}}

/* ---------- Shell: side navigation + content ---------- */
.shell{display:block;min-height:calc(100vh - 4.3rem)}
.side{display:none}
.main{min-width:0}
@media (min-width:1100px){
  .shell{display:grid;grid-template-columns:17.5rem minmax(0,1fr)}
  .side{
    display:flex;flex-direction:column;gap:1.1rem;
    position:sticky;top:calc(4.3rem + 3px + env(safe-area-inset-top,0px));height:calc(100vh - 4.3rem - 3px - env(safe-area-inset-top,0px));overflow:auto;scrollbar-width:thin;
    padding:1.25rem 1rem 1.5rem max(var(--gutter),env(safe-area-inset-left,0px));
    background:linear-gradient(180deg,var(--bg-soft),#fff 70%);border-right:1px solid var(--line);
  }
  .mtabs{display:none}
}

/* Stream card at the top of the side bar */
.side-stream{display:grid;gap:.6rem;padding:1rem 1.05rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.ss-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ss-term{font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.ss-name{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.ss-ring{display:flex;align-items:center;gap:.75rem;padding-top:.65rem;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.ss-ring b{display:block;font-size:.9rem;font-weight:800;color:var(--fg)}
.ss-ring span{font-size:.78rem;color:var(--fg-3)}

/* Side links */
.side-nav{display:grid;gap:.2rem}
.side-label{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding:.6rem .75rem .25rem}
.side-link{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:2.1rem 1fr auto;align-items:center;gap:.65rem;
  padding:.5rem .7rem .5rem .5rem;border-radius:var(--r-md);
  text-decoration:none;color:var(--fg-2);font-weight:700;font-size:.95rem;transition:background .2s,color .2s,box-shadow .2s,transform .12s;
}
.side-link:hover{background:#fff;color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.side-link:active{transform:translateY(1px)}
.sl-ic{width:2.1rem;height:2.1rem;border-radius:.7rem;display:grid;place-items:center;background:#fff;color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--line),0 2px 0 var(--gelw-lip)}
.sl-ic .i{width:1.1rem;height:1.1rem}
.sl-name{min-width:0;line-height:1.2}
.sl-name small{display:block;font-size:.74rem;font-weight:600;color:var(--fg-3);margin-top:.1rem}
.sl-meta{font-size:.72rem;font-weight:900;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.sl-meta.done{color:var(--ok)}
.side-link[aria-current="page"]{color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 var(--gel-lip),0 10px 18px -10px rgba(0,70,80,.55)}
.side-link[aria-current="page"] .sl-ic{background:rgba(255,255,255,.85);box-shadow:none;color:var(--teal-ink)}
.side-link[aria-current="page"] .sl-name small,.side-link[aria-current="page"] .sl-meta{color:var(--gel-ink)}
.sl-bar{grid-column:2 / -1;height:4px;border-radius:999px;background:var(--bg-sunken);overflow:hidden;margin-top:-.1rem}
.sl-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--teal-deep))}
.side-link[aria-current="page"] .sl-bar{background:rgba(255,255,255,.5)}
.side-link[aria-current="page"] .sl-bar i{background:var(--gel-ink)}

/* Certificate card in the side bar */
.side-cert{
  margin-top:auto;display:grid;gap:.55rem;padding:1rem 1.05rem;border-radius:var(--r-lg);text-decoration:none;color:inherit;
  background:linear-gradient(160deg,#FFF9E6,#FFF0C2);border:1px solid #F5DE9E;box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s;
}
.side-cert:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.sc-top{display:flex;align-items:center;gap:.6rem}
.sc-top b{font-size:.95rem;font-weight:900;color:#5A3B00}
.sc-top span{font-size:.75rem;font-weight:700;color:var(--sun-ink)}
.sc-medal{width:2.3rem;height:2.3rem;flex:none}
.sc-bar{height:6px;border-radius:999px;background:rgba(138,90,0,.14);overflow:hidden}
.sc-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FFD25C,#F0A800)}
.side-cert.is-earned{background:linear-gradient(160deg,#FFF3C4,#FFD970);border-color:#F0C24A}

/* Mobile tab bar */
.mtabs{
  position:sticky;top:calc(4.3rem + 3px + env(safe-area-inset-top,0px));z-index:50;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:.55rem max(var(--gutter),env(safe-area-inset-right,0px)) .55rem max(var(--gutter),env(safe-area-inset-left,0px));
}

/* ---------- Stream band (Home only, so other views start high) ---------- */
.band{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.5rem,1rem + 2vw,2.6rem) var(--gutter);
  background:linear-gradient(120deg,#FFFFFF 0%,#F1FBFA 45%,#DDF6F3 100%);
  border-bottom:1px solid var(--line);
}
.band::before,.band::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.band::before{width:34rem;height:34rem;right:-9rem;top:-17rem;background:radial-gradient(circle at 35% 65%,rgba(91,227,216,.55),rgba(91,227,216,0) 62%)}
.band::after{width:22rem;height:22rem;right:18%;bottom:-15rem;background:radial-gradient(circle,rgba(255,196,61,.32),rgba(255,196,61,0) 65%)}
.band-in{display:grid;gap:1.5rem;align-items:center}
@media (min-width:1080px){.band-in{grid-template-columns:minmax(0,1fr) minmax(24rem,1.05fr)}}
.band-id{display:grid;gap:.75rem;justify-items:start;animation:eh-rise .6s cubic-bezier(.2,.8,.2,1) both}
.band-id h1{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.4rem);color:var(--ink)}
.band-id h1 em{color:var(--teal-deep)}
.band-themes{display:flex;flex-wrap:wrap;gap:.45rem}
.band-themes span{display:inline-flex;align-items:baseline;gap:.5rem;padding:.4rem .9rem;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 2px 0 var(--gelw-lip);font-weight:800;font-size:.95rem;color:var(--ink)}
.band-themes .ar-inline{font-size:.88rem;font-weight:600;color:var(--fg-3)}
.band-meta{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.band .markbar{padding:1.15rem 1.3rem;border-radius:var(--r-lg);background:rgba(255,255,255,.92);box-shadow:var(--shadow-2),inset 0 0 0 1px var(--line);animation:eh-rise .7s .08s cubic-bezier(.2,.8,.2,1) both}
.band .mb-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem .75rem}
.band .mb-item{padding:0}
.band .mb-item .mk small{display:none}
@media (max-width:560px){.band .mb-legend{grid-template-columns:repeat(3,minmax(0,1fr))}.band .mb-item .nm{white-space:normal;line-height:1.2;font-size:.64rem}}
.mb-caption{display:flex;justify-content:space-between;gap:1rem;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- Views ---------- */
.view{
  padding:clamp(1.25rem,1rem + 1.2vw,2.25rem) max(var(--gutter),env(safe-area-inset-right,0px)) var(--sp-8) max(var(--gutter),env(safe-area-inset-left,0px));
  display:grid;gap:clamp(1.25rem,1rem + 1vw,2rem);animation:eh-fade .3s ease both;min-width:0;
}
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.vh-text{display:grid;gap:.4rem;max-width:80rem;min-width:0}
.vh-text h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);color:var(--ink)}
.vh-text .lede{font-size:var(--fs-base);max-width:96ch}
.vh-text .ar{max-width:96ch}
.vh-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.block{display:grid;gap:1.1rem;min-width:0}
.block-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem}
.block-head h2{font-size:var(--fs-xl);color:var(--ink)}
.block-aside{display:flex;gap:.5rem;align-items:center}
.block-sub{color:var(--fg-2);font-size:var(--fs-sm);max-width:72ch}
.block-body{display:grid;gap:1.15rem;min-width:0}
.kicker{font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-ink)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--bg-soft));color:var(--fg-3);font-size:var(--fs-sm)}
.footer-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;align-items:center;padding-block:1.75rem;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.footer-brand{display:flex;align-items:center;gap:.75rem;color:var(--fg-2)}
.footer-brand .brand-mark{width:2.3rem;height:2.3rem;border-radius:.75rem}
.footer-brand b{color:var(--ink);font-weight:900}
.footer-brand em{font-style:normal;font-weight:800;color:var(--teal-ink)}
.footer a{color:var(--fg-2)}
.privacy-note{display:inline-flex;align-items:center;gap:.5rem}
.privacy-note .i{color:var(--ok)}

/* Long CEFR labels (B1.2–B2.1) */
.ss-top{flex-wrap:wrap;row-gap:.35rem}
.side-stream .cefr,.band-meta .cefr{white-space:nowrap}
.band-meta .cefr{color:var(--gel-ink)}
.side-stream .cefr{font-size:.82rem;padding:.18rem .6rem}

/* "students active today" (assets/js/eh-live.js): a quiet pill in the top bar with a green live dot */
.live-count{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .85rem .38rem .7rem;border-radius:var(--r-pill,999px);background:var(--teal-tint);border:1px solid var(--line-strong);color:var(--fg-2);font-size:.82rem;font-weight:600;line-height:1.2;white-space:nowrap;user-select:none}
.live-count[hidden]{display:none}
.live-count .live-dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);animation:live-pulse 2.6s ease-in-out infinite}
.live-count .live-n{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.live-count .ar-inline{margin-left:.15rem;color:var(--fg-3)}
.live-count.is-updated .live-n{animation:live-flash 1.2s ease-out}
.live-count.is-offline{opacity:.7}
.live-count.is-offline .live-dot{background:var(--fg-3);animation:none}
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(17,134,79,.45)}50%{box-shadow:0 0 0 .32rem rgba(17,134,79,0)}}
@keyframes live-flash{0%{color:var(--teal-ink);text-shadow:0 0 .6rem rgba(19,189,179,.6)}100%{color:var(--ink);text-shadow:none}}
@media (prefers-reduced-motion:reduce){.live-count .live-dot,.live-count.is-updated .live-n{animation:none}}
@media (max-width:720px){.live-count .live-word,.live-count .ar-inline{display:none}}
@media (max-width:480px){.live-count{padding:.34rem .6rem}.live-count .live-rest{display:none}}

/* The word Revision: a gel tag in the top bar and above the page title. On phones "Grade 11" sits above it. */
.brand-text b{display:flex;align-items:center;gap:.4rem}
.brand-text b i{font-style:normal}
.bn-rev{display:inline-flex;align-items:center;padding:.1rem .62rem .12rem;border-radius:var(--r-pill);font-size:.96em;line-height:1.25;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 var(--gel-lip)}
@media (max-width:560px){.brand-text b{display:grid;justify-items:start;gap:.14rem;font-size:.9rem;line-height:1.1}.bn-x{display:none}}
.eyebrow:has(.rev-tag){flex-wrap:wrap}
.eyebrow:has(.rev-tag)::before{display:none}
.rev-tag{display:inline-flex;align-items:center;gap:.5em;padding:.26rem .95rem .28rem;border-radius:var(--r-pill);font-size:1.02rem;font-weight:900;letter-spacing:.09em;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 var(--gel-lip)}
.rev-tag .ar-inline{font-size:1.05em;font-weight:800;letter-spacing:0}
.brand-text{row-gap:.18rem}
/* A full top bar on smaller screens: the controls compact first, then the name, then the count */
@media (max-width:1060px){
  .prefs .seg button{padding:.45rem .65rem}
  .prefs .seg .lv-name{display:none}
  .prefs .seg .lv-short{display:inline!important}
  .prefs .ar-switch .lbl{display:none}
  .prefs .ar-switch{padding:0 .38rem}
}
@media (max-width:1180px){.live-count .ar-inline{display:none}}
@media (max-width:860px){.bn-x{display:none}.live-count .live-word{display:none}}
@media (max-width:680px){.live-count .live-rest{display:none}}
@media (max-width:560px){
  .appbar-in{gap:.35rem}
  .brand{gap:.4rem}
  .brand-mark{width:2.2rem;height:2.2rem}
  .brand-text b{font-size:.82rem}
  .prefs{gap:.25rem}
  .prefs .seg{padding:3px;gap:1px}
  .prefs .seg button{padding:.35rem .5rem}
  .prefs .seg .lv-dot{display:none}
  .prefs .icon-btn{width:2.15rem;height:2.15rem}
  .live-count{padding:.3rem .45rem;gap:.3rem}
}
@media (max-width:380px){.live-count .live-dot{display:none}.appbar-in{padding-left:.6rem;padding-right:.6rem}}

/* Cumulative daily unique-browser total alongside the live daily counter. */
.brand-mark.toolkit-logo{background:#fff;border:1px solid var(--line-strong);box-shadow:0 3px 10px rgba(37,24,64,.12);border-radius:50%;overflow:hidden;padding:.18rem}
.brand-mark.toolkit-logo::before{display:none}
.brand-mark.toolkit-logo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.lifetime-count{display:inline-flex;align-items:center;gap:.42rem;padding:.38rem .72rem;border-radius:999px;background:#f6f0ff;border:1px solid #dfd0f4;color:#63447c;font-size:.8rem;font-weight:600;line-height:1.2;white-space:nowrap;user-select:none}
.lifetime-count[hidden]{display:none}
.lifetime-count .lifetime-icon{width:1.3rem;height:1.3rem;border-radius:50%;background:#6f45a4;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.lifetime-count .lifetime-n{color:#45265e;font-weight:850;font-variant-numeric:tabular-nums}
.lifetime-count.is-offline{opacity:.55}
@media(max-width:1000px){.lifetime-count .lifetime-rest{display:none}}
@media(max-width:690px){.lifetime-count{padding:.32rem .45rem;gap:.22rem}.lifetime-count .lifetime-icon{display:none}}
@media(max-width:430px){.lifetime-count{font-size:.72rem}.lifetime-count .lifetime-n{font-size:.8rem}}

/* Official toolkit badge in places that formerly used the generic monogram */
.brand-mark.toolkit-brand-symbol{background:#fff;border-radius:50%;box-shadow:0 3px 10px rgba(37,24,64,.12)}
.brand-mark.toolkit-brand-symbol::before{display:none}
.brand-mark.toolkit-brand-symbol img{display:block;width:90%;height:90%;object-fit:contain}

/* V20 · a quiet acknowledgement below the teacher link. */
.side-thanks{position:relative;margin:12px 14px 18px;padding:13px 14px 12px 16px;border-left:3px solid #a26ac3;border-radius:10px;background:linear-gradient(125deg,rgba(244,230,249,.88),rgba(255,250,253,.85));color:#5d4270;box-shadow:0 1px 7px rgba(75,35,88,.04)}
.side-thanks p{margin:0;font:500 .76rem/1.65 "Source Sans EH",Arial,sans-serif}
.side-thanks strong{font-weight:850;color:#4c2d65}
.side-thanks-mark{position:absolute;top:-7px;right:12px;font:900 37px Georgia,serif;color:rgba(145,84,173,.20);line-height:1}
@media (max-width:850px){.side-thanks{margin:10px 12px 14px}}