/* modal.css — project detail modal: overlay, panel, close button, art band, body, highlights, actions */
    /* ---------- project detail modal ---------- */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: linear-gradient(180deg, rgba(20, 20, 20, 0.55), rgba(0, 0, 0, 0.75));
      -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
      backdrop-filter: var(--glass-blur) var(--glass-saturate);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s var(--ease-out), visibility 0s linear 0.22s;
    }
    .modal.open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.22s var(--ease-out);
    }
    .modal-panel {
      position: relative;
      width: min(56rem, 100%);
      max-height: calc(100dvh - 2rem);
      overflow-y: auto;
      border-radius: 1rem;
      background: var(--glass-bg);
      -webkit-backdrop-filter: var(--glass-panel-blur) var(--glass-saturate);
      backdrop-filter: var(--glass-panel-blur) var(--glass-saturate);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      transform: scale(0.96) translateY(10px);
      transition: transform 0.4s var(--ease-spring);
    }
    .modal.open .modal-panel { transform: none; }
    .modal-close {
      position: absolute;
      top: 0.9rem;
      right: 0.9rem;
      z-index: 2; /* above the art's scanline overlay */
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 999px;
      /* rides the always-dark art band in both themes: pill bg stays fixed
         win-*; the glyph is themed Tokyo Night red (--red) by request */
      background: rgba(22, 24, 38, 0.82);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color: var(--red);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 0.72rem;
      transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.4s var(--ease-spring);
    }
    .modal-close:hover { color: var(--red); transform: scale(1.06); }
    .modal-close:active { color: color-mix(in srgb, var(--red) 70%, white); transform: scale(0.94); }
    .modal-art { height: clamp(9rem, 28vh, 13rem); border-bottom: 1px solid var(--hairline); }
    .modal-art::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgba(230, 237, 240, 0.04) 0px,
        rgba(230, 237, 240, 0.04) 1px,
        transparent 1px,
        transparent 3px
      );
      pointer-events: none;
    }
    .modal-body { padding: 1.6rem 1.6rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
    .modal-body h3 {
      font-size: clamp(1.5rem, 3vw, 1.9rem);
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    #modal-sub {
      font-family: var(--font-mono);
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--ink-muted);
      margin-top: -0.55rem; /* hug the title */
      margin-bottom: -0.55rem; /* hug the description */
    }
    /* thick accent dot before the popup subtitle */
    #modal-sub::before {
      content: "";
      display: inline-block;
      width: 0.42em;
      height: 0.42em;
      border-radius: 50%;
      background: var(--neon);
      margin-right: 0.55em;
    }
    #modal-tags {
      margin-top: -0.35rem; /* tighten against neighbors */
      margin-bottom: -0.35rem;
    }
    .modal-body > p { color: var(--ink-muted); font-size: 1rem; max-width: 56ch; }
    .modal-highlights {
      list-style: none;
      display: grid;
      gap: 0.55rem;
      padding: 1.1rem 1.25rem;
      border: 1px solid var(--hairline);
      border-radius: 0.75rem;
      background: rgba(122, 162, 247, 0.03);
    }
    .modal-highlights li {
      display: flex;
      align-items: baseline;
      gap: 0.7rem;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      color: var(--ink-muted);
    }
    .modal-highlights li::before {
      content: ">";
      color: var(--neon-dim);
      flex-shrink: 0;
    }
    .modal-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; padding-top: 0.25rem; }

    /* ---------- light theme: paper panel; art band + close stay dark over the terminal window ---------- */
    [data-theme="light"] .modal {
      background: linear-gradient(180deg, rgba(252, 252, 255, 0.55), rgba(252, 252, 255, 0.75));
    }
    [data-theme="light"] .modal-panel {
      background: var(--glass-bg);
      border-color: var(--glass-border);
      box-shadow: var(--glass-shadow);
    }
    [data-theme="light"] .modal-highlights { background: rgba(41, 89, 170, 0.05); }

    /* ---------- mobile performance: reduce backdrop-filter cost ---------- */
    @media (max-width: 767px) {
      .modal {
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
      }
      .modal-panel {
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
      }
      .modal-close {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }
    }

    /* ---------- reduced motion: disable backdrop-filter transitions ---------- */
    @media (prefers-reduced-motion: reduce) {
      .modal,
      .modal-panel,
      .modal-close {
        transition: none !important;
      }
    }