/* Ransomware recovery — recovery-clock visual system. Scoped to .rr- classes. */

.rr-clock-panel{padding:6vh 8vw 10vh;box-shadow:none}
.rr-clock-grid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:4rem;align-items:center;margin-top:2.5rem}

/* --- dial --- */
.rr-dial-wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.rr-dial{width:100%;max-width:320px;height:auto;overflow:visible}
.rr-dial-track{fill:none;stroke:var(--sheet-rule);stroke-width:2}
.rr-ticks line{stroke:var(--sheet-rule);stroke-width:2}
.rr-arc{fill:none;stroke-width:6;stroke-linecap:round;transform-origin:150px 150px;stroke-dasharray:209 545;stroke-dashoffset:209;transition:stroke-dashoffset 1.1s cubic-bezier(.16,.8,.3,1)}
.rr-arc-1{stroke:var(--accent);opacity:1;transform:rotate(-90deg)}
.rr-arc-2{stroke:var(--accent);opacity:.65;transform:rotate(30deg)}
.rr-arc-3{stroke:var(--accent);opacity:.35;transform:rotate(150deg)}
.rr-clock-panel.rr-in-view .rr-arc-1{stroke-dashoffset:0;transition-delay:.05s}
.rr-clock-panel.rr-in-view .rr-arc-2{stroke-dashoffset:0;transition-delay:.35s}
.rr-clock-panel.rr-in-view .rr-arc-3{stroke-dashoffset:0;transition-delay:.65s}
.rr-dial-center{font-family:'Source Serif 4',serif;font-size:1.6rem;fill:var(--dark)}
.rr-dial-center-sub{font-family:'IBM Plex Mono',monospace;font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;fill:var(--mid)}
.rr-dial-legend{display:flex;gap:1.6rem;font-size:.7rem;letter-spacing:.08em;color:var(--mid)}
.rr-dial-legend div{display:flex;align-items:center;gap:.5rem}
.rr-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block}
.rr-dot-2{opacity:.65}
.rr-dot-3{opacity:.35}

/* --- copy beside dial --- */
.rr-clock-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.25;margin-bottom:1.4rem}
.rr-clock-copy p{font-size:1rem;line-height:1.85;color:var(--mid);max-width:560px}
.rr-clock-copy p+p{margin-top:1.1rem}
.rr-dial-caption{font-size:.8rem;letter-spacing:.02em;border-left:2px solid var(--sheet-rule);padding-left:1rem}

/* --- phase list --- */
.rr-phases-panel h2{margin:1rem 0 1.2rem}
.rr-phases{list-style:none;margin-top:3rem;border-top:1px solid var(--sheet-rule)}
.rr-phase{position:relative;display:grid;grid-template-columns:auto minmax(220px,1fr) 2fr;gap:1.2rem 3rem;align-items:baseline;padding:2rem .5rem;border-bottom:1px solid var(--sheet-rule);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rr-phase.rr-in-view{opacity:1;transform:translateY(0)}
.rr-phases li:nth-child(1).rr-in-view{transition-delay:.02s}
.rr-phases li:nth-child(2).rr-in-view{transition-delay:.1s}
.rr-phases li:nth-child(3).rr-in-view{transition-delay:.18s}
.rr-phases li:nth-child(4).rr-in-view{transition-delay:.26s}
.rr-phases li:nth-child(5).rr-in-view{transition-delay:.34s}
.rr-phases li:nth-child(6).rr-in-view{transition-delay:.42s}
.rr-phase-index{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.25em;color:var(--accent)}
.rr-phase h3{font-family:'Source Serif 4',serif;font-weight:400;font-size:1.3rem}
.rr-phase p{font-size:.95rem;line-height:1.8;color:var(--mid)}

@media(max-width:900px){
  .rr-clock-grid{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .rr-dial-wrap{margin:0 auto}
  .rr-clock-copy p{margin-left:auto;margin-right:auto}
  .rr-dial-caption{border-left:0;border-top:2px solid var(--sheet-rule);padding-left:0;padding-top:.8rem;text-align:left}
  .rr-phase{grid-template-columns:1fr;gap:.6rem;padding:1.6rem .2rem;text-align:left}
}

@media(max-width:480px){
  .rr-clock-panel{padding:4vh 6vw 6vh}
  .rr-dial{max-width:230px}
  .rr-dial-center{font-size:1.3rem}
  .rr-dial-legend{gap:1rem;font-size:.62rem;flex-wrap:wrap;justify-content:center}
  .rr-phases{margin-top:2rem}
}

@media(prefers-reduced-motion:reduce){
  .rr-arc{transition:none}
  .rr-phase{transition:none;opacity:1;transform:none}
}