/* =========================================================================
   assets/certificate.css — PHASE 11.2O / 11.2O.1: the free completion certificate panel
   (index.html completion screen + result.html). Collapsed by default so it never
   hides the purchase choices; the preview canvas scales to any width, while the
   exported PNG / PDF are always rendered at full size.
   ========================================================================= */
.cert-section{ max-width:880px; margin:28px auto 30px; }
.cert-card{ background:#1A1233; border:1px solid #2E2150; border-radius:18px; padding:20px 18px; color:#F5F3FF; }
.cert-head{ display:flex; gap:14px; align-items:flex-start; }
.cert-ico{ flex:0 0 auto; width:48px; height:48px; }
.cert-title{ font-size:19px; line-height:1.5; margin:0 0 4px; font-weight:700; }
.cert-text{ margin:0; color:#C4B5FD; font-size:15.5px; line-height:1.8; }
.cert-toggle, .cert-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 18px; border-radius:12px;
  font:inherit; font-size:15.5px; font-weight:700; line-height:1.4; text-align:center; cursor:pointer; color:#F5F3FF;
  background:transparent; border:1.5px solid #A78BFA; }
.cert-toggle{ margin-top:14px; width:100%; }
.cert-toggle:hover, .cert-btn:hover{ background:rgba(124,58,237,.16); }
.cert-btn-primary{ background:#7C3AED; border-color:#7C3AED; color:#fff; }
.cert-btn-primary:hover{ background:#6D2FE0; }
.cert-btn[disabled]{ opacity:.65; cursor:progress; }
/* 11.2O.1: exports wait for a completion date — the buttons stay focusable and explain why */
.cert-btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }
.cert-date-err{ min-height:1.4em; margin:6px 0 0; color:#FFB4B4; font-size:14.5px; line-height:1.6; }
.cert-input[aria-invalid="true"]{ border-color:#FF8A8A; }
.cert-panel{ margin-top:16px; border-top:1px solid #2E2150; padding-top:16px; }
.cert-panel[hidden]{ display:none; }
.cert-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; align-items:start; }
.cert-form{ min-width:0; }
.cert-lbl{ display:block; font-weight:700; font-size:15px; margin:4px 0 6px; }
.cert-input, .cert-textarea{ display:block; width:100%; box-sizing:border-box; min-height:46px; padding:10px 12px; border-radius:10px; border:1.5px solid #3A2C63;
  background:#0F0A1F; color:#F5F3FF; font:inherit; font-size:16px; }
.cert-textarea{ min-height:120px; line-height:1.7; resize:vertical; }
.cert-input:focus, .cert-textarea:focus{ border-color:#A78BFA; }
.cert-input-date{ max-width:240px; color-scheme:dark; }
.cert-hint{ margin:6px 0 10px; color:#AA9ED6; font-size:14px; line-height:1.7; }
.cert-check{ display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-size:15.5px; }
.cert-check input{ width:22px; height:22px; flex:0 0 auto; accent-color:#7C3AED; }
.cert-date{ margin-top:6px; }
.cert-preview{ margin:0; min-width:0; }
.cert-cap{ font-size:14px; color:#AA9ED6; margin-bottom:6px; }
.cert-canvas{ display:block; width:100%; height:auto; border-radius:10px; border:1px solid #2E2150; background:#FBF9F4; }
.cert-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.cert-actions .cert-btn{ flex:1 1 220px; }
.cert-status{ min-height:1.6em; margin:10px 0 0; font-size:14.5px; color:#7ef0ad; }
.cert-status.cert-err{ color:#FFB4B4; }
.cert-share{ margin-top:18px; border-top:1px solid #2E2150; padding-top:16px; }
.cert-h4{ font-size:17px; margin:0 0 8px; }
.cert-subhead{ font-weight:700; font-size:15px; margin:14px 0 4px; }
.cert-how{ margin:0; padding-inline-start:22px; font-size:15px; line-height:1.8; color:#E8E2FF; }
.cert-caution{ margin:10px 0 0; font-size:14px; line-height:1.7; color:#FBE3A0; }
.cert-privacy{ margin:14px 0 0; font-size:13.5px; line-height:1.7; color:#AA9ED6; }
.cert-card :focus-visible{ outline:3px solid #F4C443; outline-offset:2px; }
@media (max-width:720px){
  .cert-grid{ grid-template-columns:minmax(0,1fr); }
  .cert-preview{ order:-1; }
  .cert-card{ padding:18px 14px; }
}