/* ============================================================
   Product Roadmap — prototype body styling, scoped to the page.
   The shell (side menu, top menu, fonts) is production; everything
   under .roadmap-page / .roadmap-tm keeps the prototype aesthetic.
   ============================================================ */

.roadmap-page,
.roadmap-tm {
  --bg: #0a0e16;
  --panel: #10151f; --surface: #151b27; --surface-2: #1a2230; --surface-hover: #1e2736;
  --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.13);
  --text: #e8edf5; --text-dim: #9aa7b8; --text-faint: #616e80;
  --accent: #7c6cff; --accent-soft: rgba(124,108,255,0.15); --accent-2: #f5a623;
  --shadow: 0 10px 30px -12px rgba(0,0,0,0.7); --shadow-lift: 0 18px 40px -14px rgba(0,0,0,0.85);
  --track: rgba(255,255,255,0.08);
  --st-shipped: #22c55e;
  --up: #22c55e;
  --font-display: 'Deacon-Medium', 'Inter', -apple-system, sans-serif;
  --main-color: #F78B27; --main-ink: #1A2433; --main-radius: 0.75rem;
  color: var(--text);
}
[data-bs-theme="light"] .roadmap-page,
[data-bs-theme="light"] .roadmap-tm {
  --bg: #eef1f6;
  --panel: #ffffff; --surface: #ffffff; --surface-2: #f4f6fa; --surface-hover: #eef1f6;
  --border: rgba(15,23,42,0.09); --border-strong: rgba(15,23,42,0.16);
  --text: #0f1929; --text-dim: #51607a; --text-faint: #8a97ab;
  --accent: #6a54ff; --accent-soft: rgba(106,84,255,0.12); --accent-2: #e8880e;
  --shadow: 0 10px 30px -16px rgba(15,23,42,0.35); --shadow-lift: 0 18px 40px -16px rgba(15,23,42,0.45);
  --track: rgba(15,23,42,0.08);
}

/* ---------- top-bar controls (inside the production top menu) ---------- */
.roadmap-tm { display:flex; align-items:center; gap:14px; }
.roadmap-tm .nav-sel { display:flex; gap:3px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
.roadmap-tm .seg-btn { border:none; background:transparent; color:var(--text-dim); font-family:'Inter'; font-weight:600;
  font-size:13px; padding:7px 15px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:all .15s ease; }
.roadmap-tm .seg-btn:hover { color:var(--text); }
.roadmap-tm .seg-btn.active { background:var(--main-color); color:var(--main-ink);
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--main-color) 40%,transparent); }
.roadmap-tm .last-synced { font-size:11.5px; color:var(--text-faint); white-space:nowrap; }

