/* Hidden file input */
  #file-input { display: none; }

  /* --- Modal --- */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 200;
    /* Anchor the modal horizontally centered and at a fixed top offset so it
       doesn't visually re-center when its content changes size. Height grows
       downward from a stable top edge. */
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
  }

  .modal-overlay.open {
    display: flex;
  }

  /* When a sticky PETSCII picker is open inside a modal, the modal overlay
     becomes position:absolute so it scrolls with the page. That lets the
     picker (placed below the input in document coords) be scrolled into
     view if it extends past the viewport; the modal moves up in tandem.
     JS scrolls the page to 0 on flip so the modal stays in viewport. */
  body.sticky-picker-in-modal > .modal-overlay {
    position: absolute;
    min-height: 100vh;
  }

  .modal {
    background: var(--bg-panel);
    border: 2px solid var(--accent);
    border-radius: 4px;
    width: auto;
    min-width: 460px;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 0 1px var(--border);
  }

  /* Fixed-size variants: apply to .modal to prevent content-driven resize
     (e.g. when switching tabs inside the modal body). */
  .modal.modal-sm  { width: 460px;  min-width: 460px; }
  .modal.modal-md  { width: 560px;  min-width: 560px; }
  .modal.modal-lg  { width: 720px;  min-width: 720px; }
  .modal.modal-xl  { width: 900px;  min-width: 900px; }
  .modal.modal-xxl { width: 1100px; min-width: 1100px; }

  .modal-title {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: bold;
    background: var(--selected-bg);
    color: var(--selected-text);
    border-bottom: 2px solid var(--accent);
    flex-shrink: 0;
  }

  .modal-body {
    padding: 16px;
    /* Both axes: lets wide content (hex tables, sector grids, side-by-side
       compare) scroll horizontally inside the body when the modal frame
       is narrower than the content — the page itself never has to scroll. */
    overflow: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    font-size: 13px;
    line-height: 1.7;
  }

  .modal-body ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
  }

  .modal-body ul li {
    padding: 1px 0;
  }

  .modal-body .log-error {
    color: var(--color-error);
  }

  .modal-body .log-warning {
    color: var(--color-warn);
  }

  .modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .modal-footer-split {
    justify-content: space-between;
  }
  .modal-footer-actions, .modal-footer-nav {
    display: flex;
    gap: 8px;
  }

  .modal-footer button {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 20px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--selected-bg);
    color: var(--selected-text);
    cursor: pointer;
  }

  .modal-footer button:hover:not(:disabled) {
    background: var(--accent);
    color: var(--bg);
  }

  .modal-footer button:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .modal-btn-secondary {
    background: transparent !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
  }

  .modal-btn-secondary:hover {
    background: var(--hover) !important;
    color: var(--text) !important;
  }

  /* --- Split dropdown button: main action + arrow that opens popup menu --- */
  .dropdown-btn-wrap {
    position: relative;
    display: inline-flex;
  }

  .dropdown-btn-wrap .dropdown-btn-main,
  .dropdown-btn-wrap .dropdown-btn-arrow {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 16px;
    border: 1px solid var(--accent);
    background: var(--selected-bg);
    color: var(--selected-text);
    cursor: pointer;
  }

  .dropdown-btn-wrap .dropdown-btn-main {
    border-radius: 3px 0 0 3px;
    border-right: none;
  }

  .dropdown-btn-wrap .dropdown-btn-arrow {
    border-radius: 0 3px 3px 0;
    padding: 6px 8px;
  }

  .dropdown-btn-wrap .dropdown-btn-main:hover,
  .dropdown-btn-wrap .dropdown-btn-arrow:hover {
    background: var(--accent);
    color: var(--bg);
  }

  .dropdown-btn-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bg-panel);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 4px 0;
    margin-bottom: 4px;
    z-index: 210;
    min-width: 100%;
    box-shadow: 0 -4px 16px rgba(0,0,0,.4);
  }

  .dropdown-btn-menu.open {
    display: block;
  }

  .dropdown-btn-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
  }

  .dropdown-btn-menu-item:hover {
    background: var(--hover);
  }

  .dropdown-btn-menu-item.disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* --- Progress bar --- */
  .progress-track {
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 3px;
    height: 16px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.15s;
  }

  .modal-input {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    outline: none;
  }

  .modal-input:focus {
    border-color: var(--accent);
  }

  /* ── Phones ──────────────────────────────────────────────────────────
     Below 600px the size classes (sm/md/lg/xl/xxl, 460–1100px) make every
     modal wider than the screen and force horizontal page scroll. Drop
     the frame to viewport width regardless of which size was requested
     — wide content still scrolls horizontally inside .modal-body thanks
     to the base overflow:auto rule, so we don't lose any density. */
  @media (max-width: 600px) {
    .modal-overlay { padding-top: 0; }
    .modal,
    .modal.modal-sm,
    .modal.modal-md,
    .modal.modal-lg,
    .modal.modal-xl,
    .modal.modal-xxl {
      width: 100vw;
      min-width: 0;
      max-width: 100vw;
      max-height: 100vh;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
    .modal-title  { padding: 8px 12px; }
    .modal-body   { padding: 12px; }
    .modal-footer {
      padding: 8px 12px;
      /* Many modals have 3+ buttons (compare-disk navigation, viewer
         prev/next + actions); let them wrap rather than overflow. */
      flex-wrap: wrap;
    }
    .modal-footer button { padding: 6px 14px; }
  }