/* =====================================================================
   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:1180px){.crumbs{display:none}}
@media (max-width:560px){.brand-text span{display:none}.appbar-in{gap:.55rem}.brand-mark{width:2.5rem;height:2.5rem}}
@media (max-width:420px){.brand-text{display:none}}

/* ---------- 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)}