/* Roadmap GPS additions on top of the shared FLG styles (styles.css, same as FLG Comp) */
:root { --v-blue: #2a78d6; --v-orange: #eb6834; --v-purple: #4a3aa7; --v-green: #008300; --v-grey: #b8c0cc; }
/* Keep wide tables scrolling inside their panel instead of widening the page */
body { grid-template-columns: 220px minmax(0, 1fr); } main { min-width: 0; }
td.tcol { min-width: 260px; } td.wcol { min-width: 130px; } td.rcol { min-width: 150px; } td.acol { min-width: 190px; }
.rail .deal-nav { margin: 10px 0 6px; padding: 10px 0 6px; border-top: 1px solid #2a3652; }
.rail .deal-nav .dn-title { padding: 0 22px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8f9bb5; }
.rail .deal-nav .dn-name { padding: 0 22px 8px; color: #fff; font-weight: 700; line-height: 1.2; }
.rail .deal-nav a { padding-left: 32px; font-size: 14px; }
.sample { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a4d00; background: #fff2d6; border: 1px solid #f0d9a8; border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }

/* The route: one node per phase */
.route { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); position: relative; margin: 6px 0 4px; }
.route::before { content: ""; position: absolute; left: calc(100% / 24); right: calc(100% / 24); top: 13px; height: 4px; background: var(--rule); border-radius: 2px; }
.route .fill { position: absolute; left: calc(100% / 24); top: 13px; height: 4px; background: var(--v-green); border-radius: 2px; }
.rnode { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.rnode:hover { border: 0; }
.rnode .dot { width: 30px; height: 30px; margin: 0; border-radius: 50%; background: #fff; border: 3px solid var(--v-grey); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ink-2); position: relative; z-index: 1; vertical-align: 0; }
.rnode.done .dot { background: var(--v-green); border-color: var(--v-green); color: #fff; }
.rnode.part .dot { border-color: var(--v-green); background: linear-gradient(to top, #cfe9cf var(--p), #fff var(--p)); }
.rnode.here .dot { border-color: var(--v-blue); box-shadow: 0 0 0 5px rgba(42,120,214,.22); }
.rnode.none .dot { border-style: dashed; opacity: .5; }
.rnode.sel .dot { outline: 3px solid #f2c14e; outline-offset: 2px; }
.rnode .rl { font-size: 11.5px; line-height: 1.2; color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; }
.rnode .rc { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rnode.here .rl { color: var(--v-blue); font-weight: 700; }
.rnode:hover .dot { transform: scale(1.08); }
@media (max-width: 700px) {
  .rnode .rl, .rnode .rc { display: none; }
  .rnode .dot { width: 22px; height: 22px; font-size: 0; border-width: 2px; }
  .route::before, .route .fill { top: 9px; height: 3px; }
}

/* Fleet map: all deals */
.fleet { display: grid; gap: 10px; margin-bottom: 18px; }
.fleet-row { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; display: grid; grid-template-columns: 250px minmax(0, 1fr) 200px; gap: 16px; align-items: center; cursor: pointer; }
.fleet-row:hover { border-color: var(--accent); }
.fleet-row .fr-name { font-weight: 700; } .fleet-row .fr-sub { font-size: 13px; color: var(--ink-2); }
.fleet-row .fr-stats { font-size: 13px; color: var(--ink-2); display: grid; gap: 2px; }
.fleet-row .fr-stats b { color: var(--ink); }
.fleet-row .route .rnode .rl, .fleet-row .route .rnode .rc { display: none; }
.fleet-row .route .rnode .dot { width: 20px; height: 20px; font-size: 0; border-width: 3px; }
.fleet-row .route::before, .fleet-row .route .fill { top: 8px; height: 3px; }
.fleet-row .here-label { font-size: 13px; color: var(--v-blue); font-weight: 700; margin-top: 4px; }
@media (max-width: 900px) { .fleet-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.pbar { height: 8px; border-radius: 4px; background: var(--rule-2); overflow: hidden; } .pbar > span { display: block; height: 100%; background: var(--v-green); }

/* Deal dashboard cards */
.turns { display: grid; gap: 8px; }
.turn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 9px 11px; border: 1px solid var(--rule); border-left: 4px solid var(--v-grey); border-radius: 7px; background: #fbfcfd; cursor: pointer; }
.turn:hover { border-color: var(--accent); }
.turn .tn { font-weight: 600; } .turn .tm { font-size: 12.5px; color: var(--ink-2); grid-column: 1 / -1; }
.turn.late { border-left-color: var(--v-orange); } .turn.soon { border-left-color: var(--v-blue); }
.status-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.st-not-started { background: #eef0f3; color: #4a5568; } .st-in-progress { background: #e1ecfa; color: #1b5bb0; }
.st-waiting-on-client, .st-waiting-on-other-side, .st-waiting-on-third-party { background: #ebe8f7; color: #4a3aa7; }
.st-blocked { background: #fde8df; color: #b3431a; } .st-done { background: #dff0df; color: #006400; } .st-not-applicable { background: #f1f1f1; color: #8a94a6; }
.late-txt { color: #b3431a; font-weight: 600; }
.where { font-size: 13px; color: var(--ink-2); }
.where b { color: var(--v-blue); font-size: 24px; display: block; line-height: 1.15; margin: 2px 0; }

/* Roadmap table cells */
td select.inl, td input.inl { padding: 3px 5px; font-size: 13px; max-width: 100%; }
td select.inl.st { font-weight: 600; }
td .why { display: block; font-size: 12px; color: var(--ink-3); }
td .tname { font-weight: 600; cursor: pointer; color: var(--ink); } td .tname:hover { color: var(--accent); text-decoration: underline; }
tr.offroute td { background: #fff8ef; }
tr.is-done td { color: var(--ink-3); } tr.is-done td .tname { color: var(--ink-3); }
.phase-tag { display: inline-block; font-size: 11px; font-weight: 700; background: #eef1f5; border: 1px solid var(--grid); border-radius: 4px; padding: 0 5px; }
.route-note { font-size: 13px; color: var(--ink-2); margin: 6px 0 10px; }

/* Task detail dialog */
dialog.task { width: min(880px, calc(100vw - 24px)); max-height: calc(100vh - 40px); border: 1px solid var(--rule); border-radius: 10px; padding: 0; color: var(--ink); background: var(--panel); }
dialog.task::backdrop { background: rgba(28, 36, 48, .35); }
.td-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.td-head h3 { margin: 0 0 4px; font-size: 19px; }
.td-body { padding: 14px 20px 18px; overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 170px); }
dialog.task { overflow: hidden; }
.td-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; margin-bottom: 8px; }
.td-sec { margin: 14px 0 0; } .td-sec h4 { margin: 0 0 4px; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.td-sec ul { margin: 2px 0; padding-left: 18px; } .td-sec li { margin: 2px 0; }
.td-sec .ev { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.td-sec p { margin: 0; }
.hist { font-size: 12.5px; color: var(--ink-2); }
.hook-btn { border-color: var(--v-purple); color: var(--v-purple); }

/* Plan-a-deal */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.plan .preview { position: sticky; top: 18px; }
.q { margin: 0 0 16px; } .q > .ql { font-weight: 700; font-size: 14px; margin-bottom: 6px; display: block; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--grid); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13.5px; cursor: pointer; user-select: none; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt:has(input:focus-visible) { outline: 2px solid #f2c14e; outline-offset: 1px; }
.opt .n { font-size: 11px; opacity: .75; }
.diff-add { color: var(--v-green); font-weight: 700; } .diff-drop { color: #b3431a; font-weight: 700; }
.dates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
@media (max-width: 1000px) { .plan { grid-template-columns: minmax(0, 1fr); } .plan .preview { position: static; } }
@media (max-width: 760px) {
  body { grid-template-columns: minmax(0, 1fr); } .rail { position: static; height: auto; } main { padding: 16px; }
  .tabletools input[type=search] { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi.hero { grid-column: 1 / -1; }
  .viz-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { padding: 10px 0; } .rail .brand { margin-bottom: 8px; padding-bottom: 8px; }
  .rail { flex-direction: row; flex-wrap: wrap; align-items: center; } .rail a { padding: 6px 10px; border-left: 0; } .rail .brand { width: 100%; padding-left: 16px; }
  .rail .deal-nav { width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 0; padding: 6px 0 0; }
  .rail .deal-nav .dn-title { display: none; } .rail .deal-nav .dn-name { width: 100%; padding: 0 16px 4px; } .rail .deal-nav a { padding-left: 16px; }
  .rail-foot { display: none; }
}
@media print { dialog { display: none; } .route .rnode .rl { display: block; } }

/* Deadline warnings: overdue / today / 3 days / week / two weeks */
.warn-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.lv-overdue.warn-pill { background: #fde3dc; color: #9a2f10; border-color: #f3b7a5; }
.lv-today.warn-pill { background: #fdeadf; color: #b3431a; border-color: #f5c3a8; }
.lv-soon.warn-pill { background: #ebe8f7; color: #4a3aa7; border-color: #cfc8ee; }
.lv-week.warn-pill { background: #e1ecfa; color: #1b5bb0; border-color: #bcd3f2; }
.lv-upcoming.warn-pill, .lv-null.warn-pill { background: #eef0f3; color: #4a5568; }
.lv-ok.warn-pill { background: #dff0df; color: #006400; }
.turn.lvl.lv-overdue { border-left-color: #b3431a; background: #fff6f3; } .turn.lvl.lv-today { border-left-color: #eb6834; }
.turn.lvl.lv-soon { border-left-color: #4a3aa7; } .turn.lvl.lv-week { border-left-color: #2a78d6; }
.warn-line { font-weight: 600; margin: 8px 0 0; } .warn-line.lv-overdue, .warn-line.lv-today { color: #b3431a; } .warn-line.lv-soon { color: #4a3aa7; }
.nbadge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #eb6834; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.nbadge[hidden] { display: none; }
a.doc-btn { border-color: var(--v-green); color: var(--v-green); }

/* Documents: questions on the left, the page on the right */
.doc-edit { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.qform { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.qform fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px 12px; margin: 0 0 12px; display: grid; gap: 10px; }
.qform legend { font-weight: 700; padding: 0 6px; }
.qform .hint { font-size: 12px; }
.missline { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.doc-paper { background: #fff; font-family: "Times New Roman", Times, serif; font-size: 15px; line-height: 1.45; color: #111; padding: 36px 44px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.doc-paper p { margin: 0 0 12px; } .doc-paper .d-p { text-align: justify; } .doc-paper .d-left { margin: 0; } .doc-paper .d-left.sp { margin-bottom: 12px; }
.doc-paper .d-h { text-align: center; font-weight: 700; margin-top: 16px; } .doc-paper .d-h2 { font-weight: 700; margin-top: 12px; }
.doc-paper .d-title { text-align: center; font-weight: 700; font-size: 18px; }
.doc-paper .d-sig { margin: 8px 0 18px; } .doc-paper .d-ol, .doc-paper .d-ul { margin: 0 0 12px; padding-left: 28px; } .doc-paper li { margin-bottom: 8px; text-align: justify; }
.doc-paper mark { background: #fff38a; padding: 0 2px; }
.doc-paper .d-note { font-family: var(--sans); font-size: 13px; background: #fff8e1; border: 1px dashed #e0b84d; border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; color: #6b5300; }
.doc-paper .d-pb { border: 0; border-top: 2px dashed var(--rule); margin: 22px 0; }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sec { margin-top: 12px; } .sec-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .sec-head input { flex: 1; min-width: 180px; font-weight: 700; }
.clist { margin: 4px 0 10px; padding-left: 20px; } .clist li { margin: 6px 0; }
.cprev { display: block; font-size: 12.5px; color: var(--ink-2); white-space: pre-line; max-height: 5.6em; overflow: hidden; }
.plist { max-height: 55vh; overflow: auto; border: 1px solid var(--rule); border-radius: 6px; margin-top: 10px; }
.pitem { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--rule-2); cursor: pointer; } .pitem:hover { background: #f6f8fb; }
dialog.task.wide { width: min(1100px, calc(100vw - 24px)); }
label.radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
iframe.mailprev { width: 100%; height: 55vh; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
@media (max-width: 1000px) { .doc-edit { grid-template-columns: minmax(0, 1fr); } .qform { position: static; max-height: none; } .doc-paper { padding: 18px; } }

/* Chat: a drawer from the right on every screen (chat log, cards and compose styles are shared with FLG Comp in styles.css) */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(23, 32, 51, .28); }
.chat-fab:hover { background: #17407f; border-color: #17407f; }
body.chat-open .chat-fab { display: none; }
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(540px, 100vw); display: flex; flex-direction: column; background: var(--paper);
  border-left: 1px solid var(--rule); box-shadow: -10px 0 30px rgba(23, 32, 51, .16); transform: translateX(105%); transition: transform .18s ease; visibility: hidden; }
.chat-drawer.open { transform: none; visibility: visible; }
.chat-drawer.wide { width: min(900px, 100vw); }
.cd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 14px 10px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.cd-title { display: flex; flex-direction: column; min-width: 0; } .cd-title b { font-size: 17px; }
.cd-ctx { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.cd-actions button { padding: 5px 8px; font-size: 13px; }
.chat-drawer .chat-log { flex: 1; min-height: 0; max-height: none; background: var(--panel); }
.chat-drawer .chat-msg { max-width: 96%; }
.chat-drawer .chat-msg.assistant { max-width: 100%; width: 100%; }
.chat-drawer .chat-suggest { background: var(--panel); padding-top: 4px; }
.chat-drawer .chat-compose { background: var(--panel); }
.chat-drawer .chat-compose[hidden], .cd-nokey[hidden], .cd-history[hidden] { display: none; }
.chat-drawer .chat-card { overflow: hidden; } .chat-drawer .chat-card .panel.scroll { max-height: 360px; overflow: auto; }
.chat-drawer .chat-card .tabletools input[type=search] { width: 150px; }
.chat-drawer .chat-card .tabletools { flex-wrap: wrap; gap: 6px; } .chat-drawer .chat-card .tabletools button { padding: 5px 9px; font-size: 13px; }
.chat-drawer .chat-card td.tcol { min-width: 200px; } .chat-drawer .chat-card td.rcol { min-width: 140px; }
.chat-steps { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); } .chat-steps summary { cursor: pointer; } .chat-steps ol { margin: 4px 0 0; padding-left: 20px; }
.chat-msg.typing { align-items: center; } .chat-msg.typing em { font-style: normal; margin-left: 6px; }
.cd-nokey { margin: 14px; padding: 12px 14px; background: #fff8ef; border: 1px solid #f0c9a3; border-radius: 8px; }
.cd-nokey p { margin: 6px 0 10px; } .cd-nokey code { font-size: 12.5px; overflow-wrap: anywhere; }
.cd-history { max-height: 45vh; overflow: auto; background: var(--panel); border-bottom: 1px solid var(--rule); padding: 8px 14px 10px; }
.cd-hist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cd-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cd-hist-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; font-weight: 400; }
.cd-hist-item b { font-weight: 600; } .cd-hist-item span { font-size: 12px; color: var(--ink-3); } .cd-hist-item.on { border-color: var(--accent); }
.chat-card.proposal { border-color: #b9d3f5; background: #f7faff; }
.chat-card.proposal .prop-sum { margin: 0 0 8px; }
.chat-card.proposal .prop-from { color: var(--ink-2); }
.prop-notes { margin: 8px 0 4px; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.prop-actions { margin-top: 8px; } .prop-actions .actions { gap: 6px; } .prop-actions .hint { margin: 6px 0 0; font-size: 12px; }
.fill-note { margin-bottom: 12px; border-color: #b9d3f5; background: #f2f7ff; }
#toast { z-index: 70; }
@media (min-width: 1500px) { body.chat-open main { padding-right: calc(540px + 24px); } body.chat-open.chat-wide main { padding-right: calc(900px + 24px); } }
@media print { .chat-fab, .chat-drawer { display: none !important; } body.chat-open main { padding-right: 36px; } }

/* "Ask Claude" everywhere: buttons, the clause library question box, and what a button pinned above the message box */
.chatbtn { border-color: var(--accent); color: var(--accent); }
button.ask-inline { margin-left: 6px; padding: 0 8px; font-size: 12px; line-height: 18px; border-radius: 999px; border-color: #b9d3f5; color: var(--accent); vertical-align: 1px; }
button.ask-inline:hover { border-color: var(--accent); }
.topbar .ask-bar { margin: 0; } .topbar .ask-bar input { width: min(380px, 70vw); }
.chip.about { background: #f2f7ff; border-color: #b9d3f5; max-width: 100%; } .chip.about button { color: var(--accent); }
/* The Chat page (#/chat): the same drawer, filling the screen beside the rail, with the conversation centred */
body.chat-page .chat-drawer { left: 220px; width: auto; transform: none; visibility: visible; transition: none; box-shadow: none; border-left: 0; }
body.chat-page .chat-fab, body.chat-page .cd-actions [data-cd=wide], body.chat-page .cd-actions [data-cd=close] { display: none; }
body.chat-page .cd-head, body.chat-page .chat-drawer .chat-log, body.chat-page .chat-drawer .chat-suggest, body.chat-page .chat-drawer .chat-compose,
body.chat-page .cd-history, body.chat-page .cd-nokey { padding-left: max(16px, calc((100% - 1000px) / 2)); padding-right: max(16px, calc((100% - 1000px) / 2)); }
body.chat-page .cd-nokey { margin: 14px 0; border-left: 0; border-right: 0; border-radius: 0; }
@media (max-width: 760px) { body.chat-page .chat-drawer { position: static; height: 85vh; width: 100%; border-top: 1px solid var(--rule); } body.chat-page main { padding: 0; } }

/* hosted: sign-in gate, sign out, hidden items */
[hidden] { display: none !important; }
body.booting .rail, body.booting main, body.booting #chatFab, body.booting #chatDrawer { visibility: hidden; }
.gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #172033 0%, #202b45 55%, #2a3652 100%); visibility: visible; overflow: auto; }
.gate-card { width: min(440px, 100%); background: var(--panel); border-radius: 12px; padding: 32px 30px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.gate-brand { font-size: 22px; font-weight: 700; line-height: 1.05; color: #172033; margin-bottom: 18px; }
.gate-brand span { font-weight: 400; color: #b7791f; }
.gate-card h1 { font-size: 24px; margin: 0 0 4px; }
.gate-sub { color: var(--ink-2); margin: 0 0 20px; }
.gate-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; padding: 10px 18px; }
.gate-btn svg { background: #fff; border-radius: 2px; padding: 1px; }
.gate-msg { background: var(--warn-bg); border: 1px solid #f0d49b; border-radius: 8px; padding: 10px 12px; margin: 14px 0; }
.gate-foot { margin: 22px 0 0; font-size: 12px; color: var(--ink-3); }
.gate-list { display: grid; gap: 8px; margin-top: 8px; }
.gate-list button { text-align: left; display: grid; gap: 2px; padding: 9px 12px; }
.gate-list button span { color: var(--ink-3); font-size: 13px; }
/* Who is signed in, at the bottom of the menu (as in FLG Forecast, Comp and Marketing), with Sign out just above it */
#whoami { margin-bottom: 10px; color: #c9d2e3; font-size: 13px; }
#whoami .who-mail { color: #8e9ab3; font-size: 11px; word-break: break-all; }
.rail a.rail-signout { margin-top: auto; border-top: 1px solid #2a3652; }
.rail a.rail-signout + .rail-foot { margin-top: 0; }
@media (max-width: 760px) { .rail a.rail-signout { margin-top: 0; border-top: 0; } }
@media print { .gate, .rail-signout { display: none !important; } }