/* ---------- page heading + content ---------- */
.roadmap-page .page-heading { display:flex; flex-direction:column; gap:3px; padding:22px 0 4px; }
.roadmap-page .page-title { font-family:var(--font-display); font-size:27px; font-weight:600; letter-spacing:-.5px; }
.roadmap-page .page-desc { font-size:13px; color:var(--text-dim); }
[data-bs-theme="dark"] .roadmap-page .page-desc { color:#ffffff; }
.roadmap-page .content { padding:24px 0 60px; }

/* ---------- buttons (production shapes) ---------- */
.roadmap-page .btn, .roadmap-tm .btn { border:none; border-radius:var(--main-radius); font-family:'Inter'; font-weight:600; font-size:13px;
  padding:9px 18px; cursor:pointer; transition:all .15s ease; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.roadmap-page .btn-approve, .roadmap-tm .btn-approve { background:var(--main-color); color:var(--main-ink); border:1px solid var(--main-color); }
.roadmap-page .btn-approve:hover, .roadmap-tm .btn-approve:hover { filter:brightness(1.05); transform:translateY(-1px); }
.roadmap-page .btn-ghost { background:transparent; color:var(--main-color); border:1px solid var(--main-color); }
.roadmap-page .btn-ghost:hover { background:var(--main-color); color:var(--main-ink); }

/* ============================================================ KANBAN ============================================================ */
.roadmap-page .board { display:flex; gap:16px; overflow-x:auto; padding-bottom:18px; scroll-snap-type:x proximity; }
.roadmap-page .board::-webkit-scrollbar { height:10px; }
.roadmap-page .board::-webkit-scrollbar-thumb { background:var(--track); border-radius:20px; }
.roadmap-page .col { flex:0 0 298px; scroll-snap-align:start; display:flex; flex-direction:column; gap:11px;
  max-height:calc(100vh - 210px); }
.roadmap-page .board-fill { display:flex; gap:16px; overflow-x:visible; }
.roadmap-page .board-fill .col { flex:1 1 0; min-width:280px; }
.roadmap-page .col-head { display:flex; align-items:center; gap:9px; padding:4px 4px 2px; }
.roadmap-page .col-dot { width:9px; height:9px; border-radius:50%; background:var(--col-color); box-shadow:0 0 10px var(--col-color); }
.roadmap-page .col-name { font-family:var(--font-display); font-weight:600; font-size:13.5px; letter-spacing:.2px; }
.roadmap-page .col-sub { font-size:10.5px; color:var(--text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.roadmap-page .col-count { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border); padding:1px 9px; border-radius:20px; }
.roadmap-page .col-body { display:flex; flex-direction:column; gap:10px; min-height:40px; overflow-y:auto; overflow-x:hidden;
  flex:1; padding-right:4px; scrollbar-width:thin; scrollbar-color:var(--track) transparent; }
.roadmap-page .col-body::-webkit-scrollbar { width:6px; }
.roadmap-page .col-body::-webkit-scrollbar-thumb { background:var(--track); border-radius:20px; }
.roadmap-page .col-body::-webkit-scrollbar-track { background:transparent; }
.roadmap-page .col-track { height:3px; border-radius:3px; background:var(--col-color); opacity:.35; margin-bottom:2px; }

/* card — color-coded by TINT + DOT, compact */
.roadmap-page .card { background:color-mix(in srgb, var(--card-stage) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--card-stage) 24%, var(--border));
  border-radius:12px; padding:10px 11px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; }
.roadmap-page .card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--card-stage) 48%, var(--border)); }
.roadmap-page .card-top { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.roadmap-page .card-top-right { margin-left:auto; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.roadmap-page .stage-dot-sm { width:8px; height:8px; border-radius:50%; background:var(--card-stage);
  flex-shrink:0; box-shadow:0 0 8px var(--card-stage); }
.roadmap-page .card-title { font-size:12.5px; font-weight:600; line-height:1.3; letter-spacing:-.1px; flex:1; }
.roadmap-page .card-pain { font-size:11.5px; color:var(--text-dim); line-height:1.4; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.roadmap-page .card-epic-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  color:var(--accent); cursor:pointer; flex-shrink:0; }
.roadmap-page .card-epic-badge:hover { text-decoration:underline; }
.roadmap-page .chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:6px; letter-spacing:.3px; white-space:nowrap; }
.roadmap-page .chip-pri { color:#fff; }
.roadmap-page .chip-ghost { background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border); }
.roadmap-page .card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:8px; }
.roadmap-page .stat { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--text-dim); }
.roadmap-page .prog-row { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.roadmap-page .prog-extras { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.roadmap-page .prog-track { flex:1; height:5px; border-radius:6px; background:var(--track); overflow:hidden; }
.roadmap-page .prog-fill { height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--card-stage),color-mix(in srgb,var(--card-stage) 60%,#fff)); }
.roadmap-page .prog-pct { font-size:11.5px; font-weight:700; font-family:var(--font-display); min-width:32px; text-align:right; }
.roadmap-page .card-foot { display:flex; align-items:center; gap:14px; padding-top:8px; border-top:1px solid var(--border); }
.roadmap-page .gh-link { margin-left:auto; font-size:11px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:4px; text-decoration:none; }
.roadmap-page .col-empty { font-size:12px; color:var(--text-faint); text-align:center; padding:18px 8px;
  border:1px dashed var(--border); border-radius:12px; }

/* ============================================================ MODALS ============================================================ */
.roadmap-page .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:150; display:grid;
  place-items:center; padding:24px; }
.roadmap-page .modal-backdrop.hidden { display:none; }
/* display/position/height/inset override Bootstrap's global .modal (display:none; position:fixed;
   height:100%) so this centered box renders inside the backdrop grid instead of staying hidden */
.roadmap-page .modal { display:block; position:static; height:auto; inset:auto;
  width:520px; max-width:94vw; min-height:420px; max-height:92vh; overflow-y:auto; background:var(--panel);
  border:1px solid var(--border-strong); border-radius:18px; box-shadow:var(--shadow-lift); padding:24px;
  animation:rp-popin .2s ease; }
@keyframes rp-popin { from { transform:scale(.97); opacity:0; } to { transform:scale(1); opacity:1; } }
.roadmap-page .modal-head { display:flex; align-items:center; margin-bottom:18px; }
.roadmap-page .modal-title { font-family:var(--font-display); font-size:18px; font-weight:600; margin-right:auto; }
.roadmap-page .modal-x { background:none; border:none; color:var(--text-dim); font-size:17px; cursor:pointer; }
.roadmap-page .nm-gh-header { margin-bottom:18px; }
.roadmap-page .nm-gh-issue { font-size:11.5px; font-weight:600; color:var(--text-faint);
  letter-spacing:.3px; margin-bottom:4px; }
.roadmap-page .nm-gh-title { font-family:var(--font-display); font-size:15px; font-weight:600;
  line-height:1.35; margin-bottom:8px; }
.roadmap-page .fld { margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.roadmap-page .fld-row { display:flex; gap:14px; }
.roadmap-page .fld-row .fld { flex:1; }
.roadmap-page .fld-label { font-size:11.5px; font-weight:600; color:var(--text-dim); letter-spacing:.3px; }
.roadmap-page .fld-input { width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  color:var(--text); padding:10px 12px; font-family:'Inter'; font-size:13px; outline:none; }
.roadmap-page .fld-input:focus { border-color:var(--accent); }
.roadmap-page .fld-input:disabled { opacity:.55; cursor:not-allowed; }
.roadmap-page .fld-area { resize:vertical; min-height:62px; line-height:1.45; vertical-align:top; }
/* override the global `textarea::placeholder { padding:30px 0 0 20px }` in components.css
   that otherwise pushes the placeholder to the bottom of the box */
.roadmap-page .fld-area::placeholder { padding:0; }
.roadmap-page .fld-date { width:100%; }
.roadmap-page .modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
/* item modal — fixed height so the size doesn't jump between tabs; the active
   tab panel scrolls inside while the head, tab bar, and footer stay pinned */
.roadmap-page .item-modal { height:min(92vh, 780px); display:flex; flex-direction:column; overflow-y:hidden; }
.roadmap-page .mtab-panel { flex:1 1 auto; min-height:0; overflow-y:auto; margin-right:-10px; padding-right:10px;
  scrollbar-width:thin; scrollbar-color:var(--track) transparent; }
.roadmap-page .item-modal .modal-foot { margin-top:auto; padding-top:16px; }
/* modal tabs */
.roadmap-page .modal-tabs { display:flex; gap:3px; padding:4px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; margin-bottom:18px; }
.roadmap-page .mtab-btn { flex:1; border:none; background:transparent; color:var(--text-dim); font-family:'Inter';
  font-weight:600; font-size:12.5px; padding:7px 0; border-radius:9px; cursor:pointer; transition:all .15s ease; }
.roadmap-page .mtab-btn:hover { color:var(--text); }
.roadmap-page .mtab-btn.active { background:var(--main-color); color:var(--main-ink); }
/* shared empty-state text (epic sub-tasks modal) */
.roadmap-page .journal-empty { font-size:12.5px; color:var(--text-faint); font-style:italic; margin-bottom:12px; }


/* ============================================================ ROADMAP CONTROLS ============================================================ */
.roadmap-page .roadmap-controls { display:flex; align-items:center; gap:14px; margin:16px 0 16px; }
.roadmap-page .search-input { width:280px; background:var(--surface); border:1px solid var(--border); border-radius:11px;
  color:var(--text); padding:9px 14px; font-family:'Inter'; font-size:13px; outline:none; }
.roadmap-page .search-input:focus { border-color:var(--accent); }
.roadmap-page .search-input::placeholder { color:var(--text-faint); }
.roadmap-page .rc-group { display:flex; align-items:center; gap:10px; }
.roadmap-page .ship-toggle label { font-size:12.5px; color:var(--text); cursor:pointer; font-weight:500; }
.roadmap-page .ship-toggle input { width:16px; height:16px; accent-color:var(--st-shipped); cursor:pointer; }

/* ============================================================ TEAM MONTH BOARD ============================================================ */
.roadmap-page .month-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start; }
.roadmap-page .public-label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:14px; }
.roadmap-page .public-note { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--accent-2);
  background:color-mix(in srgb, var(--accent-2) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border));
  border-radius:10px; padding:9px 14px; margin-bottom:16px; }
