/* NPMC app pages (TOT, MMed, Admin): loads after styles.css.
   Forms and lists sit directly on the page and are grouped by rules and spacing, not boxed in cards. */
.tot-hero{background:var(--cyber-teal);color:var(--on-dark);padding-block:64px 72px}
.tot-hero h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;color:var(--on-dark);max-width:20ch}
.tot-hero p{color:var(--on-dark-soft);max-width:64ch;margin-top:18px}
.tot-hero p strong{color:var(--acid-mint);font-weight:700}

/* Tabs: underline strip that scrolls sideways when it runs out of room */
.tabs{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule-strong);margin:0 0 48px}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:9px;padding:22px 0 18px;border:0;background:none;color:var(--ink-mute);font:500 .9375rem var(--font-ui);cursor:pointer;white-space:nowrap;min-height:60px;transition:color .2s}
.tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--quantum-blue);transform:scaleY(0);transform-origin:bottom;transition:transform .25s var(--ease)}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink)}
.tab.is-active::after{transform:scaleY(1)}
.panel{display:none;padding-bottom:96px}
.panel.is-active{display:block}
.panel__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:72px;align-items:start}
.panel__grid>aside{border-left:1px solid var(--rule-strong);padding-left:40px}

/* Blocks & forms */
.card{margin-bottom:56px}
.card h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;margin-bottom:12px}
.card h3{font-size:1.125rem;margin-bottom:14px}
.info{margin-bottom:40px}
.form__note{font-size:.9375rem;color:var(--ink-mute);margin-bottom:28px;max-width:62ch}
.req{color:var(--raspberry)}
.opt{font-weight:400;color:var(--ink-mute);font-size:.8125rem}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;flex:1}
.field[hidden]{display:none}
.field label{font:500 .875rem var(--font-ui);color:var(--ink)}
.field input,.field select,.field textarea{font:500 1rem var(--font-body);padding:11px 14px;border:1.5px solid var(--field-border);border-radius:12px;background:transparent;color:var(--ink);min-height:50px;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A231D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.field textarea{resize:vertical;min-height:88px;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--forest)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--quantum-blue);box-shadow:0 0 0 4px rgba(49,85,245,.16)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--raspberry);box-shadow:0 0 0 4px rgba(177,45,90,.14)}
.field input[type="file"]{padding:10px 12px;font-size:.9rem}
.field-row{display:flex;gap:16px}
.field-row--find{align-items:flex-end}
.field-row--find .btn{margin-bottom:18px;flex-shrink:0}
.form__error{background:var(--raspberry);color:var(--pale-sky);padding:12px 16px;border-radius:12px;font:500 .9375rem var(--font-ui);margin-bottom:18px}
.steps{list-style:none;counter-reset:step;display:grid;gap:14px;font-size:.9375rem;color:var(--ink-soft)}
.steps li{counter-increment:step;position:relative;padding-left:34px}
.steps li::before{content:counter(step);position:absolute;left:0;top:-1px;font:600 1.25rem/1.25 var(--font-display);color:var(--raspberry)}
.steps strong{color:var(--ink)}
.muted{color:var(--ink-mute);font-size:.9375rem}
.success{margin-top:28px;display:flex;gap:18px;align-items:flex-start;background:var(--acid-mint);color:var(--forest);border-radius:var(--radius);padding:20px 22px}
.success[hidden]{display:none}
.success svg{flex-shrink:0}
.success h3{margin-bottom:4px}

