/* MoLock public roadmap widget (/assets/js/roadmap.js) — Graphite & Amber, RTL-aware (logical properties), no inline styles.
   Uses the site's tokens when present, with fallbacks so it also works on other pages. */
.rm-widget { --rm-bg: var(--g800, #1F1D1A); --rm-bg2: var(--g900, #141311); --rm-line: var(--line, #3A3631); --rm-text: var(--bone, #F1ECE3);
  --rm-dim: var(--bone3, #CFC8BC); --rm-mute: var(--g400, #7A746B); --rm-amber: var(--amber, #FFB21E); --rm-ink: var(--ink, #1A1300); --rm-green: var(--green, #3DBE8B);
  color: var(--rm-text); font-family: inherit; }
.rm-section { display: grid; gap: 18px; }
.rm-head { display: grid; gap: 8px; }
.rm-title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.2; }
.rm-sub { margin: 0; color: var(--rm-dim); max-width: 60ch; }
.rm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rm-line);
  background: var(--rm-bg); color: var(--rm-text); font: inherit; font-size: .92rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.rm-btn:hover { border-color: var(--rm-mute); }
.rm-btn:focus-visible, .rm-all:focus-visible, .rm-more:focus-visible { outline: 2px solid var(--rm-amber); outline-offset: 2px; }
.rm-btn-primary { background: var(--rm-amber); border-color: var(--rm-amber); color: var(--rm-ink); }
.rm-btn-primary:hover { background: var(--amber6, #E89A00); border-color: var(--amber6, #E89A00); }
.rm-status { margin: 0; color: var(--rm-dim); }
.rm-error { color: #F08A78; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rm-grid { display: grid; gap: 14px; align-items: start; }
.rm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rm-col { background: var(--rm-bg2); border: 1px solid var(--rm-line); border-radius: 10px; padding: 14px; min-width: 0; }
.rm-col-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 600; }
.rm-count { margin-inline-start: auto; font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: .74rem; color: var(--rm-mute); }
.rm-col-sub { margin: 4px 0 12px; color: var(--rm-mute); font-size: .82rem; }
.rm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rm-mute); flex: none; }
.rm-in_progress .rm-dot { background: var(--rm-amber); box-shadow: 0 0 6px rgba(255, 178, 30, .5); }
.rm-planned .rm-dot { background: var(--rm-dim); }
.rm-shipped .rm-dot { background: var(--rm-green); }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rm-card { padding: 12px; border-radius: 6px; background: var(--rm-bg); border: 1px solid var(--rm-line); min-width: 0; }
.rm-card-title { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.rm-card-sum { margin: 4px 0 0; color: var(--rm-dim); font-size: .85rem; line-height: 1.55; overflow-wrap: anywhere; }
.rm-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; font-size: .76rem; color: var(--rm-mute); }
.rm-votes { color: var(--rm-amber); font-weight: 500; }
.rm-tag, .rm-mono { font-family: var(--mono, ui-monospace, Consolas, monospace); }
.rm-empty { color: var(--rm-mute); font-size: .85rem; padding: 8px 2px; }
.rm-more, .rm-all { display: inline-block; margin-top: 10px; color: var(--rm-dim); font-size: .86rem; text-decoration: underline; text-decoration-color: var(--rm-mute); text-underline-offset: 3px; }
.rm-more:hover, .rm-all:hover { color: var(--rm-amber); }
@media (max-width: 1000px) { .rm-cols-4, .rm-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rm-cols-4, .rm-cols-3, .rm-cols-2 { grid-template-columns: minmax(0, 1fr); } }