.roadmap-page .public-note b { font-weight:700; }

/* ============================================================ GTM content calendar ============================================================ */
.roadmap-page .gtm-note { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim);
  margin-bottom:16px; }
.roadmap-page .chip-ctype { color:#fff; }
.roadmap-page .chip-shipped { background:color-mix(in srgb, var(--st-shipped) 15%, transparent); color:var(--st-shipped);
  border:1px solid color-mix(in srgb, var(--st-shipped) 30%, var(--border)); }
.roadmap-page .gtm-av, .roadmap-page .li-av { border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:700; flex-shrink:0; background:var(--surface-2); }
.roadmap-page .gtm-av { width:24px; height:24px; font-size:9.5px; }
.roadmap-page .li-av { width:40px; height:40px; font-size:13px; }
.roadmap-page .gtm-av img, .roadmap-page .li-av img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
/* fast CSS tooltip */
.roadmap-page .has-tip { position:relative; }
.roadmap-page .has-tip::after { content:attr(data-tip); position:absolute; bottom:132%; left:50%; transform:translateX(-50%);
  background:var(--panel); color:var(--text); border:1px solid var(--border-strong); border-radius:8px;
  padding:4px 9px; font-size:11px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .1s ease; box-shadow:var(--shadow-lift); z-index:300; }
.roadmap-page .has-tip:hover::after { opacity:1; transition-delay:.5s; }
.roadmap-page .gtm-avstack { display:flex; align-items:center; }
.roadmap-page .gtm-avstack .has-tip:hover { z-index:5; }
.roadmap-page .gtm-avstack .gtm-av { margin-left:-7px; box-shadow:0 0 0 2px var(--surface); }
.roadmap-page .gtm-avstack .gtm-av:first-child { margin-left:0; }
.roadmap-page .gtm-avstack .has-tip::after { left:auto; right:0; transform:none; }
.roadmap-page .gtm-owner { font-size:11px; color:var(--text-dim); font-weight:500;
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roadmap-page .gtm-date { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:11px;
  font-weight:600; color:var(--text-dim); flex-shrink:0; }
.roadmap-page .gtm-clickable { cursor:pointer; }
.roadmap-page .gtm-below { border-top:1px solid var(--border); margin-top:9px; padding-top:9px;
  display:flex; flex-direction:column; gap:8px; }
.roadmap-page .gtm-ctrow { display:flex; align-items:center; gap:8px; padding:4px 7px; border-radius:9px;
  background:color-mix(in srgb, var(--ct-color) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--ct-color) 24%, var(--border)); }
.roadmap-page .gtm-ctrow .gtm-avstack { margin-left:auto; }
.roadmap-page .gtm-ctrow .gtm-owner { margin-left:auto; }
.roadmap-page .gtm-metarow { display:flex; align-items:center; gap:9px; min-width:0; }
.roadmap-page .gtm-metarow .gtm-avstack { flex-shrink:0; }

/* LinkedIn draft (example) */
.roadmap-page .draft-gen-btn { width:100%; justify-content:center; margin:12px 0 4px; }
.roadmap-page .draft-preview { margin:12px 0 4px; }
.roadmap-page .li-post { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px; }
.roadmap-page .li-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.roadmap-page .li-name { font-weight:700; font-size:13.5px; display:block; }
.roadmap-page .li-tone { font-size:11px; color:var(--text-faint); }
.roadmap-page .li-body { font-size:13px; line-height:1.55; color:var(--text); white-space:pre-wrap; }

/* locked (GitHub-synced) cards + columns */
.roadmap-page .card.locked { cursor:pointer; }
.roadmap-page .card.locked:hover { transform:none; box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--card-stage) 24%, var(--border)); }

