/* the public roadmap (class prefix rm-): site/js/views/roadmap.js and site/js/roadmap/dialogs.js. Lane roadmap.
   docs/LANES.md 6.5 and the width contract of 3.7: ONE column at every width, nothing with a fixed width, long
   words of the community wrap inside their row, the dialog is the shared .modal.
   Colours only through the tokens of styles.css: no colour literal in this file. */

/* ---------- the page ---------- */
.rm-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.rm-head { margin-bottom: 14px; }
.rm-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rm-honest { max-width: 68ch; margin: 0 0 12px; color: var(--text); font-weight: 700; }
.rm-actions { margin: 0; }
.rm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; margin: 0 0 12px; }
.rm-filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0 0 14px; }
.rm-filter { min-height: 32px; padding: 4px 12px; cursor: pointer; }
.rm-filter.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hi); }
.rm-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.rm-sec { min-width: 0; }
.rm-sec h2 { text-transform: lowercase; }
.rm-sec-shipped { border-left: 3px solid var(--up); }
.rm-sec-progress { border-left: 3px solid var(--brand); }
.rm-sec-planned { border-left: 3px solid var(--line-2); }
.rm-sec-idea { border-left: 3px solid var(--brand-hi); }
.rm-fine { max-width: 68ch; margin: 16px 0 0; }

/* ---------- a row: the words on the left, the vote on the right, at every width ---------- */
.rm-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rm-row:last-child { border-bottom: 0; }
.rm-text { display: grid; gap: 3px; min-width: 0; overflow: hidden; }
/* what the community typed may be one long word: it wraps here, the page never scrolls sideways */
.rm-title { color: var(--text); overflow-wrap: anywhere; }
.rm-body { font-size: 13.5px; overflow-wrap: anywhere; }
.rm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; }
.rm-held { color: var(--warn); font-size: 12px; font-weight: 700; }
.rm-pinned .rm-title { color: var(--brand-hi); }
.rm-empty { margin: 0; color: var(--muted); }

/* the vote: a real button, 44 px to the thumb, the number only when there is one */
.rm-vote { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--muted); font: 700 13px/1 var(--font-mono); cursor: pointer; }
.rm-vote:hover { border-color: var(--brand); color: var(--text); }
.rm-vote.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hi); }
.rm-vote:disabled { opacity: 0.55; cursor: default; }
.rm-vote .ico { width: 16px; height: 16px; }

/* ---------- the dialog: one column inside the shared .modal ---------- */
.rm-dlg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.rm-dlg-lead { margin: 0; color: var(--text); font-weight: 700; }
.rm-dlg-h { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-transform: lowercase; }
.rm-area { min-height: 96px; resize: vertical; }
.rm-count { justify-self: end; color: var(--dim); font-size: 11.5px; }
.rm-msg { margin: 0; padding: 10px 12px; max-width: 100%; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-msgnote { margin: 0; }
.rm-dlg-facts { display: grid; gap: 3px; margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 13px; }
.rm-problem { margin: 0; color: var(--down); font-weight: 700; }

/* ---------- the Security page: what the server keeps for the roadmap (site/js/roadmap/security.js) ---------- */
.rm-keeps h2 { margin: 0 0 8px; text-transform: lowercase; }
.rm-keeps p { max-width: 74ch; }
.rm-keeps-word { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid var(--warn); color: var(--muted); }