/* BATARI v8.3.9 — collision-proof certificate layout for screen + A4 PDF */
.certificate-print-hint{display:block;color:var(--muted);margin-top:.25rem;font-size:.75rem}
.ai-connection-status{display:flex;justify-content:space-between;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;background:#f8fafc}.ai-connection-status strong,.ai-connection-status span,.ai-connection-status small{display:block}.ai-connection-status span,.ai-connection-status small{color:var(--muted);font-size:.78rem}.ai-connection-status.is-online{background:#ecfdf3;border-color:#abefc6}.ai-connection-status.is-online strong{color:#067647}.ai-connection-status.is-error{background:#fef3f2;border-color:#fecdca}.ai-connection-status.is-error strong{color:#b42318}.ai-action-row{display:flex;gap:.7rem;justify-content:flex-end}.ai-action-row .btn{min-width:210px}
@media(max-width:620px){.ai-connection-status,.ai-action-row{flex-direction:column;align-items:stretch}.ai-action-row .btn{width:100%}}

/* Keep certificate header on one row on normal desktop/tablet previews.
   app.css previously moved .cert-code to a full-width row below 860px, which
   could collide with the title when the page was scaled for print/PDF. */
@media (min-width:621px){
  .certificate-sheet .cert-header{display:grid;grid-template-columns:minmax(56px,76px) minmax(0,1fr) minmax(112px,156px);align-items:center;gap:.75rem}
  .certificate-sheet .cert-logo{grid-column:1;grid-row:1;justify-self:start}
  .certificate-sheet .cert-header>div:first-of-type{grid-column:2;grid-row:1;min-width:0;text-align:center}
  .certificate-sheet .cert-code{grid-column:3!important;grid-row:1!important;align-self:center;justify-self:end;text-align:right!important;min-width:0}
  .certificate-sheet .cert-code b,.certificate-sheet .cert-code small{white-space:normal;overflow-wrap:anywhere}
}

@page{size:A4 landscape;margin:0}
@media print{
  html,body{width:297mm!important;height:210mm!important;min-width:297mm!important;min-height:210mm!important;margin:0!important;padding:0!important;background:#fff!important;overflow:hidden!important}
  body.certificate-body{width:297mm!important;height:210mm!important}
  .public-topbar,.certificate-toolbar,.public-note,.accessibility-fab,.a11y-floating-button,.support-floating-button{display:none!important}
  .certificate-public-wrap{display:block!important;width:297mm!important;height:210mm!important;min-width:297mm!important;min-height:210mm!important;margin:0!important;padding:0!important;overflow:hidden!important}
  .certificate-sheet{display:block!important;width:297mm!important;height:210mm!important;min-width:297mm!important;max-width:297mm!important;min-height:210mm!important;max-height:210mm!important;margin:0!important;padding:5mm!important;box-sizing:border-box!important;overflow:hidden!important;box-shadow:none!important;background-position:center!important;background-size:cover!important;break-inside:avoid!important;page-break-inside:avoid!important;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}
  .cert-border{position:relative!important;display:flex!important;flex-direction:column!important;width:287mm!important;height:200mm!important;min-height:200mm!important;max-height:200mm!important;margin:0!important;padding:4.3mm 7mm!important;box-sizing:border-box!important;overflow:hidden!important;border-width:1.2mm!important;outline-width:.45mm!important;outline-offset:-2.8mm!important}

  /* Explicit grid areas neutralize ALL screen responsive rules during print. */
  .cert-header{display:grid!important;grid-template-columns:23mm minmax(0,1fr) 43mm!important;grid-template-rows:18mm!important;grid-template-areas:"logo school code"!important;align-items:center!important;gap:3mm!important;width:100%!important;height:18mm!important;min-height:18mm!important;max-height:18mm!important;flex:0 0 18mm!important;margin:0!important;padding:0!important;text-align:initial!important;overflow:hidden!important}
  .cert-logo{grid-area:logo!important;grid-column:1!important;grid-row:1!important;justify-self:start!important;align-self:center!important;width:16mm!important;height:16mm!important;max-width:16mm!important;max-height:16mm!important;object-fit:contain!important;margin:0!important}
  .cert-header>div:first-of-type{grid-area:school!important;grid-column:2!important;grid-row:1!important;align-self:center!important;justify-self:stretch!important;text-align:center!important;min-width:0!important;margin:0!important;padding:0 2mm!important;overflow:hidden!important}
  .cert-header>div:first-of-type span,.cert-header>div:first-of-type small{display:block!important;margin:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .cert-header>div:first-of-type span{font-size:8.5pt!important;line-height:1.05!important;font-weight:900!important}
  .cert-header>div:first-of-type small{font-size:5.8pt!important;line-height:1.1!important}
  .cert-code{grid-area:code!important;grid-column:3!important;grid-row:1!important;align-self:center!important;justify-self:end!important;width:43mm!important;max-width:43mm!important;margin:0!important;padding:0!important;text-align:right!important;overflow:hidden!important}
  .cert-code b,.cert-code small{display:block!important;margin:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .cert-code b{font-size:6.6pt!important;line-height:1!important}
  .cert-code small{font-size:5.4pt!important;line-height:1.08!important;margin-top:.7mm!important}

  /* Reserve independent vertical zones so the title can never enter header. */
  .cert-title{display:block!important;position:relative!important;flex:0 0 15.5mm!important;min-height:15.5mm!important;max-height:15.5mm!important;margin:1.2mm 0 1mm!important;padding:0!important;text-align:center!important;overflow:hidden!important;clear:both!important}
  .cert-title p{display:block!important;margin:0 0 .5mm!important;padding:0!important;font-size:6.2pt!important;line-height:1!important;letter-spacing:.20em!important;white-space:nowrap!important}
  .cert-title h1{display:block!important;margin:0!important;padding:0 3mm!important;font-size:19.5pt!important;line-height:1.02!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .cert-title-long .cert-title h1,.cert-title.cert-title-long h1{font-size:16.5pt!important}
  .cert-title h2{display:block!important;margin:.6mm 0 0!important;padding:0 3mm!important;font-size:7.1pt!important;line-height:1.08!important;font-weight:500!important;white-space:normal!important;overflow-wrap:anywhere!important}

  .cert-recipient{display:block!important;position:relative!important;flex:0 0 auto!important;margin:0!important;padding:0!important;font-size:7.2pt!important;line-height:1.18!important;text-align:center!important;overflow:visible!important}
  .cert-recipient>p{display:block!important;margin:.6mm 0!important;padding:0 2mm!important;line-height:1.18!important}
  .cert-person-row{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:3mm!important;margin:.7mm 0!important;min-height:6mm!important}
  .cert-person-row>div{min-width:0!important}
  .cert-person-row h3{display:block!important;margin:0!important;padding:0 3mm .8mm!important;font-size:14.5pt!important;line-height:1.02!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .cert-name-long .cert-person-row h3{font-size:12.5pt!important}
  .cert-person-row span{display:block!important;font-size:6.2pt!important;line-height:1.05!important}
  .cert-photo{width:17mm!important;height:20mm!important;flex:0 0 auto!important}
  .cert-evaluation-tags{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;margin:.6mm 0!important;gap:1.5mm!important}.cert-evaluation-tags span{padding:.4mm 1.8mm!important;font-size:5.6pt!important;line-height:1!important}

  .cert-mastery-row{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important;flex:0 0 5.5mm!important;min-height:5.5mm!important;max-height:5.5mm!important;margin:.5mm 0!important;gap:2mm!important;overflow:hidden!important}.cert-mastery-row .mastery-pill{padding:.55mm 2.3mm!important;font-size:6pt!important;line-height:1!important}.cert-ai-note{font-size:5.4pt!important;line-height:1!important;white-space:nowrap!important}
  .cert-scores{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;flex:0 0 14mm!important;min-height:14mm!important;max-height:14mm!important;width:190mm!important;margin:.8mm auto!important;gap:2mm!important}.cert-scores div{display:flex!important;flex-direction:column!important;justify-content:center!important;padding:1mm!important;border-radius:2mm!important;min-width:0!important}.cert-scores span{font-size:5.8pt!important;line-height:1!important}.cert-scores strong{font-size:11.5pt!important;line-height:1.05!important}
  .cert-feedback{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;flex:0 0 27mm!important;min-height:27mm!important;max-height:27mm!important;margin:.8mm 0!important;gap:3mm!important;overflow:hidden!important}.cert-feedback>div{height:27mm!important;min-height:27mm!important;max-height:27mm!important;padding:1.8mm 2.2mm!important;box-sizing:border-box!important;overflow:hidden!important}.cert-feedback h4{margin:0 0 .7mm!important;font-size:6.8pt!important;line-height:1.05!important}.cert-feedback p{display:block!important;margin:0!important;max-height:none!important;-webkit-line-clamp:unset!important;overflow:hidden!important;font-size:6.2pt!important;line-height:1.16!important;word-break:normal!important;overflow-wrap:anywhere!important}.cert-copy-medium .cert-feedback p{font-size:5.85pt!important;line-height:1.12!important}.cert-copy-long .cert-feedback p{font-size:5.4pt!important;line-height:1.08!important}.cert-copy-xlong .cert-feedback p{font-size:4.9pt!important;line-height:1.04!important}

  .cert-signatures{position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr) 27mm minmax(0,1fr)!important;grid-template-rows:29mm!important;align-items:end!important;flex:0 0 29mm!important;min-height:29mm!important;max-height:29mm!important;width:100%!important;margin-top:auto!important;margin-bottom:0!important;gap:3mm!important;text-align:center!important;overflow:hidden!important}.cert-signatures>div{min-width:0!important;overflow:hidden!important}.signature-img{height:11.5mm!important;min-height:11.5mm!important;max-height:11.5mm!important}.signature-img img{width:auto!important;max-width:45mm!important;height:11.5mm!important;max-height:11.5mm!important;object-fit:contain!important}.principal-signature-stack{position:relative!important}.principal-stamp{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;opacity:.65!important;max-width:20mm!important}.cert-signatures b{display:block!important;font-size:7pt!important;line-height:1.05!important;white-space:normal!important;overflow-wrap:anywhere!important}.cert-signatures span{display:block!important;font-size:5.8pt!important;line-height:1.05!important}.cert-qr{align-self:end!important;justify-self:center!important;margin:0 auto!important}.cert-qr,.cert-qr img,.cert-qr canvas{width:24mm!important;height:24mm!important;max-width:24mm!important;max-height:24mm!important}
  .cert-footer{position:static!important;display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;flex:0 0 4mm!important;min-height:4mm!important;max-height:4mm!important;width:100%!important;margin:.7mm 0 0!important;padding:.7mm 0 0!important;font-size:5.1pt!important;line-height:1!important;overflow:hidden!important;text-align:left!important}.cert-footer span{display:block!important;max-width:49%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cert-footer span:last-child{text-align:right!important}
}