/* =====================================================================
   GlobalSecora Skill Development Portal — Academy
   Courses, timed syllabus, quizzes, exam and certificates.
   Loads after app.css and only uses variables defined there, so it
   follows the light/dark toggle for free.
   ===================================================================== */

/* ---------------- shared bits ---------------- */
.grad{
  background:linear-gradient(120deg,var(--acc),var(--acc2) 60%,#ff5c7a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.small{font-size:.84rem}
.good{color:var(--ok)}
.inline{display:inline-block;margin:0}
.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none}
.pill-ok{color:var(--ok);border-color:rgba(47,217,138,.3);background:rgba(47,217,138,.09)}
.bar.big{display:block;width:100%;height:8px}

/* ---------------- portal band (home page) ---------------- */
.portal-band{
  margin:2.5rem 0 1rem;
  padding:2.2rem 2rem 2.4rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(900px 340px at 12% -10%,rgba(124,92,255,.16),transparent 65%),
    radial-gradient(760px 300px at 88% 0%,rgba(77,163,255,.13),transparent 60%),
    var(--bg2);
}
.portal-band-head{max-width:46rem}
.portal-band-head h2{font-size:1.9rem;margin:.2rem 0 .5rem}

.band-label{
  display:block;
  margin:1.8rem 0 .7rem;
  font:700 .7rem/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--txt3);
}
.band-label::after{
  content:"";display:block;height:1px;background:var(--line);margin-top:.55rem
}
.band-label-ent{color:#a98fff}

.portal-search{margin-top:1.4rem;max-width:44rem}
.portal-search .input{flex:1 1 18rem}

.portal-enter{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding:1.3rem 1.5rem;
  border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(120deg,rgba(77,163,255,.1),rgba(124,92,255,.08));
  color:inherit;text-decoration:none;
}
.portal-enter:hover{border-color:var(--acc);text-decoration:none}
.portal-enter h3{margin:.15rem 0 .2rem;font-size:1.3rem}
.portal-enter p{margin:0;font-size:.9rem}
.portal-go{flex:0 0 auto;font-weight:700;color:var(--acc);white-space:nowrap}

.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:.9rem}
.portal-card{
  position:relative;display:flex;flex-direction:column;gap:.3rem;
  padding:1.05rem 1.1rem;border-radius:13px;
  border:1px solid var(--line);border-left:3px solid var(--c,var(--acc));
  background:var(--panel);color:inherit;text-decoration:none;overflow:hidden;
}
a.portal-card:hover{border-color:var(--c,var(--acc));border-left-color:var(--c,var(--acc));text-decoration:none;transform:translateY(-2px)}
.portal-card h3{margin:.15rem 0 .1rem;font-size:1.02rem;line-height:1.3}
.portal-card .credential{margin:0}
.portal-card .small{margin:.1rem 0 0;line-height:1.5}
.portal-card .btn{margin-top:.8rem;align-self:flex-start}
.portal-card.is-ent{border-left-color:#7c5cff}

@media (max-width:640px){
  .portal-band{padding:1.6rem 1.1rem 1.8rem}
  .portal-enter{flex-direction:column;align-items:flex-start;gap:.7rem}
  .portal-band-head h2{font-size:1.5rem}
}

/* ---------------- portal hero ---------------- */
.portal-hero{padding:2.6rem 0 1.2rem;max-width:52rem}
.portal-hero h1{font-size:2.5rem;font-weight:800;margin:0}
.portal-hero .hero-lead{font-size:1.05rem;margin:.6rem 0 .8rem}
.portal-hero .hero-cta{margin-top:1.2rem}

/* ---------------- course cards ---------------- */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.1rem}
.course-card{
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.3rem;
  color:var(--txt);transition:border-color .18s,transform .18s,box-shadow .18s;
}
.course-card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--c,var(--acc));opacity:.85;
}
.course-card:hover{
  text-decoration:none;border-color:var(--c,var(--acc));transform:translateY(-3px);
  box-shadow:0 22px 46px -24px var(--c,var(--acc));
}
.course-card h3{margin:.1rem 0 0;font-size:1.14rem}
.course-card .btn{margin-top:auto}
.course-top{display:flex;gap:.4rem;flex-wrap:wrap}
.lvl{
  display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(77,163,255,.12);border:1px solid rgba(77,163,255,.3);color:var(--acc);
}
.lvl-ent{background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.35);color:#a98fff}
.credential{
  margin:.1rem 0 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--warn);text-transform:uppercase;
}
.credential.big{font-size:.95rem;margin:.2rem 0}
.course-tag{margin:0;font-size:.9rem;flex:1}
.course-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .5rem;
  margin:.4rem 0 0;padding:0;font-size:.76rem;color:var(--txt3);
}
.course-meta li{
  padding:.16rem .5rem;border-radius:6px;background:var(--panel2);
  border:1px solid var(--line);white-space:nowrap;
}
.course-prog{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}
.course-prog .bar{width:100%}
.course-prog span{font-size:.78rem}

