/* ==========================================================================
   FSS Training Portal — prototype styles
   Layers on top of css/base.css, which carries the brand tokens already in
   use on fssauditing.co.za (#002EFF, hexagon motif, Sora + Inter).
   ========================================================================== */

:root {
  --sidebar: 248px;
  --topbar: 64px;
}

/* --------------------------------------------------------------------------
   Demo chrome — makes it obvious this is a prototype, never a live system
   -------------------------------------------------------------------------- */
.demo-flag {
  position: fixed;
  inset: auto auto 0 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  background: var(--ink);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 0 10px 0 0;
  box-shadow: 0 -2px 20px rgba(4, 8, 28, .3);
}
.demo-flag i { width: 8px; height: 9px; background: var(--brand-300); clip-path: var(--hex); }

/* --------------------------------------------------------------------------
   Portal top bar
   -------------------------------------------------------------------------- */
.pbar {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-inline: clamp(1rem, .6rem + 1.5vw, 1.75rem);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.pbar--ink {
  background: rgba(4, 8, 28, .9);
  border-bottom-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
}
.pbar__logo { height: 26px; width: auto; flex: none; }
.pbar__title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.015em;
}
.pbar--ink .pbar__title { color: #fff; }
.pbar__sep { width: 1px; height: 24px; background: var(--line); flex: none; }
.pbar--ink .pbar__sep { background: rgba(255, 255, 255, .16); }
.pbar__spacer { flex: 1; }
.pbar__role {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--slate-500);
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  text-decoration: none;
}
.pbar__role:hover { border-color: var(--brand-200); color: var(--brand); }

/* --------------------------------------------------------------------------
   Demo hub
   -------------------------------------------------------------------------- */
.hub {
  min-height: 100vh;
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 0 4rem;
  position: relative;
  overflow: hidden;
}
.hub::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 56px 64px;
  pointer-events: none;
}
.hub > * { position: relative; }
.hub__logo { height: 40px; width: auto; margin-bottom: 2.25rem; }
.hub h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; }
.hub h1 .accent { color: var(--brand-300); }
.hub__lead { margin-top: 1.15rem; font-size: var(--t-lead); max-width: 62ch; color: rgba(255, 255, 255, .68); line-height: 1.62; }

.hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.hubcard {
  display: block;
  padding: 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.hubcard:hover { transform: translateY(-5px); border-color: var(--brand-400); }
.hubcard .hex { width: 46px; background: var(--brand); color: #fff; margin-bottom: 1.25rem; }
.hubcard .hex svg { width: 20px; height: 20px; }
.hubcard h3 { color: #fff; font-size: 1.12rem; margin-bottom: .5rem; }
.hubcard p { font-size: var(--t-xs); color: rgba(255, 255, 255, .6); line-height: 1.55; }
.hubcard__go {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.15rem; font-size: var(--t-xs); font-weight: 650; color: var(--brand-300);
}
.hubcard:hover .hubcard__go svg { transform: translateX(4px); }
.hubcard__go svg { transition: transform .25s var(--ease); }

.hub__note {
  margin-top: 3rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  display: flex;
  gap: .8rem;
}
.hub__note svg { width: 17px; height: 17px; color: var(--brand-300); flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Generic page shell
   -------------------------------------------------------------------------- */
.page { min-height: 100vh; background: var(--mist); }
.page__inner { max-width: 1180px; margin-inline: auto; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1rem, .6rem + 1.5vw, 1.75rem) 5rem; }

.page-head { margin-bottom: 1.75rem; }
.page-head h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
.page-head p { margin-top: .5rem; color: var(--slate-500); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   Learner — token landing
   -------------------------------------------------------------------------- */
.enter {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ink);
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.enter::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 46, 255, .28), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: auto, 56px 64px;
}
.enter__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}
.enter__logo { height: 34px; width: auto; margin-bottom: 1.75rem; }
.enter__card h1 { font-size: 1.5rem; margin-bottom: .6rem; }
.enter__card > p { font-size: var(--t-sm); color: var(--slate-500); }

.enter__detail {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.enter__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; font-size: var(--t-sm);
}
.enter__row + .enter__row { border-top: 1px solid var(--line); }
.enter__row dt { color: var(--slate-400); font-size: var(--t-xs); }
.enter__row dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

.consent {
  margin-top: 1.5rem;
  display: flex;
  gap: .75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  font-size: var(--t-xs);
  color: var(--slate-600);
  line-height: 1.55;
  cursor: pointer;
}
.consent input { margin-top: 2px; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Learner — course player
   -------------------------------------------------------------------------- */
.player__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 940px) { .player__grid { grid-template-columns: 1fr; } }

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #05070f;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.stage__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(150deg, #0A1030, #04081C 60%);
  color: #fff;
}
.stage__slide .hex { width: 62px; background: rgba(255, 255, 255, .08); color: var(--brand-300); margin: 0 auto 1.25rem; }
.stage__slide .hex svg { width: 26px; height: 26px; }
.stage__slide h3 { color: #fff; font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); }
.stage__slide p { margin-top: .6rem; color: rgba(255, 255, 255, .58); font-size: var(--t-sm); }
.stage__badge {
  position: absolute; top: 1rem; left: 1rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px);
  color: #fff; font-size: .68rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
}

