/* App-specific styles layered on top of the shared brand.css */

.appbar{background:var(--charcoal);color:#fff;display:flex;align-items:center;gap:16px;
  padding:11px 22px;flex-wrap:wrap;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.brandlink{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--head);
  text-transform:uppercase;letter-spacing:1px;font-size:19px;text-decoration:none}
.brandlink::before{content:"";width:36px;height:30px;background:url(/logo.png) center/contain no-repeat;flex:0 0 auto}
.brandlink b{color:var(--orange)}
.brandlink:hover{text-decoration:none}
.appnav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px;flex-wrap:wrap}
.appnav a{color:#e9e9e9;font-weight:600;text-decoration:none}
.appnav a:hover{color:var(--yellow)}
.appnav .who{color:var(--yellow);font-weight:700}
.appnav .logout{border:1px solid rgba(255,255,255,.35);padding:5px 11px;border-radius:7px}
.app-main{padding-top:24px;min-height:60vh}

/* auth pages */
.authwrap{max-width:430px;margin:6vh auto}
.authcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:30px 28px}
.authcard .eyebrow{font-family:var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--orange-deep);font-weight:600;font-size:13px}
.authcard h1{font-size:38px;margin:.1em 0}
.authcard h1 .o{color:var(--orange)}
.authcard .sub{color:var(--muted);margin-top:0}
.authform{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.authform label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px;color:var(--charcoal)}
.authform input{padding:11px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:16px;font-family:var(--body)}
.authform input:focus{outline:none;border-color:var(--orange)}
.authform .btn{margin-top:4px;text-align:center;cursor:pointer}
.hint{font-size:13px;color:var(--muted);margin-top:16px;text-align:center}

/* progress bar */
.progresshead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.progresshead strong{font-family:var(--head);font-size:24px;color:var(--charcoal)}
.progresshead span{color:var(--muted);font-size:14px}
.pbar{height:14px;background:#eee;border-radius:99px;overflow:hidden}
.pbar>span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .4s}
.pbar--sm{height:8px;min-width:90px}
.pn{font-size:12px;color:var(--muted)}

/* exam + dashboard cards */
.examcard{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.trackh{font-size:16px;text-transform:uppercase;letter-spacing:.5px;margin:18px 0 6px;padding-left:10px;border-left:4px solid var(--orange)}
.trackh--a{border-color:#2f7d6b}.trackh--b{border-color:#3a6ea5}.trackh--c{border-color:var(--orange)}

.unitlist .status{margin-left:auto;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.unitlist .status.done{color:var(--ok)}
.signrow{display:flex;align-items:center;gap:14px;width:100%}
.signrow .t{flex:1}

/* forms */
.createform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.createform label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px;color:var(--charcoal)}
.createform input,.createform select{padding:10px 11px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;font-family:var(--body)}
.createform button{grid-column:1/-1;justify-self:start;cursor:pointer}
@media(max-width:560px){.createform{grid-template-columns:1fr}}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline input,.inline select{padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;font-family:var(--body)}
.inline .btn{cursor:pointer}
.checkrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px}
.checkrow input{width:20px;height:20px;accent-color:var(--orange)}

/* exam taking */
.qcard{padding:16px 18px}
.qnum{font-family:var(--head);font-weight:700;color:var(--orange-deep);letter-spacing:.5px}
.qunit{background:var(--charcoal);color:#fff;font-size:11px;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle}
.qtext{font-size:16px;font-weight:600;margin:.4em 0 .8em}
.opt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;margin:6px 0;cursor:pointer}
.opt:hover{border-color:var(--orange);background:#fff8f1}
.opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange)}
.examfooter{position:sticky;bottom:0;background:var(--paper-2);padding:14px 0;display:flex;align-items:center;gap:16px;border-top:2px solid var(--orange)}
.examfooter .btn{cursor:pointer}
.answered{font-weight:700;color:var(--charcoal)}

/* certificate */
.certwrap{max-width:900px;margin:0 auto}
.cert{position:relative;background:#fff;border:3px solid var(--orange);border-radius:6px;
  padding:46px 50px 38px;text-align:center;box-shadow:var(--shadow)}