.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{
  counter-increment:s;position:relative;padding-left:2.4rem;margin-bottom:.9rem;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.05rem;
  width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;
  font:700 .78rem/1 var(--mono);
  background:rgba(77,163,255,.14);border:1px solid rgba(77,163,255,.35);color:var(--acc);
}

/* ---------------- course detail ---------------- */
.course-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-left:3px solid var(--c,var(--acc));
  border-radius:var(--radius);padding:1.8rem 1.9rem;margin-bottom:1.4rem;
}
.course-hero::after{
  content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,var(--c,var(--acc)),transparent 65%);opacity:.13;pointer-events:none;
}
.course-hero h1{font-size:2.1rem;margin:.35rem 0}
.course-hero .course-meta{margin:.9rem 0 0}
.course-hero .hero-cta{margin-top:1.2rem;position:relative}
.course-hero .back{display:inline-block;margin-bottom:.9rem;font-size:.85rem;color:var(--txt3)}
.course-prog.wide{margin-top:1.2rem;position:relative}
.course-prog.wide span{margin-top:.4rem}

/* ---------------- syllabus ---------------- */
.syllabus{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.mod{
  display:flex;gap:1rem;align-items:center;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:12px;padding:.9rem 1.05rem;
  transition:border-color .18s;
}
.mod:hover{border-color:var(--line2)}
.mod-passed{border-color:rgba(47,217,138,.3)}
.mod-locked{opacity:.6}
.mod-locked:hover{opacity:1}
.mod-no{
  flex:0 0 2.2rem;height:2.2rem;border-radius:10px;display:grid;place-items:center;
  font:700 .9rem/1 var(--mono);
  background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);
}
.mod-passed .mod-no{background:rgba(47,217,138,.14);border-color:rgba(47,217,138,.4);color:var(--ok)}
.mod-reading .mod-no{background:rgba(255,182,72,.14);border-color:rgba(255,182,72,.4);color:var(--warn)}
.mod-ready .mod-no{background:rgba(77,163,255,.14);border-color:rgba(77,163,255,.4);color:var(--acc)}
.mod-main{flex:1;min-width:0}
.mod-main h3{margin:0;font-size:1rem}
.mod-main p{margin:.15rem 0 0;font-size:.87rem}
.mod-meta{display:flex;gap:.75rem;flex-wrap:wrap;margin:.4rem 0 0;font-size:.75rem;color:var(--txt3)}
.mod-act{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}

/* ---------------- exam gate card ---------------- */
.exam-card{border-left:3px solid var(--line2)}
.exam-card.exam-open{border-left-color:var(--acc);background:linear-gradient(180deg,rgba(77,163,255,.08),var(--bg2))}
.exam-card.exam-locked{opacity:.9}
.exam-card p:last-of-type{margin-bottom:.9rem}

