/* ========== Reset & Base ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #233d4d;
  --primary-dk: #1b2f3a;
  --ink: #1f2937;
  --muted: #6b7280;
  --card: #ffffff;
  --ring: #0f9bff;
  --shadow: 0 10px 25px rgba(0,0,0,.15);
  --radius: 16px;
  --sidebar-w: 220px;
  --rag-red: #ef233c;
  --rag-amber: #ffc300;
  --rag-green: #2f8d64;
  --rag-dk-green: #0b5d2a;
  --rag-red-text: #fff;
  --rag-amber-text: #111;
  --rag-green-text: #fff;
  --rag-dk-green-text: #fff;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f2f8, #e6e9f0);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  padding: 0 2rem 2rem;
}

body.dashboard-page, body.map-page {
  --rag-red: #ff3b55;
  --rag-amber: #ffcf33;
  --rag-green: #5fd99a;
  --rag-dk-green: #2ecc71;
  --rag-green-text: #111;
  --rag-dk-green-text: #111;
}

/* ========== Layout ========== */
nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: #0e1a2e;
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 4px 0 16px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  z-index: 1000;
}

/* Brand block */
.nav-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .75rem 1rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-brand i {
  font-size: 1.75rem;
  color: var(--ring);
}
.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nav-brand-name {
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: .06em;
}
.nav-brand-sub {
  font-size: .7rem;
  color: #6b7a8d;
  font-weight: 500;
}

nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  color: #8899aa;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  outline: none;
  transition: background .15s, color .15s;
}
nav a i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
nav a.active { background: rgba(15,155,255,.15); color: var(--ring); }

/* Placeholder "coming soon" links */
nav a.nav-soon {
  opacity: .45;
  cursor: default;
  pointer-events: none;
  position: relative;
}
nav a.nav-soon::after {
  content: "SOON";
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0e1a2e;
  background: #6b7a8d;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
}

/* Separator between real and placeholder links */
.nav-separator {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: .35rem .75rem;
}

/* Put the back arrow at the bottom of the nav by default */
nav .nav-back { margin-top: auto; align-self: flex-start; }

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
  padding-left: calc(var(--sidebar-w) + 2.5rem);
}

/* ========== Typography ========== */
h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  text-align: center;
  background: linear-gradient(90deg, #232526, #0f9bff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  text-align: center;
  margin: 1rem 0;
}

h3 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  text-align: center;
  color: #6b7280;
  margin: 0.75rem 0 1rem;
  line-height: 1.3;
}

h1, h2 { text-decoration: none !important; }
h1 a, h2 a { color: inherit !important; text-decoration: none !important; pointer-events: none; }
.muted { color: var(--muted); }

/* ========== Accessibility: focus styles ========== */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}

a.button-outline:focus-visible,
.button-solid:focus-visible,
nav a:focus-visible,
.nav-back:focus-visible {
  box-shadow: 0 0 0 3px rgba(15,155,255,.25);
}

/* ========== Button Grid (Activities layout) ========== */
ul.btn-grid {
  list-style: none;
  margin: 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

ul.btn-grid li { position: relative; width: 400px; }
ul.btn-grid li button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

/* Activity buttons */
a.button-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 100px;
  gap: 8px;
  border: 1px solid lightgrey;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  background: #fff;
  color: #333;
  padding: 10px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  width: 100%;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
}

a.button-outline:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* RAG colors + contrast-safe text */
a.button-outline.rag-R { background: var(--rag-red); color: var(--rag-red-text); }
a.button-outline.rag-A { background: var(--rag-amber); color: var(--rag-amber-text); }
a.button-outline.rag-G { background: var(--rag-green); color: var(--rag-green-text); }
a.button-outline.rag-D { background: var(--rag-dk-green); color: var(--rag-dk-green-text); }

/* Subtle press state */
a.button-outline:active,
.button-solid:active { transform: translateY(0); filter: saturate(1.02); }

