/**
 * MagnusPrime - 10. Archive Map
 * Interactive Archive Explorer styles extracted from page-archive-index.php.
 *
 * Dependencies:
 * - 00-magnusprime-tokens.css
 * - 03-magnusprime-components.css
 */

/* The global tokens file (00-magnusprime-tokens.css) already sets
   html, body background/overflow-x more completely (it also sets
   width/max-width) — the local copy that used to be here was a
   redundant subset, removed. */

.mp-nodemap-wrap {
  background: var(--mp-bg);
  min-height: 100vh;
  color: rgba(245,248,255,.92);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.mp-nodemap-header {
  position: relative;
  padding: 2.5rem 2rem 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.mp-nodemap-title {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
}

.mp-nodemap-sub {
  font-size: .85rem;
  color: rgba(245,248,255,.5);
  margin: 0;
}

.mp-nodemap-eyebrow {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(140,220,255,.7);
  margin-bottom: .4rem;
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.mp-nodemap-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.mp-nodemap-legend-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: rgba(245,248,255,.55);
}

.mp-nodemap-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── Explorer controls ──────────────────────────────────────────────────── */
.mp-explorer-control-groups {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem 1rem;
  display: grid;
  gap: .8rem;
}

.mp-explorer-control-group {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}

.mp-explorer-control-label {
  padding-top: .45rem;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,248,255,.3);
}

.mp-explorer-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.mp-map-pill {
  border: 1px solid rgba(120,200,255,.18);
  border-radius: 999px;
  padding: .38rem .78rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  color: rgba(245,248,255,.6);
  background: rgba(10,12,18,.3);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.mp-map-pill:hover {
  border-color: rgba(140,220,255,.35);
  color: rgba(245,248,255,.9);
  transform: translateY(-1px);
}

.mp-map-pill.is-active {
  background: rgba(140,220,255,.15);
  border-color: rgba(140,220,255,.4);
  color: rgba(140,220,255,.95);
}

.mp-type-pill[data-type="genre"].is-active {
  background: rgba(95,210,220,.12);
  border-color: rgba(95,210,220,.35);
  color: rgba(95,210,220,.95);
}

.mp-type-pill[data-type="movement"].is-active {
  background: rgba(115,155,255,.12);
  border-color: rgba(115,155,255,.35);
  color: rgba(115,155,255,.95);
}

.mp-type-pill[data-type="theme"].is-active {
  background: rgba(210,150,255,.12);
  border-color: rgba(210,150,255,.35);
  color: rgba(210,150,255,.95);
}

.mp-focus-pill.is-active {
  background: rgba(245,248,255,.9);
  border-color: transparent;
  color: #05070b;
}

@media (max-width: 700px) {
  .mp-explorer-control-groups {
    padding: 0 1.25rem .85rem;
  }

  .mp-explorer-control-group {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .mp-explorer-control-label {
    padding-top: 0;
  }
}


/* ── Explorer controls ───────────────────────────────────────────────────── */
.mp-explorer-toolbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem 1rem;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: .75rem;
  align-items: center;
}

.mp-explorer-search-wrap {
  position: relative;
}

.mp-explorer-search {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(120,200,255,.18);
  border-radius: 999px;
  background: rgba(10,12,18,.42);
  color: rgba(245,248,255,.92);
  padding: .7rem 2.75rem .7rem 1rem;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.mp-explorer-search::placeholder {
  color: rgba(245,248,255,.32);
}

.mp-explorer-search:focus {
  border-color: rgba(140,220,255,.42);
  background: rgba(10,12,18,.62);
  box-shadow: 0 0 0 3px rgba(140,220,255,.06);
}

.mp-explorer-search-clear {
  position: absolute;
  top: 50%;
  right: .7rem;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(245,248,255,.45);
  cursor: pointer;
}

.mp-explorer-search-clear:hover {
  color: rgba(245,248,255,.9);
  background: rgba(140,220,255,.08);
}

.mp-explorer-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mp-explorer-status {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem .8rem;
  color: rgba(245,248,255,.42);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mp-explorer-status strong {
  color: rgba(140,220,255,.82);
  font-weight: 600;
}

.mp-map-pill[data-filter="genre"].is-active {
  color: rgba(140,220,255,.95);
}

.mp-map-pill[data-filter="movement"].is-active {
  color: rgba(120,175,255,.95);
}

.mp-map-pill[data-filter="theme"].is-active {
  color: rgba(190,160,255,.95);
}

@media (max-width: 700px) {
  .mp-explorer-toolbar {
    grid-template-columns: 1fr;
    padding: 0 1.25rem .85rem;
  }

  .mp-explorer-actions {
    justify-content: flex-start;
  }

  .mp-explorer-status {
    padding: 0 1.25rem .75rem;
  }
}

/* ── Archive Explorer workspace ─────────────────────────────────────────── */
.mp-explorer-workspace {
  width: min(1480px, calc(100% - 2rem));
  margin: .25rem auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1rem;
  align-items: stretch;
}
.mp-nodemap-stage {
  position: relative;
  width: 100%;
  height: clamp(820px, 82vh, 1120px);
  min-height: 820px;
  overflow: hidden;
  border: 1px solid rgba(120,200,255,.08);
  border-radius: 1.2rem;
  background: radial-gradient(900px 560px at 50% 46%, rgba(10,14,24,.48), rgba(5,7,11,.18) 70%), rgba(5,7,11,.28);
  cursor: grab;
  touch-action: none;
}
.mp-nodemap-stage:active { cursor: grabbing; }
#mpNodeMapCanvas { width:100%; height:100%; display:block; }
.mp-node-inspector {
  position: sticky; top: 1rem; height: clamp(820px, 82vh, 1120px); min-height:820px; overflow:auto;
  border:1px solid rgba(120,200,255,.08); border-radius:1.2rem;
  background: radial-gradient(420px 280px at 85% 0%, rgba(140,220,255,.08), transparent 70%), rgba(10,12,18,.50);
  box-shadow:0 22px 65px rgba(0,0,0,.35); padding:1.2rem;
}
.mp-inspector-empty { min-height:100%; display:flex; flex-direction:column; justify-content:center; }
.mp-inspector-kicker,.mp-inspector-type,.mp-inspector-label { font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(140,220,255,.74); }
.mp-inspector-empty-title { margin:.7rem 0 .55rem; font-size:1.35rem; color:rgba(245,248,255,.94); }
.mp-inspector-empty p { margin:0; color:rgba(245,248,255,.52); font-size:.86rem; line-height:1.6; }
.mp-inspector-content { display:flex; flex-direction:column; min-height:100%; }
.mp-inspector-topline { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.mp-inspector-count { font-size:.7rem; color:rgba(245,248,255,.42); }
.mp-inspector-art{
    width:min(100%,220px);
    margin:.75rem auto 1rem;
    aspect-ratio:2 / 3;
    overflow:hidden;
    border:1px solid rgba(120,200,255,.12);
    border-radius:.85rem;
    background:rgba(5,7,11,.65);
}

.mp-inspector-art img{
    width:100%;
    height:100%;
    object-fit:cover;

    /* Keep the subject higher in frame */
    object-position:center 18%;

    display:block;
}
.mp-inspector-title { margin:1rem 0 .55rem; font-size:1.45rem; line-height:1.1; color:rgba(245,248,255,.96); }
.mp-inspector-summary { margin:0; color:rgba(245,248,255,.62); font-size:.86rem; line-height:1.6; }
.mp-inspector-divider { height:1px; margin:1rem 0; background:rgba(120,200,255,.10); }
.mp-inspector-section { margin-bottom:1rem; }
.mp-inspector-connections { display:grid; gap:.5rem; margin-top:.7rem; }
.mp-inspector-connection { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.58rem .65rem; border:1px solid rgba(120,200,255,.10); border-radius:.75rem; background:rgba(5,7,11,.28); color:rgba(245,248,255,.72); font-size:.76rem; text-decoration:none; }
.mp-inspector-connection:hover { border-color:rgba(140,220,255,.28); color:rgba(245,248,255,.94); background:rgba(140,220,255,.06); }
.mp-inspector-connection-type { color:rgba(140,220,255,.55); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.mp-inspector-more { color:rgba(245,248,255,.38); font-size:.72rem; }
.mp-inspector-open { margin-top:auto; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.7rem .9rem; border:1px solid rgba(140,220,255,.28); border-radius:999px; color:rgba(140,220,255,.9); background:rgba(140,220,255,.07); text-decoration:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.mp-inspector-open:hover { color:rgba(245,248,255,.96); border-color:rgba(140,220,255,.48); background:rgba(140,220,255,.12); }

/* ── Mobile responsive ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .mp-nodemap-header {
    padding: 1.5rem 1.25rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
  }

  .mp-nodemap-title { font-size: 1.6rem; }
  .mp-nodemap-sub { font-size: .78rem; }

  .mp-nodemap-legend {
    gap: .85rem;
    font-size: .7rem;
  }
  .mp-nodemap-legend-item { font-size: .7rem; }

  .mp-map-pill {
    font-size: .7rem;
    padding: .32rem .65rem;
    /* Larger tap target on touch devices */
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }

  .mp-explorer-workspace { width:min(100% - 1.25rem, 100%); grid-template-columns:1fr; gap:.75rem; }
  .mp-nodemap-stage { height:74vh; min-height:580px; border-radius:1rem; }
  .mp-node-inspector { position:static; height:auto; min-height:320px; border-radius:1rem; }
  .mp-nodemap-hint { font-size:.62rem; bottom:.85rem; padding:0 1rem; text-align:center; white-space:normal; }
}

/* ── Instructions ────────────────────────────────────────────────────────── */
.mp-nodemap-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,248,255,.2);
  white-space: nowrap;
  pointer-events: none;
}