/* ---------------- lesson ---------------- */
.lesson{
  max-width:56rem;margin-inline:auto;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-top:3px solid var(--c,var(--acc));
  border-radius:var(--radius);padding:1.7rem 1.9rem;
}
.lesson .back{display:inline-block;margin-bottom:1rem;font-size:.85rem;color:var(--txt3)}
.lesson-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.3rem}
.lesson-head h1{font-size:1.8rem;margin:.2rem 0}
.lesson-head p{margin:.2rem 0 0}
.lesson-body{max-width:none}
.lesson-foot{
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line);
}
.lesson-foot p{margin:0}

/* study timer */
.timer{
  display:flex;gap:1.2rem;align-items:center;
  background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  padding:1rem 1.15rem;margin-bottom:1.4rem;
}
.timer-ring{position:relative;width:80px;height:80px;flex:0 0 80px}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke:var(--line2);stroke-width:6}
.timer-ring circle#ringArc{stroke:var(--warn);stroke-linecap:round;transition:stroke-dashoffset .4s linear}
.timer-ring span{
  position:absolute;inset:0;display:grid;place-items:center;
  font:700 .95rem/1 var(--mono);color:var(--txt);
}
.timer-txt strong{display:block;margin-bottom:.15rem}
.timer-txt p{margin:0;font-size:.87rem}

/* ---------------- quiz / exam ---------------- */
.quiz{
  max-width:52rem;margin-inline:auto;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-top:3px solid var(--c,var(--acc));
  border-radius:var(--radius);padding:1.7rem 1.9rem;
}
.quiz .back{display:inline-block;margin-bottom:1rem;font-size:.85rem;color:var(--txt3)}
.quiz h1{font-size:1.7rem}
.quiz-form{margin-top:1.4rem}
.q{
  border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin:0 0 1rem;
  background:rgba(0,0,0,.14);
}
.q legend{
  display:flex;gap:.6rem;align-items:flex-start;
  font-weight:600;font-size:.96rem;padding:0 .3rem;max-width:100%;
}
.q-no{
  flex:0 0 1.5rem;height:1.5rem;border-radius:7px;display:grid;place-items:center;
  font:700 .74rem/1 var(--mono);background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);
}
.opt{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.55rem .7rem;border-radius:9px;cursor:pointer;
  border:1px solid transparent;transition:background .14s,border-color .14s;
}
.opt:hover{background:rgba(77,163,255,.07);border-color:rgba(77,163,255,.25)}
.opt input{margin:.25rem 0 0;accent-color:var(--acc);flex:0 0 auto}
.opt.opt-right{background:rgba(47,217,138,.12);border-color:rgba(47,217,138,.42)}
.opt.opt-wrong{background:rgba(255,92,122,.12);border-color:rgba(255,92,122,.42)}
.opt input:disabled{cursor:default}
.explain{
  margin:.7rem 0 0;padding:.6rem .75rem;border-radius:8px;font-size:.85rem;
  background:var(--panel2);border-left:3px solid var(--acc);color:var(--txt2);
}

.scorecard{
  display:flex;gap:1.2rem;align-items:center;
  border:1px solid var(--line2);border-radius:12px;padding:1rem 1.2rem;margin-top:1.3rem;
}
.scorecard.pass{background:rgba(47,217,138,.09);border-color:rgba(47,217,138,.4)}
.scorecard.fail{background:rgba(255,92,122,.08);border-color:rgba(255,92,122,.35)}
.scorecard .score{text-align:center;flex:0 0 5.5rem}
.scorecard .score strong{display:block;font:800 1.9rem/1 var(--mono)}
.scorecard.pass .score strong{color:var(--ok)}
.scorecard.fail .score strong{color:var(--bad)}
.scorecard .score span{font-size:.72rem;color:var(--txt3)}

.exam-bar{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  position:sticky;top:70px;z-index:10;
  background:rgba(17,24,40,.92);backdrop-filter:blur(10px);
  border:1px solid var(--line2);border-radius:11px;padding:.6rem .9rem;margin-bottom:1.3rem;
}
.exam-clock{font:700 1.25rem/1 var(--mono);color:var(--warn)}
.abandon{margin-top:1.2rem;text-align:right}