/* Returning-user sign-in: the one filled block on the page */
details.login{background:var(--aqua-foam);color:var(--cyber-teal);border-radius:var(--radius-lg);padding:20px 24px}
details.login summary{cursor:pointer;font:700 1rem var(--font-ui);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:32px}
details.login summary::-webkit-details-marker{display:none}
details.login summary span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:underline;text-underline-offset:.22em}
details.login summary span::after{content:'';width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123039' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s var(--ease)}
details.login[open] summary{margin-bottom:18px}
details.login[open] summary span::after{transform:rotate(180deg)}
details.login .field{margin-bottom:14px}
details.login .field label{color:var(--cyber-teal)}
details.login .field input{border-color:rgba(18,48,57,.55)}
details.login .field input::placeholder{color:rgba(18,48,57,.7)}
.login__who{font:700 .9375rem/1.4 var(--font-ui);color:var(--cyber-teal);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(18,48,57,.25)}
.login__who[hidden]{display:none}
.login__hint{font-size:.875rem;line-height:1.5;color:var(--cyber-teal);margin:-4px 0 16px}
.login__demo{font-size:.9375rem;line-height:1.5;color:var(--cyber-teal);margin-bottom:16px}
.login__demo span{display:block;margin-top:10px;padding:12px 14px;border:1.5px dashed var(--cyber-teal);border-radius:12px}
.login__demo strong{font:600 1.375rem/1 var(--font-display);letter-spacing:.14em;white-space:nowrap}
.login__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.login__link{background:none;border:0;padding:8px 0;min-height:36px;cursor:pointer;font:700 .875rem var(--font-ui);color:var(--cyber-teal);text-decoration:underline;text-underline-offset:.22em}
.login__link[hidden]{display:none}
.login__link:focus-visible{outline:2px solid var(--quantum-blue);outline-offset:3px;border-radius:4px}
.form__ok{font:700 .875rem var(--font-ui);color:var(--cyber-teal);margin-top:14px}
.form__ok[hidden]{display:none}
.pf__note{margin-top:18px;max-width:60ch}

/* ── Dashboard ── */
.panel__grid--even{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.card.dash__head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--cyber-teal);color:var(--on-dark);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:48px}
.dash__id{display:flex;align-items:center;gap:18px;min-width:0}
.dash__avatar{width:60px;height:60px;border-radius:50%;background:var(--acid-mint);color:var(--forest);display:grid;place-items:center;font:600 1.6rem var(--font-display);flex-shrink:0}
.dash__head h2{color:var(--on-dark);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05;margin:0}
.dash__head .muted{color:var(--on-dark-soft);margin-top:4px}
.dash__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash__head .btn--ghost{border-color:rgba(226,245,253,.55);color:var(--on-dark)}
.dash__head .btn--ghost:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--cyber-teal)}
.dash__subhead{margin-top:36px}

/* Stepper: a segmented progress rule */
.stepper{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0 18px;padding:0}
.step{display:flex;flex-direction:column;gap:6px;padding:20px 16px 0 0;border-top:4px solid var(--rule)}
.step.is-done{border-top-color:var(--forest)}
.step.is-active{border-top-color:var(--quantum-blue)}
.step__dot{font:600 1.75rem/1 var(--font-display);color:var(--ink-mute);height:30px;display:flex;align-items:center}
.step.is-done .step__dot{font-size:0;width:30px;border-radius:50%;background:var(--acid-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A231D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/16px no-repeat}
.step.is-active .step__dot{color:var(--quantum-blue)}
.step strong{font:700 1rem var(--font-ui);color:var(--ink)}
.step.is-active strong{color:var(--quantum-blue)}
.step__sub{font-size:.8125rem;color:var(--ink-mute)}

/* Record rows */
.rec{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--rule)}
.rec__body{flex:1;min-width:200px}
.rec__body strong{display:block;font:700 .9875rem var(--font-ui);color:var(--ink)}
.rec__body span{display:block;font-size:.875rem;color:var(--ink-mute)}
.rec .btn{padding:7px 16px;min-height:40px;font-size:.8125rem}


