/* The Email Incident Response page: the parts of its live demo that the
   training demo does not have (the report queue and an incident), and its
   own sections. The window, sidebar, cards, chips and tour are product.css. */

/* ---- queue ---------------------------------------------------------------- */
.rp-q{display:flex;flex-direction:column}
.rp-inc{display:grid;grid-template-columns:118px minmax(0,1fr) 92px 96px;align-items:center;gap:14px;width:100%;
  padding:13px 14px;border:none;border-top:1px solid var(--dm-line);background:none;text-align:left;cursor:pointer;
  transition:background var(--d-fast)}
.rp-inc:first-child{border-top:none}
.rp-inc:hover{background:rgba(255,255,255,.035)}
.rp-inc.rp-new{animation:dmFlash 2.2s ease-out}
.rp-inc-m{min-width:0}
.rp-inc-m b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-inc-m span{display:block;font-size:11.5px;color:var(--dm-dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-rep{font-size:12px;color:var(--dm-mut);display:flex;align-items:center;gap:6px;white-space:nowrap}
.rp-when{font-size:12px;color:var(--dm-dim);text-align:right;white-space:nowrap}
.rp-closed{opacity:.55}
.rp-head{display:grid;grid-template-columns:118px minmax(0,1fr) 92px 96px;gap:14px;padding:0 14px 10px;
  font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dm-dim)}
.rp-head span:last-child{text-align:right}
@media(max-width:700px){
  .rp-inc,.rp-head{grid-template-columns:minmax(0,1fr) auto}
  .rp-inc .rp-rep,.rp-head span:nth-child(3){display:none}
  .rp-inc .rp-v{grid-column:1/-1;order:-1}
  .rp-head span:first-child{display:none}
}
.rp-tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.rp-tabs button{border:1px solid var(--dm-line);background:none;color:var(--dm-mut);height:30px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.rp-tabs button[aria-pressed="true"]{background:var(--dm-card2);color:var(--dm-text)}

/* the moment between a report arriving and its verdict */
.rp-spin{display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;
  color:var(--dm-cyan);border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.06);white-space:nowrap}
.rp-spin i{width:10px;height:10px;border-radius:50%;border:2px solid rgba(34,211,238,.3);border-top-color:var(--dm-cyan);animation:rpSpin .8s linear infinite}
@keyframes rpSpin{to{transform:rotate(360deg)}}

/* ---- an incident ---------------------------------------------------------- */
.rp-back{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--dm-mut);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;margin-bottom:14px}
.rp-back:hover{color:var(--dm-text)}
.rp-det{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media(max-width:960px){.rp-det{grid-template-columns:minmax(0,1fr)}}
.rp-hdrs{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px 10px;font-size:12px;margin:12px 0 14px}
.rp-hdrs dt{color:var(--dm-dim)}
.rp-hdrs dd{margin:0;overflow-wrap:anywhere}
.rp-link{color:#0067b8;text-decoration:underline;cursor:default}
.rp-url{display:inline-block;margin-top:4px;font-size:11.5px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:5px;padding:1px 6px;overflow-wrap:anywhere}
.rp-verdict{border-radius:14px;padding:16px 18px;border:1px solid var(--vc);background:color-mix(in srgb,var(--vc) 7%,var(--dm-card))}
.rp-verdict+.dm-card{margin-top:14px}
.rp-verdict small{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--dm-mut)}
.rp-verdict b{display:block;font-family:'Sora',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--vc);margin-top:4px}
.rp-verdict p{font-size:12.5px;color:var(--dm-mut);line-height:1.6;margin-top:6px}
.rp-ind{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.rp-ind div{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--dm-text)}
.rp-ind svg{flex-shrink:0;margin-top:2px}
.rp-who{display:flex;align-items:center}
.rp-who .dm-ava{width:26px;height:26px;font-size:10px;border-radius:50%;border:2px solid var(--dm-card);margin-left:-6px}
.rp-who .dm-ava:first-child{margin-left:0}
.rp-who span{font-size:12px;color:var(--dm-mut);margin-left:8px}
.rp-cls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.rp-cls button{height:36px;border-radius:9px;border:1px solid var(--dm-line);background:#151925;color:var(--dm-text);font-size:12.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:border-color var(--d-fast),background var(--d-fast)}
.rp-cls button i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.rp-cls button:hover{border-color:var(--c)}
.rp-cls button[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#151925)}
.rp-acts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rp-acts .dm-btn{justify-content:center;height:38px}
.rp-done{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:11px;background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.35);font-size:12.5px;color:var(--dm-text);line-height:1.55;animation:dmIn .35s var(--ease-out) both}
.rp-done svg{flex-shrink:0;color:var(--dm-green);margin-top:2px}
.rp-tl{display:flex;flex-direction:column;gap:0;margin-top:2px}
.rp-tl div{position:relative;padding:0 0 12px 18px;font-size:12px;color:var(--dm-mut)}
.rp-tl div::before{content:'';position:absolute;left:3px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--dm-blue)}
.rp-tl div::after{content:'';position:absolute;left:6px;top:14px;bottom:0;width:1px;background:var(--dm-line)}
.rp-tl div:last-child::after{display:none}
.rp-tl b{color:var(--dm-text);font-weight:600}

/* ---- the page's own sections --------------------------------------------- */
.rp-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;max-width:var(--maxw);margin:0 auto}
@media(max-width:860px){.rp-sides{grid-template-columns:minmax(0,1fr)}}
.rp-side{border:1px solid var(--border);border-radius:18px;padding:2rem;background:var(--card)}
.rp-side .prod-ico{margin-bottom:1rem}
.rp-side h3{font-size:1.35rem;font-weight:600;letter-spacing:-.4px}
.rp-side p{color:var(--text2);font-size:.95rem;line-height:1.7;margin-top:.6rem}
.rp-side ul{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.55rem}
.rp-side li{position:relative;padding-left:1.5rem;font-size:.92rem}
.rp-side li::before{content:'';position:absolute;left:2px;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--prod-bg);box-shadow:inset 0 0 0 2.5px var(--prod-c)}
.rp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;max-width:var(--maxw);margin:0 auto;counter-reset:rp}
@media(max-width:860px){.rp-steps{grid-template-columns:minmax(0,1fr)}}
.rp-step{padding:1.6rem;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.rp-step::before{counter-increment:rp;content:'0' counter(rp);display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:1px;color:var(--red);margin-bottom:.8rem}
.rp-step h3{font-size:1.08rem;font-weight:600;letter-spacing:-.3px}
.rp-step p{color:var(--text2);font-size:.9rem;line-height:1.65;margin-top:.5rem}
@media(prefers-reduced-motion:reduce){.rp-spin i{animation:none}.rp-inc.rp-new,.rp-done{animation:none}}