.cert-banner{
  display:flex;gap:1.1rem;align-items:center;
  background:linear-gradient(120deg,rgba(47,217,138,.14),rgba(77,163,255,.1));
  border:1px solid rgba(47,217,138,.42);border-radius:13px;
  padding:1.2rem 1.4rem;margin-top:1.3rem;
}
.cert-banner h2{margin:0;font-size:1.2rem;color:var(--ok)}
.cert-banner p{margin:.2rem 0 0;font-size:.9rem}
.cert-seal{
  flex:0 0 3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  font-size:1.4rem;background:rgba(47,217,138,.18);border:2px solid rgba(47,217,138,.55);color:var(--ok);
}
.serial-line{font-size:.86rem;margin-top:.5rem !important}
.serial-line code{font-size:.92em}

/* ---------------- certificates ---------------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.cert-mini{
  display:flex;flex-direction:column;gap:.25rem;position:relative;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.15rem;color:var(--txt);
  transition:border-color .18s,transform .18s;
}
.cert-mini:hover{text-decoration:none;border-color:var(--acc);transform:translateY(-2px)}
.cert-mini.dead{opacity:.55}
.cert-mini .seal{
  position:absolute;top:.85rem;right:.95rem;
  width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;background:rgba(47,217,138,.16);border:1px solid rgba(47,217,138,.45);color:var(--ok);
}
.cert-mini.dead .seal{background:rgba(255,92,122,.14);border-color:rgba(255,92,122,.4);color:var(--bad)}
.mini-title{font-weight:700;padding-right:2rem;line-height:1.3}
.mini-cred{font-family:var(--mono);font-size:.74rem;color:var(--warn);text-transform:uppercase}
.mini-meta{margin-top:.35rem;font-size:.74rem;color:var(--txt3)}

/* The card is a <div> now, not the link itself: the link is the document and the
   buttons below it are a separate job, and nesting two links inside one link is
   invalid markup that browsers resolve by dropping one of them. */
.cert-mini-open{display:flex;flex-direction:column;gap:.25rem;color:var(--txt)}
.cert-mini-open:hover{text-decoration:none}
.cert-mini-actions{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line);
}
.cert-mini-actions .btn{flex:1 1 auto;text-align:center}

/* A certificate the student has earned but which has not been approved yet.

   Shown above the earned ones and styled as progress rather than as a document,
   because it is not one.  The tone matters: this has to read as "on its way"
   rather than as a problem, and it must not look like something the student has
   lost. */
.cert-waiting{
  background:linear-gradient(180deg,rgba(255,193,84,.09),transparent 70%),var(--panel);
  border:1px solid rgba(255,193,84,.32);
  border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1.4rem;
}
.cert-waiting .section-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}
.cert-wait-list{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.cert-wait-list li{
  display:flex;align-items:center;gap:.75rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:.65rem .8rem;
}
.cert-wait-list .cert-wait-body{display:flex;flex-direction:column;flex:1;min-width:0}
.cert-wait-list .cert-wait-body strong{
  font-size:.94rem;line-height:1.35;overflow-wrap:anywhere;
}
.cert-wait-list .small{display:block;margin-top:.1rem}
.cert-wait-list code{flex:none;font-size:.74rem;color:var(--txt3)}
.cert-wait-mark{
  flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;background:rgba(255,193,84,.16);border:1px solid rgba(255,193,84,.4);color:var(--warn);
}

/* A declined request.  Collapsed by default, but never hidden - the student did
   the work, and a decision they cannot see is worse than one they can argue with. */
.cert-declined{margin:0 0 1.4rem;border-color:rgba(255,92,122,.28)}
.cert-declined summary{font-weight:600}
.cert-declined .cert-wait-mark{
  background:rgba(255,92,122,.14);border-color:rgba(255,92,122,.4);color:var(--bad);
}

/* The certificate document itself carries no styles from this file.

It is generated by certificate_markup() and styled by a stylesheet built from
the operator's saved design, because most of what a certificate looks like is
data - four palettes, three type stacks, three border treatments - and no
static file can carry that without one of the variants being wrong.  Those rules
are scoped under .certdoc-stage and are emitted per certificate.

What is left here is the chrome around it on this page.
.cert-page-head{text-align:center;margin-bottom:.4rem}
.cert-page-head h1{margin:0 0 .2rem}
.cert-page-head p{margin:0}

/* A revoked credential is still shown in full, desaturated.  Hiding it would
   make somebody holding one think it no longer exists, and the reason it was
   withdrawn is on the document itself. */
.certdoc-dead .certificate-container{filter:grayscale(.72)}

/* The verification link at the foot of the page. */
#certVerifyNote{word-break:break-all}

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  .lesson,.quiz{padding:1.3rem 1.1rem}
  .mod{flex-wrap:wrap}
  .mod-act{width:100%;justify-content:flex-start}
  .timer{flex-direction:column;text-align:center}
  .cert-foot{gap:1.2rem}
}
@media (max-width:560px){
  .portal-hero h1{font-size:1.9rem}
  .cert-in{padding:2.2rem 1.2rem 2rem}
  .cert-name{font-size:1.7rem;padding:0 .5rem .3rem}
  .cert-title{font-size:1.15rem}
  .exam-bar{position:static}
}

