/* =========================================================
   Shahrukh Roadmap — scoped styles (shk-rm- prefix)
   ========================================================= */
.shk-rm{
  --shk-rm-brand:#2547d0;
  --shk-rm-brand-soft:#e9edfc;
  --shk-rm-green:#0ea56d;
  --shk-rm-check-bg:#e7f7f0;
  --shk-rm-ink:#0f1533;
  --shk-rm-body:#5b6478;
  --shk-rm-topic:#3a4256;
  --shk-rm-card:#ffffff;
  --shk-rm-line:#e6e9f2;
  font-family:inherit;box-sizing:border-box;max-width:900px;margin:0 auto;
}
.shk-rm *{box-sizing:border-box;}

/* ---- Stats box ---- */
.shk-rm-stats{
  display:inline-flex;align-items:center;gap:26px;background:var(--shk-rm-card);
  border:1px solid var(--shk-rm-line);border-radius:18px;padding:22px 30px;
  box-shadow:0 8px 30px rgba(15,21,51,.06);margin:0 auto 20px;
}
.shk-rm-stat{display:flex;flex-direction:column;align-items:center;gap:3px;}
.shk-rm-stat-ic{font-size:17px;color:var(--shk-rm-brand);opacity:.7;margin-bottom:2px;}
.shk-rm-stat-ic svg{width:1em;height:1em;fill:currentColor;}
.shk-rm-stat-num{font-size:26px;font-weight:800;color:var(--shk-rm-ink);line-height:1;white-space:nowrap;}
.shk-rm-stat-lbl{font-size:12px;color:var(--shk-rm-body);}
.shk-rm-div{width:1px;height:44px;background:var(--shk-rm-line);flex:0 0 1px;}

/* center the inline stats box */
.shk-rm{text-align:center;}
.shk-rm-list,.shk-rm-tags{text-align:left;}

/* ---- Tags ---- */
.shk-rm-tags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px;}
.shk-rm-tags span{font-size:13px;font-weight:600;color:var(--shk-rm-body);background:var(--shk-rm-card);border:1px solid var(--shk-rm-line);padding:7px 15px;border-radius:999px;}

/* ---- Accordion (identical to the HTML roadmap page) ---- */
.shk-rm-list{display:flex;flex-direction:column;gap:14px;}
.shk-rm-phase{background:var(--shk-rm-card);border:1px solid var(--shk-rm-line);border-radius:16px;overflow:hidden;transition:border-color .25s,box-shadow .25s;}
.shk-rm-phase.open{border-color:var(--shk-rm-brand);box-shadow:0 8px 28px rgba(37,71,208,.08);}
.shk-rm-head{
  width:100%;background:none !important;border:0 !important;cursor:pointer;font-family:inherit;text-align:left;
  display:flex;align-items:center;gap:16px;padding:20px 22px;margin:0;
  -webkit-appearance:none;appearance:none;box-shadow:none !important;color:inherit !important;
}
/* Override the theme's button:hover/:focus (background, border, color) so the row never shifts */
.shk-rm-head:hover,.shk-rm-head:focus,.shk-rm-head:active,.shk-rm-head:focus-visible{
  background:none !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;outline:none !important;
  transform:none !important;color:inherit !important;
}
/* stop theme from underlining the title/text on hover */
.shk-rm-head,.shk-rm-head *{text-decoration:none !important;}
.shk-rm-head:hover *,.shk-rm-head:focus *{text-decoration:none !important;}
.shk-rm-badge{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--shk-rm-brand-soft);color:var(--shk-rm-brand);
  display:flex;align-items:center;justify-content:center;
}
.shk-rm-badge svg{width:22px;height:22px;}
.shk-rm-badge-num{position:absolute;font-size:11px;font-weight:800;background:var(--shk-rm-brand);color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transform:translate(16px,-14px);}
.shk-rm-titles{flex:1;min-width:0;}
.shk-rm-name{font-size:17px;font-weight:800;color:var(--shk-rm-ink);line-height:1.25;display:block;text-decoration:none;border:0;box-shadow:none;margin:0;padding:0;background:none;}
.shk-rm-name::after,.shk-rm-name::before{display:none;}
.shk-rm-head:hover .shk-rm-name,.shk-rm-head:focus .shk-rm-name{text-decoration:none;color:var(--shk-rm-ink);}
.shk-rm-meta{font-size:13px;color:var(--shk-rm-brand);font-weight:700;margin:3px 0 0;display:block;text-decoration:none;}
.shk-rm-toggle{flex:0 0 22px;width:22px;height:22px;position:relative;transition:transform .3s ease;}
.shk-rm-toggle::before,.shk-rm-toggle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--shk-rm-brand);border-radius:2px;}
.shk-rm-toggle::before{width:13px;height:2px;}
.shk-rm-toggle::after{width:2px;height:13px;transition:transform .3s ease;}
.shk-rm-phase.open .shk-rm-toggle::after{transform:translate(-50%,-50%) scaleY(0);}

.shk-rm-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;}
.shk-rm-phase.open .shk-rm-body{grid-template-rows:1fr;}
.shk-rm-body-in{overflow:hidden;}
.shk-rm-content{padding:4px 22px 22px;}
.shk-rm-sub{font-size:13px;font-weight:700;color:var(--shk-rm-brand);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px;}
.shk-rm-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px 20px;}
.shk-rm-topics li{font-size:14px;color:var(--shk-rm-topic);display:flex;align-items:flex-start;gap:9px;line-height:1.4;}
.shk-rm-tic{flex:0 0 17px;width:17px;height:17px;margin-top:1px;}
.shk-rm-tic svg{width:100%;height:100%;}

@media(max-width:680px){
  .shk-rm-topics{grid-template-columns:1fr;}
  .shk-rm-stats{gap:14px;padding:18px;flex-wrap:wrap;}
  .shk-rm-div{display:none;}
  .shk-rm-stat{flex:1;min-width:80px;}
  .shk-rm-head{padding:16px;gap:12px;}
}