.cert::after{content:"";position:absolute;inset:10px;border:1px solid var(--yellow);border-radius:3px;pointer-events:none}
.cert-logo{width:120px;height:100px;margin:0 auto 6px;background:url(/logo.png) center/contain no-repeat}
.cert-eyebrow{font-family:var(--head);letter-spacing:3px;text-transform:uppercase;color:var(--orange-deep);font-weight:600;font-size:14px}
.cert-title{font-size:48px;margin:.1em 0;color:var(--charcoal)}
.cert-sub{font-family:var(--head);text-transform:uppercase;letter-spacing:4px;color:var(--orange);font-size:15px;margin-bottom:18px}
.cert-line{color:var(--muted);margin:14px 0 4px}
.cert-name{font-family:var(--head);font-size:38px;color:var(--charcoal);border-bottom:2px solid var(--line);display:inline-block;padding:0 30px 6px;margin-bottom:14px}
.cert-body{max-width:60ch;margin:0 auto;color:#333}
.cert-sigs{display:flex;justify-content:center;gap:40px;margin:34px 0 6px;flex-wrap:wrap}
.cert-sigs div{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.cert-sigs .line{display:block;width:160px;border-bottom:1.5px solid #aaa;margin-bottom:6px;height:24px}
.cert-no{margin-top:18px;font-size:12px;color:var(--muted);letter-spacing:1px}

@media print{ .appbar,.foot,.noprint{display:none!important} .app-main{padding:0} .cert{border-width:6px} @page{size:A4 landscape;margin:12mm} }

/* ===== Locked-down exam ===== */
/* Stop text selection / copying across the whole exam form. */
.noselect,.noselect *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
.noselect input{user-select:none}

/* Sticky status bar: timer, answered count, strikes. */
.exambar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  background:var(--charcoal);color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.exambar__time{font-family:var(--head);font-size:30px;font-weight:700;letter-spacing:1px;min-width:96px;
  background:#000;color:var(--yellow);border-radius:8px;padding:2px 12px;text-align:center}
.exambar__time--low{color:#fff;background:#c0392b;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.exambar__mid{flex:1;text-align:center}
.exambar__mid .answered{color:#fff}
.exambar__strikes{font-weight:700;font-size:14px;background:rgba(255,255,255,.12);padding:6px 12px;border-radius:8px;white-space:nowrap}
.exambar__strikes[data-n="1"]{background:#b9770e}
.exambar__strikes[data-n="2"]{background:#c0392b}

/* Full-screen overlays (pre-exam gate + strike warnings). */
.exam-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,20,20,.92);backdrop-filter:blur(3px)}
.exam-overlay[hidden]{display:none}  /* class display:flex would otherwise beat the hidden attribute */
.exam-overlay__box{background:#fff;border-radius:16px;box-shadow:var(--shadow);max-width:560px;width:100%;
  padding:30px 30px 26px;text-align:center}
.exam-overlay__box h2{font-size:30px;margin:.1em 0 .4em}
.exam-overlay__box .btn{cursor:pointer;margin-top:8px}
.exam-overlay--warn{background:rgba(120,20,20,.93)}
.exam-overlay--warn .exam-overlay__box{border:3px solid #c0392b}
.warn-ic{font-size:46px;line-height:1}
.preexam-rules{list-style:none;padding:0;margin:14px 0;text-align:left;display:inline-block}
.preexam-rules li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.preexam-note{color:var(--muted);font-size:14px;margin:10px 0 16px}

/* Result integrity note. */
.integrity{margin-top:16px;border:1.5px solid var(--line);border-radius:10px;padding:12px 16px;font-size:14px}
.integrity h4{margin:.1em 0 .4em}
.integrity--flag{border-color:#c0392b;background:#fdf3f2}
.integrity--ok{border-color:var(--ok)}

/* ===== Course Library index ===== */
.liblist{list-style:none;padding:0;margin:0 0 22px}
.librow{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1.5px solid var(--line);border-radius:10px;
  margin:8px 0;text-decoration:none;color:var(--charcoal);background:#fff;transition:border-color .15s,box-shadow .15s}
.librow:hover{border-color:var(--orange);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.librow .libcode{flex:0 0 auto;min-width:46px;text-align:center;color:#fff;font-family:var(--head);font-weight:700;
  font-size:13px;padding:4px 9px;border-radius:6px;background:var(--charcoal);letter-spacing:.5px}
.librow .libcode--a{background:#2f7d6b}.librow .libcode--b{background:#3a6ea5}.librow .libcode--c{background:var(--orange)}
.librow .t{flex:1;font-weight:600}
.librow .status{font-size:13px;font-weight:700;color:var(--ok);white-space:nowrap}
.trainer-tag{font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}