/* shared modal chrome (release notes, GTM alert, LinkedIn draft) */
.roadmap-page .rn-modal { width:640px; max-width:94vw; }
.roadmap-page .rn-sub { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); margin-bottom:16px; }
.roadmap-page .slack-empty { font-size:13px; color:var(--text-faint); font-style:italic; }
.roadmap-page .rn-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; }

/* epic sub-tasks modal */
.roadmap-page .epic-sub-list { display:flex; flex-direction:column; gap:12px; max-height:56vh; overflow-y:auto; }
.roadmap-page .epic-sub-row { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px 13px; }
.roadmap-page .epic-sub-top { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.roadmap-page .epic-sub-title { font-size:12.5px; font-weight:600; line-height:1.3; flex:1; }

/* drag & drop — states driven by product_roadmap_dnd.js */
.roadmap-page .card[draggable="true"] { cursor:grab; }
.roadmap-page .card.dragging { opacity:.45; cursor:grabbing; }
.roadmap-page .col-drop-ok .col-body { outline:2px dashed var(--col-color); outline-offset:4px; border-radius:12px;
  background:color-mix(in srgb, var(--col-color) 6%, transparent); }
.roadmap-page .col-drop-no .col-body { outline:2px dashed #f43f5e; outline-offset:4px; border-radius:12px; opacity:.55; }