/* Fitlab — roadmap page (builds on ../styles.css for the shared chrome). */

[hidden] { display: none !important; }
#mainWrapper { overflow-y: auto; }

#rmBar { display: flex; align-items: center; gap: 18px; padding: 8px 14px; background-color: var(--backgroundColor); border-bottom: 1px solid var(--borderColor31); flex-shrink: 0; }
#rmTitle { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.3571em; color: var(--themeColor); letter-spacing: 3px; white-space: nowrap; }
#rmNote { font-size: 0.8214em; color: var(--textColor2); margin-left: auto; white-space: nowrap; }

#rmWrap { padding: 20px 18px 30px; max-width: 62em; margin: 0 auto; width: 100%; font-size: 1em; }
.rmIntro { color: var(--textColor); margin: 0 0 22px; line-height: 1.5; }
.rmIntro a { color: var(--themeColor); text-decoration: none; }
.rmIntro a:hover { text-decoration: underline; }

/* the timeline itself is the shared .rmPhases (../styles.css) */
#phases { padding-left: 8px; font-size: 1em; }

@media (max-width: 700px) { #rmNote { display: none; } }

/* feedback card + form */
.fbCard { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background-color: var(--backgroundColor); border: 1px solid var(--borderColor31); padding: 12px 16px; margin-bottom: 22px; }
.fbText { display: flex; flex-direction: column; gap: 3px; flex: 1 1 24em; min-width: 0; }
.fbTitle { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1.5px; color: var(--themeColor); font-size: 0.9286em; }
.fbSub { color: var(--textColor2); font-size: 0.8929em; }
.fbBtns { display: flex; gap: 3px; }
.barBtn { background: none; border: 1px solid var(--borderColor31); padding: 6px 13px; font-family: inherit; font-size: 0.8929em; color: var(--textColor2); cursor: pointer; }
.barBtn:hover { color: var(--textColor); }
.barBtn-active { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }
.tabRow { display: flex; gap: 3px; font-size: 0.8929em; }
.tab { background: none; border: 1px solid var(--borderColor31); padding: 6px 13px; font-family: inherit; font-size: 1em; color: var(--textColor2); cursor: pointer; }
.tab:hover { color: var(--textColor); }
.tab-active { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }

/* the bug / idea form and the phases timeline are styled in ../styles.css (feedback & roadmap section) */