.stage__controls {
  position: absolute; inset: auto 0 0 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  display: flex; align-items: center; gap: .9rem;
}
.stage__play {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.stage__play:hover { transform: scale(1.06); background: var(--brand-500); }
.stage__play svg { width: 17px; height: 17px; }
.stage__scrub { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); position: relative; cursor: not-allowed; }
.stage__scrub i { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--brand-300); border-radius: inherit; transition: width .25s linear; }
.stage__time { font-size: .72rem; color: rgba(255, 255, 255, .7); font-family: var(--font-mono); flex: none; }

.modules { display: grid; gap: .4rem; }
.module {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--t-xs);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.module.is-active { border-color: var(--brand); background: var(--brand-50); }
.module.is-done { color: var(--slate-500); }
.module__tick {
  width: 22px; height: 24px; flex: none; clip-path: var(--hex);
  background: var(--line); color: #fff; display: grid; place-items: center;
}
.module.is-done .module__tick { background: var(--pass); }
.module.is-active .module__tick { background: var(--brand); }
.module__tick svg { width: 11px; height: 11px; }
.module b { display: block; font-weight: 600; color: var(--ink); }
.module.is-done b { color: var(--slate-600); }
.module span { color: var(--slate-400); font-size: .7rem; }

.gate {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--white);
  font-size: var(--t-xs);
  color: var(--slate-500);
  line-height: 1.55;
  text-align: center;
}
.gate.is-open { border-style: solid; border-color: #B6E8CE; background: var(--pass-soft); color: #045C34; }

/* --------------------------------------------------------------------------
   Quiz
   -------------------------------------------------------------------------- */
.quiz { max-width: 760px; margin-inline: auto; }

.quiz__bar {
  position: sticky; top: var(--topbar); z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.15rem; margin-bottom: 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.quiz__count { font-size: var(--t-xs); font-weight: 650; color: var(--ink); white-space: nowrap; }
.quiz__track { flex: 1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.quiz__track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-400)); transition: width .35s var(--ease); }

.qcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  box-shadow: var(--sh-sm);
}
.qcard__no { font-family: var(--font-mono); font-size: .7rem; color: var(--brand); letter-spacing: .06em; }
.qcard h2 { font-size: 1.2rem; margin: .6rem 0 1.35rem; line-height: 1.35; }

.opts { display: grid; gap: .55rem; }
.opt {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--white);
  cursor: pointer;
  font-size: var(--t-sm);
  text-align: left;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease);
}
.opt:hover { border-color: var(--brand-300); background: var(--brand-50); }
.opt.is-picked { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-100); }
.opt__key {
  width: 27px; height: 29px; flex: none; clip-path: var(--hex);
  background: var(--mist); color: var(--slate-600);
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
}
.opt.is-picked .opt__key { background: var(--brand); color: #fff; }

.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Result
   -------------------------------------------------------------------------- */
.result { max-width: 620px; margin-inline: auto; text-align: center; }
.result__ring {
  width: 168px; height: 168px; margin: 0 auto 1.75rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--tone) calc(var(--pct) * 1%), var(--line) 0);
  position: relative;
}
.result__ring::before {
  content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--mist);
}
.result__ring span { position: relative; font-family: var(--font-display); font-size: 2.6rem; font-weight: 750; color: var(--ink); letter-spacing: -.04em; }
.result__ring small { position: relative; display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); margin-top: .2rem; }

