/* ============================================================
   Design tokens — "drafting table" direction:
   deep blueprint navy + vellum paper + brass seal accent.
   Signature element: printer's crop marks on the sheet frame,
   and an engineering title-block strip at the page foot and
   on the certificate itself.
   ============================================================ */
:root{
  --ink:        #10202e;
  --blueprint:  #14406b;
  --blueprint2: #0d2f4f;
  --line:       #6fa8c9;
  --line-dim:   #9fc2d8;
  --paper:      #f6f3ec;
  --paper-dim:  #ece7da;
  --brass:      #b8892b;
  --brass-lt:   #d9ac52;
  --red:        #a5372a;
  --green:      #3f6b4a;

  --display: 'Spectral', Georgia, serif;
  --ui:      'Space Grotesk', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--blueprint);
  background-image:
    linear-gradient(var(--blueprint), var(--blueprint)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 32px);
  color: var(--ink);
  font-family: var(--ui);
  min-height: 100vh;
  padding: 28px 16px 48px;
}

.sheet-frame{
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(16,32,46,0.15);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* crop / registration marks — the signature detail */
.crop{ position:absolute; width:22px; height:22px; pointer-events:none; }
.crop::before, .crop::after{ content:""; position:absolute; background: var(--brass); }
.crop::before{ width:22px; height:2px; top:10px; left:0; }
.crop::after{ width:2px; height:22px; left:10px; top:0; }
.crop.tl{ top:-11px; left:-11px; }
.crop.tr{ top:-11px; right:-11px; }
.crop.bl{ bottom:-11px; left:-11px; }
.crop.br{ bottom:-11px; right:-11px; }

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 22px 28px 14px;
  border-bottom: 1px solid rgba(16,32,46,0.15);
  flex-wrap: wrap;
}
.topbar-left{ display:flex; align-items:baseline; gap:10px; }
.mark{ font-family: var(--mono); font-weight:600; letter-spacing:0.06em; color: var(--blueprint); font-size: 1.05rem; }
.mark-sub{ font-size:0.78rem; color:#5b6b78; letter-spacing:0.02em; }

.steps{ display:flex; gap:6px; flex-wrap: wrap; }
.step-dot{
  font-family: var(--mono); font-size: 0.72rem; letter-spacing:0.03em;
  border:1px solid rgba(16,32,46,0.22); background:transparent; color:#5b6b78;
  padding:6px 10px; cursor:default; opacity:0.55;
}
.step-dot.active{ border-color: var(--blueprint); color: var(--blueprint); background:#fff; opacity:1; }
.step-dot.done{ border-color: var(--green); color: var(--green); opacity:1; }

/* ---------- main / views ---------- */
main{ padding: 32px 28px 8px; }
.view{ animation: fade .35s ease; }
@keyframes fade{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

.eyebrow{ font-family: var(--mono); font-size:0.78rem; color: var(--brass); letter-spacing:0.05em; margin:0 0 10px; }
h1{ font-family: var(--display); font-weight:500; font-size: clamp(2.1rem, 5vw, 3rem); line-height:1.08; margin:0 0 16px; color: var(--ink); }
h1 em{ font-style: italic; color: var(--blueprint); }
.lede{ font-size:1.02rem; line-height:1.55; color:#33424e; max-width: 62ch; margin: 0 0 30px; }
.lede.small{ margin-bottom: 20px; font-size:0.95rem; }

.panel{
  background:#fff; border:1px solid rgba(16,32,46,0.14);
  padding: 22px 24px 26px; max-width: 460px;
}
.panel-head{ display:flex; align-items:baseline; gap:12px; margin-bottom: 14px; flex-wrap:wrap; }
.panel-head.loose{ margin-bottom: 6px; }
.panel-tag{ font-family: var(--mono); font-size:0.72rem; color: var(--brass); border:1px solid var(--brass); padding:2px 6px; }
.panel-title{ font-family: var(--display); font-size:1.3rem; font-weight:500; }
.panel-meta{ margin-left:auto; font-family: var(--mono); font-size:0.78rem; color:#5b6b78; }

.field{ display:block; margin-bottom:16px; }
.field span{ display:block; font-size:0.8rem; color:#5b6b78; margin-bottom:6px; letter-spacing:0.01em; }
.field input{
  width:100%; padding:10px 12px; font-family: var(--ui); font-size:0.96rem;
  border:1px solid rgba(16,32,46,0.28); background: var(--paper);
}
.field input:focus{ outline:2px solid var(--blueprint); outline-offset:1px; }

.fine-print{ font-size:0.78rem; color:#6b7883; line-height:1.5; margin: 6px 0 18px; }
.fine-print code{ font-family: var(--mono); background: var(--paper-dim); padding:1px 5px; }
.fine-print.center{ text-align:center; margin-top: 18px; }

.btn-primary, .btn-secondary, .btn-ghost{
  font-family: var(--ui); font-weight:600; font-size:0.92rem; letter-spacing:0.01em;
  padding:11px 18px; border:none; cursor:pointer; transition: transform .12s ease, opacity .12s ease;
}
.btn-primary{ background: var(--blueprint); color:#fff; }
.btn-primary:hover:not(:disabled){ transform: translateY(-1px); }
.btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-secondary{ background:#fff; color: var(--blueprint); border:1px solid var(--blueprint); }
.btn-secondary:hover{ transform: translateY(-1px); }
.btn-ghost{ background:transparent; color:#5b6b78; border:1px solid rgba(16,32,46,0.2); }
:focus-visible{ outline: 2px solid var(--blueprint); outline-offset: 2px; }

/* ---------- domain accordion ---------- */
.domain-list{ display:flex; flex-direction:column; gap:10px; margin-bottom: 22px; }
.domain{
  border:1px solid rgba(16,32,46,0.16); background:#fff;
}
.domain-head{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 16px; background:none; border:none; cursor:pointer; font-family: var(--ui);
}
.domain-num{ font-family: var(--mono); color: var(--brass); font-size:0.85rem; min-width: 30px; }
.domain-weight{ margin-left:auto; font-family: var(--mono); font-size:0.75rem; color:#5b6b78; }
.domain-title{ font-weight:600; font-size:0.98rem; }
.domain-check{ width:18px; height:18px; border:1.5px solid var(--blueprint); flex:none; display:inline-flex; align-items:center; justify-content:center; }
.domain-check.on{ background: var(--green); border-color: var(--green); }
.domain-check.on::after{ content:"✓"; color:#fff; font-size:0.7rem; }
.domain-body{ padding: 0 16px 18px 58px; font-size:0.92rem; line-height:1.6; color:#33424e; }
.domain-body ul{ margin:8px 0; padding-left:18px; }
.domain-body li{ margin-bottom:6px; }
.domain-mark-btn{ margin-top:8px; font-family: var(--mono); font-size:0.76rem; background:none; border:1px solid var(--blueprint); color: var(--blueprint); padding:6px 10px; cursor:pointer; }
.domain-mark-btn.on{ border-color: var(--green); color: var(--green); }

.advance-row{ display:flex; gap:12px; padding: 14px 0 32px; flex-wrap:wrap; }

/* ---------- quiz ---------- */
.quiz-list{ display:flex; flex-direction:column; gap:18px; }
.qcard{ border:1px solid rgba(16,32,46,0.16); background:#fff; padding:16px 18px; }
.qcard .qnum{ font-family: var(--mono); font-size:0.76rem; color: var(--brass); }
.qcard .qtext{ margin: 6px 0 12px; font-size:0.95rem; line-height:1.5; white-space:pre-line; }
.qopt{ display:flex; align-items:flex-start; gap:8px; padding:6px 0; font-size:0.92rem; cursor:pointer; }
.qopt input{ margin-top:3px; }
.quiz-result{ border:1px solid rgba(16,32,46,0.16); background:#fff; padding:18px 20px; margin-bottom:28px; }
.quiz-result.pass{ border-color: var(--green); }
.quiz-result.fail{ border-color: var(--red); }
.quiz-result h3{ font-family: var(--display); margin:0 0 6px; }
.quiz-result.pass h3{ color: var(--green); }
.quiz-result.fail h3{ color: var(--red); }
.quiz-breakdown{ font-family: var(--mono); font-size:0.8rem; color:#33424e; margin-top:10px; }

/* ---------- certificate ---------- */
.cert-stage{ display:flex; justify-content:center; margin: 6px 0 18px; }
#certCanvas{ width:100%; max-width: 820px; height:auto; border:1px solid rgba(16,32,46,0.2); background:#fff; }
.cert-actions{ justify-content:center; }

/* ---------- title block footer ---------- */
.titleblock{
  display:grid; grid-template-columns: 1fr 1fr 1fr 2fr;
  border-top: 1px solid rgba(16,32,46,0.18);
}
.tb-cell{ padding:10px 14px; border-right:1px solid rgba(16,32,46,0.14); font-size:0.72rem; color:#33424e; }
.tb-cell:last-child{ border-right:none; }
.tb-label{ display:block; font-family: var(--mono); color: var(--brass); font-size:0.65rem; letter-spacing:0.04em; margin-bottom:2px; }

@media (max-width: 640px){
  .titleblock{ grid-template-columns: 1fr 1fr; }
  main{ padding: 24px 18px 8px; }
  .topbar{ padding: 18px 18px 12px; }
}

@media print{
  body{ background:#fff; padding:0; }
  .topbar, .titleblock, .advance-row, .fine-print.center, .steps{ display:none !important; }
  .sheet-frame{ box-shadow:none; border:none; max-width:none; }
  .view:not(#view-certificate){ display:none !important; }
  .cert-stage{ margin:0; }
}