/* ── Certificate ── */
.cert-overlay{position:fixed;inset:0;z-index:300;background:rgba(18,48,57,.86);overflow:auto;padding:24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.cert-overlay[hidden]{display:none}
.cert-toolbar{display:flex;gap:12px}
.cert-toolbar .btn--primary{background:var(--acid-mint);color:var(--forest)}
.cert-toolbar .btn--ghost{border-color:var(--ice-glass);color:var(--ice-glass)}
.cert-toolbar .btn--ghost:hover{background:var(--ice-glass);color:var(--cyber-teal)}
.cert{width:min(1123px,100%);aspect-ratio:297/210;container-type:inline-size;background:var(--ice-glass);box-shadow:0 30px 80px -20px rgba(18,48,57,.9);flex-shrink:0}
/* Every size inside is in em of this font-size (16px on a full A4 sheet), so the sheet scales as one piece.
   cert-border.jpg is the abstract artwork on the left edge (generated, stretched to the sheet); text starts clear of it. */
.cert__sheet{height:100%;font-size:1.4248cqw;line-height:1.4;color:var(--forest);background:url("../assets/cert-border.jpg") center/100% 100% no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cert__main{height:100%;padding:3.8em 5.2em 2.9em 38.5%;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.cert__head{display:flex;align-items:center;gap:1.6em;width:100%}
.cert__head img{display:block;mix-blend-mode:multiply;min-width:0}
.cert__npmc{height:3.5em;width:auto;flex-shrink:0}
.cert__unis{flex:1;width:0;height:auto}
.cert__kind{font:700 .72em var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--quantum-blue);margin-top:3em}
.cert__intro{margin-top:1.5em;color:var(--ink-soft)}
.cert__name{font:600 2.45em/1.06 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin-top:.14em;text-wrap:balance}
.cert__ic{font:500 .8em var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:.6em}
.cert__body{margin-top:1.5em;color:var(--ink-soft)}
.cert__role{font:600 2.9em/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--raspberry);margin-top:.08em}
.cert__of{font:700 1em var(--font-ui);margin-top:.5em}
.cert__course{margin-top:1.3em;color:var(--ink-soft)}
.cert__course strong{font-weight:700;color:var(--forest)}
.cert__venue{font-size:.8em;color:var(--ink-mute);max-width:42em}
.cert__dates{margin-top:auto;display:flex}
.cert__dates div{padding-right:2.4em}
.cert__dates div+div{padding-left:2.4em;border-left:1px solid var(--rule)}
.cert__dates dt{font:500 .64em var(--font-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.cert__dates dd{font:600 1.35em/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.03em;margin-top:.1em;overflow-wrap:anywhere}
.cert__state{display:inline-block;vertical-align:middle;border:1.5px solid var(--raspberry);color:var(--raspberry);padding:.2em .7em;border-radius:99em;font:700 .5em var(--font-ui);letter-spacing:.18em}
.cert__state[hidden]{display:none}
.cert__sigs{margin-top:auto;padding-top:2.6em;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6em}
.cert__sig{border-top:1.5px solid var(--forest);padding-top:.5em;display:flex;flex-direction:column;gap:.15em}
.cert__sig strong{font:700 .66em/1.3 var(--font-ui);text-transform:uppercase;letter-spacing:.02em}
.cert__sig em{font-style:normal;font-size:.64em;line-height:1.35;color:var(--ink-mute)}
.cert__verify{margin-top:1em;font-size:.72em;font-style:italic;color:var(--ink-soft)}

/* Print: certificate only, A4 landscape */
@media print{
  @page{size:A4 landscape;margin:0}
  body>*{display:none!important}
  main#main{display:block!important}
  main#main>*{display:none!important}
  .cert-overlay{display:flex!important;position:static;background:none;padding:0}
  .cert-toolbar{display:none!important}
  .cert{width:297mm;height:210mm;aspect-ratio:auto;box-shadow:none}
}

@media (max-width:900px){
  .panel__grid,.panel__grid--even{grid-template-columns:minmax(0,1fr);gap:48px}
  .panel__grid>aside{border-left:0;padding-left:0;border-top:1px solid var(--rule-strong);padding-top:40px}
  .step__sub{display:none}
  .step{padding-right:8px}
  .step strong{font-size:.8125rem;line-height:1.25}
  .card.dash__head{align-items:flex-start;padding:24px}
  .field-row{flex-direction:column;gap:0}
  .field-row--find{flex-direction:row;align-items:flex-end}
  .tabs{gap:22px}
}
#pwForm[hidden],#pwEmailNote[hidden]{display:none}
#lsReq[hidden],#lsAsk[hidden],#loginOk[hidden]{display:none}
.reg-dup{background:var(--aqua-foam);color:var(--cyber-teal);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;font-size:.9375rem}
.reg-dup[hidden]{display:none}
.reg-dup strong{display:block;font:700 1rem var(--font-ui);margin-bottom:6px}
.reg-dup .admin-btnrow,.reg-dup__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}