/* ================= ORGANIZATION TRANSITION — SCREENS 13 & 14 =================
   `.a-scrim`/`.a-modal` are the shared dialog chrome (alt-shell.css); this file adds only this
   dialog's size, layout, impact grid and typed-confirm control.
   OWNER: "This confirmation must be impossible to confuse with the harmless join flow — make
   that true visually as well as textually." Only `.a-org-transition-destructive` gets the red
   header, title and danger button; benign and leave-and-join both wear the plain modal head
   every other Suite dialog does — leave-and-join destroys nothing, so it earns the same
   treatment benign gets. Only what it SAYS differs, never how it looks. */

.alt-app .a-modal.a-org-transition-modal{
  width:min(520px, 92vw);
  height:auto;
  max-height:88vh;
  padding:0;
  overflow:hidden;
}

.alt-app .a-org-transition-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--a-3);
  padding:var(--a-4) var(--a-4) var(--a-3);
  border-bottom:1px solid var(--a-line);
}
.alt-app .a-org-transition-head h3{
  margin:0;
  font:700 17px/1.35 var(--a-display);
  color:var(--a-text);
}

/* The destructive variant's own header treatment — a top rule and tinted background, so the
   dialog reads as dangerous before the eye reaches the typed-confirm box. */
.alt-app .a-org-transition-modal.a-org-transition-destructive{
  border-top:3px solid var(--a-red);
}
.alt-app .a-org-transition-destructive .a-org-transition-head{
  background:var(--a-red-soft);
}
.alt-app .a-org-transition-destructive .a-org-transition-head h3{
  color:var(--a-red);
}

.alt-app .a-org-transition-body{
  padding:var(--a-4);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:var(--a-3);
  font-size:13px;
  line-height:1.55;
  color:var(--a-text);
}
.alt-app .a-org-transition-body p{ margin:0; }
.alt-app .a-org-transition-body code{
  font-family:var(--a-mono, monospace);
  background:var(--a-raised);
  border:1px solid var(--a-line);
  border-radius:4px;
  padding:1px 6px;
  color:var(--a-text);
  word-break:break-word;
}

.alt-app .a-org-transition-note{
  font-size:12px;
  color:var(--a-dim);
}

/* The kept note stays calm, never the delete grid's red. OWNER: "delete versus the rest is the
   real split" — this block IS the rest, so it gets the same quiet card look
   `.a-org-transition-cell` uses when nothing is destroyed, so it doesn't visually compete with
   the sixteen categories that are. */
.alt-app .a-org-transition-preserve{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:var(--a-3);
  border:1px solid var(--a-line);
  border-radius:var(--a-r);
  background:var(--a-raised);
}
.alt-app .a-org-transition-preserve p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--a-dim);
}

.alt-app .a-org-transition-loading{
  padding:var(--a-4) 0;
  color:var(--a-dim);
  font-size:13px;
}
.alt-app .a-org-transition-error{
  color:var(--a-red);
  font-size:13px;
  line-height:1.5;
}

/* ---------- the impact grid — WHATEVER CATEGORIES THE PREVIEW RETURNED, laid out identically ---------- */
.alt-app .a-org-transition-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  gap:var(--a-2);
}
.alt-app .a-org-transition-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:var(--a-3) var(--a-2);
  border:1px solid var(--a-line);
  border-radius:var(--a-r);
  background:var(--a-raised);
  text-align:center;
}
.alt-app .a-org-transition-cell b{
  font:700 20px/1 var(--a-display);
  color:var(--a-text);
}
.alt-app .a-org-transition-cell span{
  font-size:11px;
  color:var(--a-dim);
}
.alt-app .a-org-transition-destructive .a-org-transition-cell{
  border-color:var(--a-red);
  background:var(--a-red-soft);
}
.alt-app .a-org-transition-destructive .a-org-transition-cell b{ color:var(--a-red); }

/* ---------- the typed confirmation ---------- */
.alt-app .a-org-transition-confirm{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:2px;
}
.alt-app .a-org-transition-confirm label{
  font-size:12px;
  font-weight:600;
  color:var(--a-text);
}
.alt-app .a-org-transition-confirm .a-input{ width:100%; }

.alt-app .a-org-transition-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--a-2);
  padding:var(--a-3) var(--a-4);
  border-top:1px solid var(--a-line);
  background:var(--a-raised);
}

@media (max-width: 480px){
  .alt-app .a-org-transition-actions{ flex-direction:column-reverse; align-items:stretch; }
  .alt-app .a-org-transition-actions .a-btn{ width:100%; }
}