/* ===================================================================== *
   Admin: course editor
   ===================================================================== */

.pill-tabs{
  display:flex;gap:.35rem;flex-wrap:wrap;list-style:none;
  margin:0 0 1.2rem;padding:0 0 .6rem;border-bottom:1px solid var(--line);
}
.pill-tabs a{
  display:inline-block;padding:.4rem .8rem;border-radius:999px;
  font-size:.85rem;font-weight:600;color:var(--txt2);
  border:1px solid var(--line);background:var(--panel);
}
.pill-tabs a:hover{border-color:var(--line2);color:var(--txt)}
.pill-tabs a.active{background:var(--acc);border-color:var(--acc);color:#06101f}

/* one collapsible block per syllabus module */
.mod-editor{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  margin-bottom:.7rem;overflow:hidden;
}
.mod-editor[open]{border-color:var(--line2)}
.mod-editor > summary{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.8rem 1rem;cursor:pointer;list-style:none;
}
.mod-editor > summary::-webkit-details-marker{display:none}
.mod-editor > summary::before{
  content:'▸';color:var(--txt3);font-size:.85rem;transition:transform .18s;
}
.mod-editor[open] > summary::before{transform:rotate(90deg)}
.mod-editor > summary:hover{background:var(--panel2)}
.mod-editor > summary strong{flex:1;min-width:12rem}

/* one card per question */
.q-editor{margin-bottom:.8rem}
.q-editor-new{border-style:dashed;background:transparent}
.q-editor .grid-2{margin-bottom:.9rem}

/* answer option row: letter + correct radio + text field */
.opt-edit{
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem .5rem;border:1px solid var(--line);border-radius:9px;
  background:var(--bg2);margin-bottom:.35rem;
}
.opt-edit:hover{border-color:var(--line2)}
.opt-edit > span{
  flex:0 0 1.5rem;text-align:center;font:700 .74rem/1 var(--mono);color:var(--txt3);
}
.opt-edit input[type=radio]{flex:0 0 auto;margin:0}
.opt-edit > input[type=text],
.opt-edit > input:not([type]){flex:1;min-width:0}
.opt-edit input:last-child{
  flex:1;min-width:0;background:transparent;border:0;color:var(--txt);
  font-size:.87rem;padding:.25rem .2rem;
}
.opt-edit input:last-child:focus{outline:none;border-bottom:1px solid var(--acc)}

/* ---------------- print ---------------- */
@media print{
  .cert{
    box-shadow:none;border-radius:0;max-width:none;page-break-inside:avoid;
  }
  .cert-foot{margin-top:1.6rem}
  body.academy .main{padding:0}
}