/* Reset button */
#reset-activities {
  margin-top: 20px;
  padding: 10px;
  border: 2px solid #333;
  border-radius: 50%;
  background: #f9f9f9;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#reset-activities i { font-size: 20px; color: #333; }
#reset-activities:hover { background: #333; }
#reset-activities:hover i { color: #fff; transform: rotate(180deg); transition: transform 0.4s ease; }
.spin-once { animation: spin .5s linear 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Back button (inline style if used elsewhere) */
a.button-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 2px solid #333;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  background: #f9f9f9;
  color: #333;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  width: 100%;
}

a.button-back:hover { background: #333; color: #fff; transform: translateY(-1px); }

/* Activities reveal/hide */
ul.activities-grid > li.activity-item:not(:last-child)::before,
ul.activities-grid > li.activity-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* Vertical line between activities */
ul.activities-grid > li.activity-item:not(:last-child)::after {
  bottom: -80px;
  width: 2px;
  height: 80px;
  background-color: gray;
}

/* Arrowhead */
ul.activities-grid > li.activity-item:not(:last-child)::before {
  bottom: -80px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid gray;
}

/* ========== Popovers ========== */
:root{
  --deps-w: 500px;   /* dependency list width */
  --gap: 12px;       /* space from activity to popovers */
  --stack-gap: 14px; /* vertical gap between detail and deps */
}

/* Show popovers only when activity <li> is toggled open */
.hover-popover.is-open .popover { display: block; }

/* Wrapper to the right of the activity card */
.popovers-wrap{
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: var(--gap);
  z-index: 2000;
  width: var(--deps-w);
}

/* Dependency list box (anchors the detail box) */
.popover.dep-popover{
  position: relative;     /* anchor for the sovereignty box */
  width: 100%;
  max-height: none;
  overflow-y: visible;
  background: var(--card);
  color: #222;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

/* Sovereignty box above the deps list */
.popover.details-popover{
  position: absolute;
  bottom: calc(100% + var(--stack-gap));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;              /* match deps width; change to 90% if you prefer narrower */
  max-width: 100%;
  background: var(--card);
  color: #222;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  z-index: 2100;
}

/* Hide sovereignty box until it has content (no empty white box) */
.popover.details-popover:empty { display: none; }

/* scroll only the list inside */
.popover.dep-popover .dep-list{
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
}

/* 1) Completely hide dep-popover until content is loaded */
.dep-popover.hidden { 
  display: none !important;
}

/* 2) Only show the dep-popover when:
      - the activity is open, and
      - it's not in the 'hidden' state (i.e., content loaded) */
.hover-popover:not(.is-open) .dep-popover { 
  display: none !important;
}
.hover-popover.is-open .dep-popover:not(.hidden) { 
  display: block;
}

/* 3) Safety: if your .popover base style adds padding/border/background,
      neutralize them while hidden so no 'white box' flashes */
.dep-popover.hidden {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 0 !important;
}

/* 4) Optional: fade in when it appears */
.dep-popover {
  opacity: 0;
  transition: opacity 160ms ease-in;
}

.hover-popover.is-open .dep-popover:not(.hidden) {
  opacity: 1;
}

/* make each activity item a stacking context */
ul.activities-grid li.activity-item { position: relative; z-index: 1; }

.popover.dep-popover,
.popover.details-popover { z-index: 5100; background: var(--card); }
.dep-popover.hidden { pointer-events: none; }

/* Dependency list */
.dep-list {
  list-style: none;
  margin: 0;
  padding: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;  /* center all buttons */
  gap: 10px;            /* space between buttons */
}

.dep-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  overflow: visible;
  width: 100%;
}

.dep-item + .dep-item {
  margin-top: 6px;
}

.dep-text {
  line-height: 1.2;
  word-break: break-word;
  text-align: center;
  flex: 0 0 auto;       /* ✅ prevent stretching */
  margin: 0 auto;
  color: white;
  width: min(90%, 400px); /* ✅ optional width control */
}

/* Chip link for dependency labels */
.button-chip{
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

/* RAG tints inside popover rows */
.rag-R { background: var(--rag-red); }
.rag-A { background: var(--rag-amber); color: var(--rag-amber-text); }
.rag-G { background: var(--rag-green); }
.rag-D { background: var(--rag-dk-green); }
.rag-N { background: #e5e7eb; color: #000; }
.rag-N .dep-text { color: #000; }

/* Nested popover (Dependency → Sovereignty) */
.popover.sub-popover {
  position: absolute;
  left: calc(100% + 12px);   /* open neatly to the right */
  top: 0;
  min-width: 280px;
  max-width: 340px;
  background: var(--card);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  z-index: 4000;
  overflow: visible;
}

.sovereignty-card {
  width: 100%;
}

.sovereignty-card .mini-table {
  width: 100%;
  border-collapse: collapse;
}

.sovereignty-card .mini-table th,
.sovereignty-card .mini-table td {
  padding: .4rem .6rem;
  font-size: .95rem;
  text-align: left;
  vertical-align: top;
}

.sovereignty-card .mini-table th {
  width: 50%;
  color: var(--muted);
  font-weight: 600;
}

/* Cross-links in sovereignty popover */
.sov-other-acts {
  margin-top: .75rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: .85rem;
  line-height: 1.6;
}
.sov-act-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.04);
  font-size: .8rem;
  margin: 2px;
  color: var(--muted);
}
.sov-map-links {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.sov-map-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.sov-map-link:hover {
  background: var(--ring);
}
.sov-map-link i {
  font-size: .75rem;
}

/* ========== Tooltip (optional, used elsewhere) ========== */
.tip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0; top: 100%;
  transform: translateY(6px);
  background: #111;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  font-size: 12px;
  line-height: 1.25;
  white-space: pre; /* keep line breaks */
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 20;
}
.tip:focus::after,
.tip:hover::after { opacity: 1; }

/* --- Shared hero layout for all pages --- */
.hero-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.hero-title .muted {
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
  color: #6b7280;
}
.hero-img {
  display: block;
  width: 140px;
  height: auto;
  border-radius: 12px;
  margin-top: 0;
  margin-bottom: 3rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  opacity: 0.95;
  transition: transform .3s ease, opacity .3s ease;
}
.hero-img:hover { transform: scale(1.05) rotate(-2deg); opacity: 1; }
body.mission-page .hero-img { margin-bottom: 3.5rem; }

/* Responsive tweaks */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap: 1rem; }
  .hero-img{ max-width: 280px; margin: .5rem auto 0; }
  ul.activities-grid{ max-width: 640px; }
}

ul.btn-grid.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
  list-style: none;
  justify-items: stretch;
  align-items: stretch;
}

.mission-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.mission-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,.12);
}

/* Decorative glowing strip */
.mission-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 8px;
  background: linear-gradient(90deg, #0f9bff, #00b894, #0f9bff);
  opacity: 0;
  transition: opacity .3s ease;
}
.mission-card:hover::before { opacity: 1; }

/* Mission text */
.mission-card h3 {
  font-size: 1.5rem;
  margin: 1rem 0 .5rem;
  color: var(--ink);
  font-weight: 700;
}
.mission-card .mission-desc {
  font-size: 1rem;
  color: var(--muted);
  margin: .5rem 0 0;
}

/* Buttons */
.button-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: .75rem 1.25rem;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #0f9bff);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  cursor: pointer;
}
.button-solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, var(--primary-dk), #0d83d6);
}
.button-solid i { font-size: 1.3rem; }
.button-solid:hover i { animation: pulse 1s infinite alternate; }
@keyframes pulse {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(1.2); opacity: .85; }
}

/* Page transition */
body.page-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}