/* v32A Roads menu: the upgrade tool's modes and the drag cost preview (src/ui/roads_ui.js) */
#flyout .ru-modes { display: flex; gap: 3px; margin: -1px 0 5px 38px; }
#flyout .ru-modes.hidden { display: none; }
#flyout .ru-modes button { flex: 1; padding: 3px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--enamel); background: var(--slate-hi); border: 1px solid var(--rim, #5a6a76); border-radius: 3px; cursor: pointer; }
#flyout .ru-modes button.on { background: var(--cobalt); border-color: var(--cobalt-lo); }
#flyout .ru-modes button:disabled { opacity: 0.4; cursor: not-allowed; }
#road-cost { position: fixed; pointer-events: none; z-index: 8; display: none; padding: 4px 8px; background: var(--slate); color: var(--enamel); border: 1px solid var(--rim, #5a6a76); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
#road-cost .bad { color: #ff9a7a; font-weight: 500; }
#road-cost small { display: block; font-weight: 500; opacity: 0.75; }
.rc-fix-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

#tool-help { position:fixed; right:18px; bottom:90px; max-width:340px; max-height:45vh; overflow:auto; padding:16px; background:#e5eadf; color:#192c2c; border-top:4px solid #287c91; box-shadow:0 4px 20px #0006; z-index:90; font:14px/1.5 sans-serif; }
#tool-help[hidden] { display:none; }
#tool-help p { margin:8px 0 12px; }
@media(max-width:600px) { #tool-help { right:10px; left:90px; bottom:70px; max-width:none; } }

/* Proposal totals and pattern key stay beside the pointer, bounded by the viewport. */
#road-cost { z-index: 85; max-width: min(330px, calc(100vw - 24px)); white-space: normal; padding: 9px 11px; background: #18343b; color: #f4f2df; border-color: #90aeb1; }
#road-cost > strong, #road-cost > span { display: block; }
#road-cost .road-monthly { margin: 3px 0; color: #e5eedb; font-weight: 500; }
#road-cost small { opacity: 1; margin-top: 4px; }
#road-cost .road-proposal-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; font-weight: 500; }
#road-cost .route { color: #80eeff; }
#road-cost .reserve { color: #ffd38a; }
#road-cost .demolish { color: #ffb4e7; font-weight: 700; }
#road-cost .bad { color: #ffac99; }

#road-cost .unchanged { color:#b6c5c5; }