/* ============================================================
   DiviMerc Roadmap — surfaces 01–06 with sidebar navigation

   Everything is scoped to .dmr-roadmap, and component rules are
   element-qualified (li.dmr-item, a.dmr-nv, …) so they outrank
   both the reset below and typical theme selectors such as
   .et_pb_code ul li. Do not lower this specificity.

   Fonts (DM Sans, Inter) are enqueued separately by WPRio Easy Tools
   instead of the original @import, which delayed rendering.
   ============================================================ */

.dmr-roadmap{
  /* ---- neutral ramp ---- */
  --dmr-page:#FFFFFF;
  --dmr-paper:#FFFFFF;
  --dmr-paper-2:#F5F5F5;
  --dmr-rule:#EDEDED;
  --dmr-rule-2:#D2D2D2;
  --dmr-card-br:#EFEFEF;
  --dmr-ink:#0B0C0F;
  --dmr-ink-2:#48494B;
  --dmr-ink-3:#828384;

  /* ---- brand ---- */
  --dmr-brand:#5E8E3E;
  --dmr-brand-wash:#F3FCEC;

  /* ---- states: one hue each, each also carries its own shape ---- */
  --dmr-shipped:#4C7A2E;   --dmr-shipped-bg:#EDF5E4;   --dmr-shipped-br:#CBDFB6;
  --dmr-progress:#8F5B0E;  --dmr-progress-bg:#F8EFE1;  --dmr-progress-br:#E6D2AC;
  --dmr-planned:#2E5AA8;   --dmr-planned-bg:#E8EDF7;   --dmr-planned-br:#C6D4EA;
  --dmr-consider:#6B6B6D;  --dmr-consider-bg:#F0F0F0;  --dmr-consider-br:#D2D2D2;

  --dmr-display:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --dmr-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* ---- TUNE THESE TWO if your Divi header is fixed or sticky ---- */
  --dmr-nav-top:136px;      /* where the sidebar parks while scrolling */
  --dmr-anchor-gap:32px;   /* clearance above an anchored heading or row */

  --dmr-max:1440px;
  --dmr-gutter:40px;

  background:var(--dmr-page);
  color:var(--dmr-ink);
  font-family:var(--dmr-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:64px 0 48px;
}

/* ---------- neutralise inherited theme styling inside the scope ----------
   Note: no `padding` in the li reset — component rules set their own.        */
.dmr-roadmap *,
.dmr-roadmap *::before,
.dmr-roadmap *::after{box-sizing:border-box}
.dmr-roadmap h2,
.dmr-roadmap h3{
  margin:0; padding:0; font-family:var(--dmr-display); font-weight:500;
  line-height:1.15; letter-spacing:-.012em; color:var(--dmr-ink); text-transform:none;
}
.dmr-roadmap p{margin:0; padding:0}
.dmr-roadmap ul,
.dmr-roadmap ol{margin:0; padding:0; list-style:none}
.dmr-roadmap li{margin:0; list-style:none; text-indent:0}
.dmr-roadmap li::before,
.dmr-roadmap li::marker{content:none}
.dmr-roadmap a{color:inherit; text-decoration:none; box-shadow:none; border:0}
.dmr-roadmap button{
  font:inherit; color:inherit; margin:0; background:none; border:0;
  text-transform:none; letter-spacing:normal; line-height:inherit; box-shadow:none;
}
.dmr-roadmap svg{display:block; max-width:none; height:auto}
.dmr-roadmap :focus-visible{outline:2px solid var(--dmr-ink); outline-offset:3px; border-radius:2px}

.dmr-roadmap .dmr-sprite{position:absolute; width:0; height:0; overflow:hidden}
.dmr-roadmap .dmr-inner{width:100%; max-width:var(--dmr-max); margin:0 auto; padding:0 var(--dmr-gutter)}

.dmr-roadmap .dmr-ico{width:16px; height:16px; flex:0 0 auto; display:block}
.dmr-roadmap .dmr-c-shipped{color:var(--dmr-shipped)}
.dmr-roadmap .dmr-c-progress{color:var(--dmr-progress)}
.dmr-roadmap .dmr-c-planned{color:var(--dmr-planned)}
.dmr-roadmap .dmr-c-consider{color:var(--dmr-consider)}

/* ---------- section intro ---------- */
.dmr-roadmap .dmr-intro{text-align:center; max-width:70ch; margin:0 auto 52px}
.dmr-roadmap .dmr-chip{
  display:inline-block; font-family:var(--dmr-display); font-size:.8125rem; font-weight:500;
  letter-spacing:.01em; color:var(--dmr-ink-2); background:var(--dmr-paper);
  border:1px solid var(--dmr-card-br); border-radius:100px; padding:6px 15px;
}
.dmr-roadmap h2.dmr-intro-h{
  margin-top:18px; font-weight:700; font-size:clamp(1.6rem,4.4vw,2.1rem); letter-spacing:-.028em;
}
.dmr-roadmap p.dmr-intro-p{margin-top:16px; color:var(--dmr-ink-3)}

/* ---------- layout + sticky sidebar nav ---------- */
.dmr-roadmap .dmr-layout{
  display:grid; grid-template-columns:248px minmax(0,1fr); gap:56px; align-items:start;
}
.dmr-roadmap .dmr-nav{position:sticky; top:var(--dmr-nav-top)}
.dmr-roadmap h3.dmr-nav-h{
  font-family:var(--dmr-display); font-size:.8125rem; font-weight:500; letter-spacing:.02em;
  color:var(--dmr-ink-3); padding-bottom:12px; border-bottom:1px solid var(--dmr-rule);
}
.dmr-roadmap ol.dmr-nav-list{margin:0; padding:0; list-style:none}
.dmr-roadmap a.dmr-nv{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:12px;
  padding:11px 12px 11px 10px; border-radius:8px; text-decoration:none;
  transition:background .14s ease, color .14s ease;
}
.dmr-roadmap .dmr-nv-ord{
  font-family:var(--dmr-display); font-size:.75rem; font-weight:500;
  color:var(--dmr-ink-3); font-variant-numeric:tabular-nums;
}
.dmr-roadmap .dmr-nv-name{
  font-family:var(--dmr-display); font-size:.9375rem; font-weight:500;
  letter-spacing:-.008em; color:var(--dmr-ink-2); line-height:1.35;
}
.dmr-roadmap .dmr-nv-n{
  font-family:var(--dmr-display); font-size:.8125rem;
  color:var(--dmr-ink-3); font-variant-numeric:tabular-nums;
}
.dmr-roadmap a.dmr-nv:hover{background:var(--dmr-paper-2)}
.dmr-roadmap a.dmr-nv:hover .dmr-nv-name{color:var(--dmr-ink)}
.dmr-roadmap a.dmr-nv[aria-current="true"]{background:var(--dmr-brand-wash)}
.dmr-roadmap a.dmr-nv[aria-current="true"] .dmr-nv-name{color:var(--dmr-ink); font-weight:600}
.dmr-roadmap a.dmr-nv[aria-current="true"] .dmr-nv-ord{color:var(--dmr-brand)}

/* ---------- a surface ---------- */
.dmr-roadmap .dmr-surface{
  border-top:1px solid var(--dmr-rule); scroll-margin-top:var(--dmr-anchor-gap);
}
.dmr-roadmap .dmr-surface:last-of-type{border-bottom:1px solid var(--dmr-rule)}
.dmr-roadmap .dmr-head{padding:26px 0 28px}
.dmr-roadmap button.dmr-toggle{
  display:grid; grid-template-columns:1fr auto; align-items:start; gap:16px;
  width:100%; padding:0; cursor:pointer; text-align:left;
}
.dmr-roadmap button.dmr-toggle:hover .dmr-title{
  text-decoration:underline; text-decoration-color:var(--dmr-rule-2); text-underline-offset:4px;
}
.dmr-roadmap .dmr-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dmr-roadmap .dmr-ord{
  font-family:var(--dmr-display); font-size:.8125rem; font-weight:500;
  color:var(--dmr-ink-3); font-variant-numeric:tabular-nums;
}
.dmr-roadmap .dmr-stage{
  font-family:var(--dmr-display); font-size:.6875rem; font-weight:600; letter-spacing:.01em;
  padding:3px 9px; border-radius:100px; border:1px solid var(--dmr-rule-2);
  color:var(--dmr-ink-2); background:var(--dmr-paper);
}
.dmr-roadmap .dmr-stage[data-dmr-stage="now"]{
  color:#3E6B23; border-color:var(--dmr-shipped-br); background:var(--dmr-brand-wash);
}
.dmr-roadmap .dmr-stage[data-dmr-stage="next"]{
  color:var(--dmr-progress); border-color:var(--dmr-progress-br); background:var(--dmr-progress-bg);
}
.dmr-roadmap .dmr-title{
  display:block; margin-top:9px; font-family:var(--dmr-display); font-weight:700;
  font-size:clamp(1.5rem,4.2vw,1.5rem); letter-spacing:-.028em; line-height:1.15;
}
.dmr-roadmap .dmr-chev{
  width:26px; height:26px; border:1px solid var(--dmr-rule-2); border-radius:50%;
  display:grid; place-items:center; margin-top:22px;
  transition:transform .18s ease, border-color .14s ease;
}
.dmr-roadmap button.dmr-toggle:hover .dmr-chev{border-color:var(--dmr-ink-3)}
.dmr-roadmap button.dmr-toggle[aria-expanded="true"] .dmr-chev{transform:rotate(180deg)}
.dmr-roadmap .dmr-chev svg{width:11px; height:11px}

.dmr-roadmap .dmr-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px}
.dmr-roadmap .dmr-counts{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dmr-roadmap .dmr-cnt{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--dmr-display);
  font-size:.8125rem; font-weight:400; color:var(--dmr-ink-3);
}
.dmr-roadmap .dmr-cnt b{font-weight:600; color:var(--dmr-ink); font-variant-numeric:tabular-nums}
.dmr-roadmap .dmr-cnt[data-dmr-zero="true"]{color:var(--dmr-ink-3); opacity:.5}
.dmr-roadmap .dmr-cnt[data-dmr-zero="true"] b{font-weight:500; color:var(--dmr-ink-3)}
.dmr-roadmap .dmr-cnt .dmr-ico{width:13px; height:13px}

