/* Phase 9.8: Settings, Bot & Risk and Evaluation open as a modal over the
   dashboard (a large centred panel below the top bar from 1024px, a
   full-screen sheet below), scrolling internally while the page behind stays
   put.

   Stacking (see dashboard.css for the rest): backdrop 50, modal 51. Everything
   of the dashboard, the top bar included, sits under the backdrop; the modal
   has its own panel navigation and Close. Only the market drawer (58/59) and
   the help popover (1000) may appear above the modal. */
:root { --pos: #16a34a; --neg: #dc2626; }
@media (prefers-color-scheme: dark) { :root { --pos: #4ade80; --neg: #f87171; } }

/* Scroll lock on the viewport. dashboard.css sets overflow on <html>, so the
   lock has to live there too (a body lock would not propagate to the viewport).
   The scroll offset is kept and the sticky top bar stays stuck. From 1024px,
   where the modal is a centred panel with the page visible around it, the
   scrollbar gutter stays reserved so the page width does not change while the
   modal is open (below that the sheet covers the page and phones use overlay
   scrollbars anyway). */
html.modal-open { overflow: hidden; }
@media (min-width: 1024px) { html { scrollbar-gutter: stable; } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 50; }
.modal { position: fixed; z-index: 51; inset: 0; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--card); flex: none; flex-wrap: wrap; }
.modal-title { font-size: 16px; font-weight: 700; margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); }
.modal-sub { flex: 1 1 auto; display: none; }
.modal-nav { display: flex; gap: 2px; margin-left: auto; }
.modal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; color: var(--muted); font-size: 11px; border-bottom: 2px solid transparent; }
.modal-nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.modal-close { min-height: 44px; }
.modal-body { flex: 1 1 auto; overflow: auto; padding: 10px 10px 24px; -webkit-overflow-scrolling: touch; }
.modal-body .panel { max-width: 1160px; margin: 0 auto; }
.modal-body .panel .card { margin-bottom: 14px; }
.modal-body .panel > p.sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.modal-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 16px; border-top: 1px solid var(--border); background: var(--card); font-size: 11px; color: var(--muted); flex: none; }
.strip-build { margin-left: auto; align-self: center; font-size: 11px; }
@media (min-width: 1024px) {
  /* A centred panel that starts just below the top bar (--topbar-h follows its rendered height)
     and ends above the bottom edge; its size never depends on what is mounted inside it. */
  .modal { top: calc(var(--topbar-h) + 10px); bottom: 10px; left: 50%; right: auto; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); }
  .modal-head { padding: 8px 16px; }
  .modal-sub { display: block; }
  .modal-nav a { padding: 0 10px; font-size: 12px; }
  .modal-body { padding: 14px 16px 24px; }
}
@media (max-width: 479px) { .modal-nav { order: 3; flex: 1 1 100%; } }
@media (max-width: 767px) { .strip-build { flex: 1 1 100%; margin-left: 0; } }