/* assets/css/modal.css
   Confirmation dialogs.

   Split canvas, matching the auth pages. The left panel is not decoration: these
   dialogs appear at security moments - rotating a signing key, deleting a site -
   and the falling hex is the material the decision is actually about. Real keys
   are hex; the rain is hex; the connection is literal rather than thematic.

   The animation stops entirely under prefers-reduced-motion and falls back to a
   static field. Nobody should have to endure a moving background to confirm a
   destructive action. */

.cb-modal-overlay{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(5,7,11,.72);
  backdrop-filter:blur(3px);
  animation:cbFade .16s ease;
}
.cb-modal-overlay.open{display:flex;}
@keyframes cbFade{from{opacity:0}to{opacity:1}}

.cb-modal{
  width:100%;max-width:640px;
  background:var(--surface-raised);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:grid;grid-template-columns:1fr;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);
  animation:cbRise .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes cbRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ---- left: the rain ---- */
.cb-modal-canvas{
  display:none;position:relative;
  background:#000;
  min-height:250px;
  overflow:hidden;
}
.cb-modal-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cb-modal-canvas .cb-glyph{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px;
  background:linear-gradient(to top,rgba(0,0,0,.92),transparent);
  font-family:var(--font-mono);font-size:10.5px;
  color:#3ADC97;letter-spacing:.06em;text-transform:uppercase;
  z-index:2;
}
.cb-modal-canvas .cb-glyph span{display:block;color:rgba(58,220,151,.55);margin-top:4px;text-transform:none;letter-spacing:0;}

/* ---- right: the decision ---- */
.cb-modal-body{padding:26px 24px;display:flex;flex-direction:column;}
.cb-modal-eyebrow{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
}
.cb-modal-title{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  letter-spacing:-.01em;margin-bottom:10px;line-height:1.25;
}
.cb-modal-text{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;}
.cb-modal-text strong{color:var(--text-primary);font-weight:600;}

.cb-modal-points{
  border:1px solid var(--hairline-soft);border-radius:var(--radius-md);
  padding:2px 0;margin-bottom:18px;
}
.cb-modal-point{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 13px;font-size:12.5px;line-height:1.5;color:var(--text-secondary);
  border-bottom:1px solid var(--hairline-soft);
}
.cb-modal-point:last-child{border-bottom:none;}
.cb-modal-point svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;}
.cb-modal-point.warn svg{color:var(--coral);}
.cb-modal-point.ok svg{color:var(--teal);}
.cb-modal-point.info svg{color:var(--text-muted);}

.cb-modal-actions{display:flex;gap:9px;margin-top:auto;flex-wrap:wrap;}
.cb-modal-actions button{flex:1;min-width:130px;justify-content:center;}

@media (min-width:620px){
  .cb-modal{grid-template-columns:230px 1fr;}
  .cb-modal-canvas{display:block;}
}

@media (prefers-reduced-motion:reduce){
  .cb-modal,.cb-modal-overlay{animation:none;}
}