.dmr-roadmap a.dmr-link{
  margin-left:auto; font-family:var(--dmr-display); font-size:.8125rem;
  color:var(--dmr-ink-3); opacity:.5; padding:2px 5px; border-radius:2px;
  transition:opacity .14s ease, color .14s ease;
}
.dmr-roadmap a.dmr-link:hover,
.dmr-roadmap a.dmr-link:focus-visible{opacity:1; color:var(--dmr-ink); background:var(--dmr-paper-2)}

.dmr-roadmap .dmr-meter{
  display:flex; gap:1.5px; height:5px; margin-top:16px;
  background:#ECECEC; border-radius:100px; overflow:hidden;
}
.dmr-roadmap .dmr-seg{transition:flex-basis .28s ease}
.dmr-roadmap .dmr-seg[data-dmr-seg="shipped"]{background:var(--dmr-shipped)}
.dmr-roadmap .dmr-seg[data-dmr-seg="progress"]{background:var(--dmr-progress)}
.dmr-roadmap .dmr-seg[data-dmr-seg="planned"]{background:var(--dmr-planned)}
.dmr-roadmap .dmr-seg[data-dmr-seg="consider"]{background:var(--dmr-consider); opacity:.4}
.dmr-roadmap .dmr-meter[data-dmr-empty="true"]{
  background:repeating-linear-gradient(90deg,var(--dmr-rule-2) 0 4px,transparent 4px 9px);
}