.result h1 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); }
.result > p { margin-top: .8rem; color: var(--slate-500); font-size: var(--t-sm); line-height: 1.6; }
.result__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

.breakdown { margin-top: 2.5rem; text-align: left; display: grid; gap: .4rem; }
.breakdown__row {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--white); border: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--slate-600);
}
.breakdown__row .mark { width: 20px; height: 22px; clip-path: var(--hex); display: grid; place-items: center; flex: none; color: #fff; }
.breakdown__row .mark svg { width: 10px; height: 10px; }
.mark--ok { background: var(--pass); }
.mark--no { background: #D62B2B; }

/* --------------------------------------------------------------------------
   Certificate — the showpiece
   -------------------------------------------------------------------------- */
.certwrap { display: grid; place-items: center; gap: 1.25rem; }

.cert {
  --edge: #0B1B7A;
  position: relative;
  width: 100%;
  max-width: 940px;
  aspect-ratio: 297 / 210;          /* A4 landscape */
  background: #FCFCFF;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(4, 8, 28, .28);
  overflow: hidden;
  container-type: inline-size;
}

/* Guilloche-ish hexagon security texture */
.cert::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='39' viewBox='0 0 34 39'%3E%3Cpath d='M17 0 34 9.75v19.5L17 39 0 29.25V9.75z' fill='none' stroke='%23002EFF' stroke-opacity='.055' stroke-width='.9'/%3E%3C/svg%3E");
  background-size: 34px 39px;
  pointer-events: none;
}
/* Brand rule down the left edge */
.cert::after {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 12px;
  background: linear-gradient(180deg, var(--brand), var(--edge));
}

.cert__inner {
  position: absolute; inset: 0;
  padding: 5.5cqw 6cqw 4.5cqw 8cqw;
  display: flex; flex-direction: column;
  text-align: center;
}
.cert__frame {
  position: absolute; inset: 3cqw 3cqw 3cqw 5cqw;
  border: 1px solid rgba(0, 46, 255, .18);
  border-radius: 3px;
  pointer-events: none;
}
.cert__frame::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(0, 46, 255, .1);
  border-radius: 2px;
}

.cert__logo { height: 4.4cqw; width: auto; margin: 0 auto .6cqw; }
.cert__issuer { font-size: 1.05cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--slate-400); font-weight: 600; }

.cert__title {
  font-family: var(--font-display);
  font-size: 4.6cqw;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
  margin-top: 2.4cqw;
}
.cert__title em { font-style: normal; color: var(--brand); }

.cert__ack { margin-top: 2.2cqw; font-size: 1.15cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-400); font-weight: 600; }

.cert__name {
  font-family: var(--font-display);
  font-size: 5cqw;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: 1cqw;
}
.cert__rule { width: 34%; height: 2px; margin: 1.4cqw auto; background: linear-gradient(90deg, transparent, var(--brand), transparent); }
.cert__id { font-family: var(--font-mono); font-size: 1.3cqw; color: var(--slate-500); letter-spacing: .06em; }

.cert__for { margin-top: 1.8cqw; font-size: 1.15cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-400); font-weight: 600; }
.cert__course {
  font-family: var(--font-display);
  font-size: 2.5cqw;
  font-weight: 700;
  color: var(--brand);
  margin-top: .7cqw;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.cert__meta { margin-top: .9cqw; font-size: 1.2cqw; color: var(--slate-500); }

.cert__foot {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 3cqw;
}
.cert__sig { text-align: center; }
.cert__sigline { height: 1px; background: var(--slate-400); margin-bottom: .5cqw; }
.cert__siglabel { font-size: .95cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); font-weight: 600; }
.cert__signame { font-size: 1.15cqw; color: var(--ink); font-weight: 600; margin-bottom: .3cqw; }