.dmr-roadmap .dmr-body{padding:0 0 44px}

/* ---------- state groups inside a surface ---------- */
.dmr-roadmap .dmr-sub + .dmr-sub{margin-top:34px}
.dmr-roadmap h3.dmr-sub-title{
  display:flex; align-items:center; gap:9px; font-family:var(--dmr-display);
  font-size:.875rem; font-weight:600; letter-spacing:-.006em;
  padding-bottom:11px; border-bottom:1px solid var(--dmr-rule);
}
.dmr-roadmap h3.dmr-sub-title .dmr-ico{width:14px; height:14px}
.dmr-roadmap .dmr-sub-kind{font-weight:400; color:var(--dmr-ink-3)}
.dmr-roadmap .dmr-sub-kind::before{content:"/"; margin-right:9px; color:var(--dmr-rule-2)}
.dmr-roadmap ul.dmr-items{margin:0; padding:0; list-style:none}

/* ---------- one line item: name left, state right ---------- */
.dmr-roadmap li.dmr-item{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:14px;
  margin:0; padding:12px 4px 12px 0; border-bottom:1px solid var(--dmr-rule);
  scroll-margin-top:var(--dmr-anchor-gap); list-style:none;
}
.dmr-roadmap li.dmr-item:target{
  background:var(--dmr-brand-wash);
  box-shadow:inset 3px 0 0 var(--dmr-brand);
  padding-left:13px;
}
.dmr-roadmap .dmr-copy{min-width:0}
.dmr-roadmap .dmr-name{
  font-family:var(--dmr-display); font-weight:600; font-size:.9375rem;
  letter-spacing:-.008em; color:var(--dmr-ink);
}
.dmr-roadmap .dmr-desc{color:var(--dmr-ink-3); font-size:.9375rem}
.dmr-roadmap .dmr-desc::before{content:" — "; color:var(--dmr-ink-3)}