/* Verification block — the part his current certificate has no equivalent of */
.cert__verify { text-align: center; }
.cert__qr {
  width: 9cqw; height: 9cqw;
  margin: 0 auto .5cqw;
  border: .35cqw solid var(--ink);
  border-radius: 2px;
  padding: .4cqw;
  background: #fff;
}
.cert__qr svg { width: 100%; height: 100%; display: block; }
.cert__serial { font-family: var(--font-mono); font-size: 1.05cqw; font-weight: 600; color: var(--ink); letter-spacing: .05em; }
.cert__verifytext { font-size: .85cqw; color: var(--slate-400); margin-top: .25cqw; }

/* Sits on its own line beneath the signature row. Absolutely positioning this
   in the bottom-left corner collides with the date signature block. */
.cert__accred {
  margin-top: 2.2cqw;
  padding-top: 1.4cqw;
  border-top: 1px solid rgba(0, 46, 255, .12);
  text-align: center;
  font-size: .92cqw;
  color: var(--slate-400);
  line-height: 1.5;
  letter-spacing: .04em;
}
.cert__accred b { color: var(--slate-600); font-weight: 650; }
.cert__accred--pending { opacity: .6; font-style: italic; }

.cert__seal {
  position: absolute;
  top: 6cqw; right: 6cqw;
  width: 11cqw; height: 12cqw;
  clip-path: var(--hex);
  background: linear-gradient(150deg, var(--brand), var(--edge));
  color: #fff;
  display: grid; place-items: center;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 1cqw 2.5cqw rgba(0, 46, 255, .3);
}
.cert__seal span { font-size: .85cqw; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.cert__seal b { display: block; font-family: var(--font-display); font-size: 1.9cqw; font-weight: 800; }

/* --------------------------------------------------------------------------
   Verification page
   -------------------------------------------------------------------------- */
.verify-hero { background: var(--ink); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; color: rgba(255, 255, 255, .7); }
.verify-box { max-width: 620px; margin-inline: auto; }
.verify-box h1 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); text-align: center; }
.verify-box > p { text-align: center; margin-top: .8rem; font-size: var(--t-sm); color: rgba(255, 255, 255, .62); }
.verify-form { display: flex; gap: .6rem; margin-top: 1.75rem; }
.verify-form .input { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

.vresult {
  margin-top: 1.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  display: none;
}
.vresult.is-shown { display: block; }
.vresult__head { padding: 1.35rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.vresult--valid .vresult__head { background: var(--pass-soft); color: #045C34; }
.vresult--expired .vresult__head { background: var(--watch-soft); color: #7A4A00; }
.vresult--invalid .vresult__head { background: #FDECEC; color: #9B1C1C; }
.vresult__head .hex { width: 44px; }
.vresult--valid .vresult__head .hex { background: var(--pass); color: #fff; }
.vresult--expired .vresult__head .hex { background: var(--watch); color: #fff; }
.vresult--invalid .vresult__head .hex { background: #D62B2B; color: #fff; }
.vresult__head .hex svg { width: 19px; height: 19px; }
.vresult__head b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.vresult__head span { font-size: var(--t-xs); opacity: .85; }
.vresult__body { padding: .5rem 1.5rem 1.5rem; }
.vrow { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.vrow:last-child { border-bottom: 0; }
.vrow dt { color: var(--slate-400); font-size: var(--t-xs); }
.vrow dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

/* --------------------------------------------------------------------------
   Admin / client shell
   -------------------------------------------------------------------------- */
.shell-grid { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
@media (max-width: 880px) { .shell-grid { grid-template-columns: 1fr; } }

.side {
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: 1.25rem .85rem;
}
@media (max-width: 880px) {
  .side { border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: .4rem; overflow-x: auto; padding: .75rem; }
}
.side__label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-400); font-weight: 650; padding: .5rem .75rem; }
@media (max-width: 880px) { .side__label { display: none; } }
.side a {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .75rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 550; color: var(--slate-600);
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.side a:hover { background: var(--mist); color: var(--ink); }
.side a.is-active { background: var(--brand-50); color: var(--brand); font-weight: 650; }
.side a svg { width: 16px; height: 16px; flex: none; }

.main { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--mist); }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.15rem 1.25rem; }
.tile b { display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 750; color: var(--ink); letter-spacing: -.035em; line-height: 1; }
/* Direct child only — a bare `.tile span` also matches the nested unit span
   inside <b>, which pushes the "%" onto its own line. */
.tile > span { display: block; margin-top: .45rem; font-size: var(--t-xs); color: var(--slate-500); }
.tile b .unit { display: inline; color: var(--brand); font-size: 1.1rem; }

/* Panels + tables */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.25rem; }
.panel__head { padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel__head h2 { font-size: 1.02rem; }
.panel__head p { font-size: var(--t-xs); color: var(--slate-500); margin-top: .2rem; }
.panel__body { padding: 1.35rem; }
.panel__body--flush { padding: 0; }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl th {
  text-align: left; padding: .7rem 1.35rem;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate-400); font-weight: 650;
  background: var(--paper); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: .85rem 1.35rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color .18s var(--ease); }
.tbl tbody tr:hover { background: var(--paper); }
.tbl .who b { display: block; color: var(--ink); font-weight: 600; }
.tbl .who span { font-size: var(--t-xs); color: var(--slate-400); }
.tbl .mono { font-family: var(--font-mono); font-size: .78rem; color: var(--slate-600); }
.tbl-scroll { overflow-x: auto; }

.pill {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .28rem .65rem; border-radius: 999px;
  font-size: .7rem; font-weight: 650; white-space: nowrap;
}
.pill i { width: 6px; height: 7px; clip-path: var(--hex); background: currentColor; }
.pill--pass    { background: var(--pass-soft); color: #04663A; }
.pill--fail    { background: #FDECEC; color: #9B1C1C; }
.pill--prog    { background: var(--brand-50); color: var(--brand-700); }
.pill--idle    { background: var(--mist); color: var(--slate-500); }
.pill--expired { background: var(--watch-soft); color: #7A4A00; }

/* Question bank editor */
.qbank { display: grid; gap: .6rem; }
.qrow {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); overflow: hidden;
}
.qrow__head { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.1rem; cursor: pointer; }
.qrow__no { font-family: var(--font-mono); font-size: .72rem; color: var(--brand); flex: none; }
.qrow__prompt { flex: 1; font-size: var(--t-sm); color: var(--ink); font-weight: 550; }
.qrow__body { padding: 0 1.1rem 1.1rem 3rem; display: none; }
.qrow.is-open .qrow__body { display: block; }
.qopt {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: var(--t-xs); color: var(--slate-600);
  border: 1px solid transparent;
}
.qopt.is-correct { background: var(--pass-soft); color: #04663A; border-color: #B6E8CE; font-weight: 600; }
.qopt__key { font-family: var(--font-mono); font-size: .68rem; opacity: .7; }

.review-flag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 650; color: #7A4A00;
  background: var(--watch-soft); padding: .22rem .55rem; border-radius: 999px;
  white-space: nowrap;
}

/* Issue-link form */
.issue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .issue-grid { grid-template-columns: 1fr; } }
.issue-grid .span-2 { grid-column: 1 / -1; }

.linkout {
  margin-top: 1.25rem; padding: 1rem 1.15rem;
  border-radius: var(--r-md); border: 1px solid #B6E8CE; background: var(--pass-soft);
  display: none;
}
.linkout.is-shown { display: block; }
.linkout b { font-size: var(--t-xs); color: #045C34; display: block; margin-bottom: .5rem; }
.linkout__url {
  display: flex; gap: .5rem; align-items: center;
  background: #fff; border: 1px solid #B6E8CE; border-radius: var(--r-sm);
  padding: .6rem .8rem; font-family: var(--font-mono); font-size: .74rem;
  color: var(--ink); word-break: break-all;
}

/* Small helpers */
.muted { color: var(--slate-400); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack-sm { display: grid; gap: .5rem; }
.hide { display: none !important; }

@media print {
  .pbar, .demo-flag, .certwrap > *:not(.cert), .no-print { display: none !important; }
  body, .page { background: #fff; }
  .cert { box-shadow: none; max-width: none; }
}