.dmr-roadmap .dmr-chip-state{
  display:inline-flex; align-items:center; gap:6px; align-self:center;
  font-family:var(--dmr-display); font-size:.6875rem; font-weight:600; letter-spacing:.004em;
  padding:4px 10px 4px 8px; border-radius:100px; border:1px solid; white-space:nowrap;
}
.dmr-roadmap .dmr-chip-state .dmr-ico{width:12px; height:12px}
.dmr-roadmap li.dmr-item[data-dmr-state="shipped"] .dmr-chip-state{
  color:var(--dmr-shipped); background:var(--dmr-shipped-bg); border-color:var(--dmr-shipped-br);
}
.dmr-roadmap li.dmr-item[data-dmr-state="progress"] .dmr-chip-state{
  color:var(--dmr-progress); background:var(--dmr-progress-bg); border-color:var(--dmr-progress-br);
}
.dmr-roadmap li.dmr-item[data-dmr-state="planned"] .dmr-chip-state{
  color:var(--dmr-planned); background:var(--dmr-planned-bg); border-color:var(--dmr-planned-br);
}
.dmr-roadmap li.dmr-item[data-dmr-state="consider"] .dmr-chip-state{
  color:var(--dmr-consider); background:var(--dmr-consider-bg); border-color:var(--dmr-consider-br);
}

.dmr-roadmap a.dmr-permalink{
  font-family:var(--dmr-display); font-size:.8125rem; color:var(--dmr-ink-3);
  opacity:0; padding:2px 5px; border-radius:2px; align-self:center;
  transition:opacity .12s ease;
}
.dmr-roadmap li.dmr-item:hover a.dmr-permalink,
.dmr-roadmap a.dmr-permalink:focus-visible{opacity:1; color:var(--dmr-ink); background:var(--dmr-paper-2)}
@media (hover:none){
  .dmr-roadmap a.dmr-permalink{opacity:.4}
}

.dmr-roadmap p.dmr-empty{
  padding:22px 0 4px; font-family:var(--dmr-display); font-style:italic;
  font-size:1rem; color:var(--dmr-ink-3);
}
.dmr-roadmap p.dmr-empty[hidden],
.dmr-roadmap li.dmr-item[hidden],
.dmr-roadmap .dmr-sub[hidden]{display:none}

/* ---------- below the two-column threshold: nav becomes a scroll strip ---------- */
@media (max-width:1023px){
  .dmr-roadmap{--dmr-gutter:28px}
  .dmr-roadmap .dmr-layout{grid-template-columns:minmax(0,1fr); gap:28px}
  .dmr-roadmap .dmr-nav{
    position:static; margin:0 calc(var(--dmr-gutter) * -1);
    padding:0 var(--dmr-gutter) 4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .dmr-roadmap h3.dmr-nav-h{border-bottom:0; padding-bottom:8px}
  .dmr-roadmap ol.dmr-nav-list{display:flex; gap:8px; min-width:max-content}
  .dmr-roadmap a.dmr-nv{
    grid-template-columns:auto auto; gap:8px; white-space:nowrap;
    border:1px solid var(--dmr-card-br); background:var(--dmr-paper); padding:9px 14px;
  }
  .dmr-roadmap .dmr-nv-ord{display:none}
  .dmr-roadmap a.dmr-nv[aria-current="true"]{border-color:var(--dmr-shipped-br)}
}

@media (max-width:767px){
  .dmr-roadmap{--dmr-gutter:18px; padding:44px 0 24px}
  .dmr-roadmap li.dmr-item{
    grid-template-columns:1fr; gap:6px; padding:13px 0; position:relative;
  }
  .dmr-roadmap li.dmr-item .dmr-chip-state{order:-1; align-self:start; justify-self:start}
  /* the permalink rides in the corner instead of claiming a third row */
  .dmr-roadmap a.dmr-permalink{position:absolute; top:11px; right:0; opacity:.4}
  .dmr-roadmap .dmr-chev{margin-top:14px}
}

@media (prefers-reduced-motion:reduce){
  .dmr-roadmap *{transition:none !important; animation:none !important}
}

/* ============================================================
   WPRio Easy Tools additions — version label + voting.
   Built from the tokens above so they read as part of the design.
   ============================================================ */

/* "v1.2.0" after a shipped item's description, linked to the changelog. */
.dmr-roadmap .dmr-ver{
  display:inline-block; margin-left:8px; vertical-align:1px;
  font-family:var(--dmr-display); font-size:.6875rem; font-weight:600; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; line-height:1.5;
  padding:1px 8px; border-radius:100px; border:1px solid var(--dmr-shipped-br);
  color:var(--dmr-shipped); background:var(--dmr-paper); white-space:nowrap;
  transition:background .14s ease;
}
.dmr-roadmap a.dmr-ver{border:1px solid var(--dmr-shipped-br)}
.dmr-roadmap a.dmr-ver:hover,
.dmr-roadmap a.dmr-ver:focus-visible{background:var(--dmr-shipped-bg)}

/* Upvote: sits between the copy and the state chip. */
.dmr-roadmap li.dmr-item.dmr-has-vote{grid-template-columns:1fr auto auto auto}
.dmr-roadmap button.dmr-vote{
  display:inline-flex; align-items:center; gap:5px; align-self:center; cursor:pointer;
  font-family:var(--dmr-display); font-size:.75rem; font-weight:600; letter-spacing:.004em;
  font-variant-numeric:tabular-nums; line-height:1.4; white-space:nowrap;
  padding:3px 10px 3px 7px; border-radius:100px; border:1px solid var(--dmr-rule-2);
  color:var(--dmr-ink-2); background:var(--dmr-paper);
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.dmr-roadmap button.dmr-vote svg{width:11px; height:11px}
.dmr-roadmap button.dmr-vote:hover{border-color:var(--dmr-ink-3); color:var(--dmr-ink)}
.dmr-roadmap button.dmr-vote[aria-pressed="true"]{
  color:var(--dmr-brand); border-color:var(--dmr-shipped-br); background:var(--dmr-brand-wash);
}
.dmr-roadmap button.dmr-vote[disabled]{opacity:.6; cursor:progress}

@media (max-width:767px){
  .dmr-roadmap li.dmr-item.dmr-has-vote{grid-template-columns:1fr}
  .dmr-roadmap li.dmr-item .dmr-vote{justify-self:start}
}
/* Touch screens: a thumb-sized tap area around the small pill (invisible). */
@media (pointer:coarse){
  .dmr-roadmap button.dmr-vote{position:relative}
  .dmr-roadmap button.dmr-vote::after{content:""; position:absolute; inset:-10px -8px}
}