/* Circular Graph - Scalable & Dynamic Styles */
:root {
  --bg: var(--day-background, #223729);
  --panel: rgba(11,18,32,0.9);
  --accent: #8cd37c;
  --muted: #c7cabd;
  --text: var(--text-color, #e6eef8);
  
  /* Scalable sizing variables */
  --cg-size: min(92vw, 640px);
  --cg-box-min-width: 88px;
  --cg-box-max-width: 160px;
  --cg-box-padding: 10px 12px;
  --cg-box-font-size: 14px;
  --cg-box-border-radius: 10px;
  --cg-modal-max-width: 760px;
  --cg-modal-padding: 18px;
  --cg-stroke-width: 2.2px;
  --cg-hover-scale: 1.06;
  --cg-focus-scale: 1.14;
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 721px) {
  :root {
    --cg-size: min(88vw, 580px);
    --cg-box-min-width: 82px;
    --cg-box-max-width: 145px;
    --cg-box-font-size: 13px;
    --cg-modal-max-width: 680px;
  }
}

/* Mobile adjustments */
@media (max-width: 720px) {
  :root {
    --cg-size: min(94vw, 480px);
    --cg-box-min-width: 72px;
    --cg-box-max-width: 130px;
    --cg-box-padding: 8px 10px;
    --cg-box-font-size: 12px;
    --cg-box-border-radius: 8px;
    --cg-modal-padding: 12px;
    --cg-stroke-width: 1.8px;
    --cg-hover-scale: 1.04;
    --cg-focus-scale: 1.1;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  :root {
    --cg-size: 96vw;
    --cg-box-min-width: 64px;
    --cg-box-max-width: 110px;
    --cg-box-padding: 7px 9px;
    --cg-box-font-size: 11px;
    --cg-box-border-radius: 7px;
    --cg-stroke-width: 1.5px;
  }
}

#circular-graph-root {
  width: var(--cg-size);
  aspect-ratio: 1/1;
  position: relative;
  margin: 8px auto 24px;
  transition: width 0.3s ease;
}

.circular-graph {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  overflow: visible;
  display:block;
}

.circular-graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20; /* must be greater than .box z-index (currently 10) */
}

/* boxes */
.box {
  position: absolute;
  transform: translate(-50%,-50%) scale(1);   /* keep translate always present */
  transform-origin: center center;            /* scale around center */
  will-change: transform, box-shadow;
  min-width: var(--cg-box-min-width);
  max-width: var(--cg-box-max-width);
  padding: var(--cg-box-padding);
  border-radius: var(--cg-box-border-radius);
  background: var(--panel);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--cg-box-font-size);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
  z-index: 10;
  touch-action: manipulation;
  line-height: 1.3;
  word-break: break-word;
}

/* Hover and focused states: include the translate so element doesn't jump */
.box:hover {
  transform: translate(-50%,-50%) scale(var(--cg-hover-scale));
  box-shadow: 0 18px 40px rgba(140,211,124,0.18); /* subtle green glow */
  color: var(--text);
}

.box.focused {
  transform: translate(-50%,-50%) scale(var(--cg-focus-scale));
  box-shadow: 0 22px 60px rgba(140,211,124,0.28); /* stronger glow when focused */
  color: var(--text);
}

/* keep focus visible for keyboard users */
.box:focus {
  outline: none;
  box-shadow: 0 22px 60px rgba(140,211,124,0.28), 0 0 0 4px rgba(140,211,124,0.06);
}

/* modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--cg-modal-padding);
  backdrop-filter: blur(4px);
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

.modal .content {
  width: min(var(--cg-modal-max-width), 94vw);
  max-width: var(--cg-modal-max-width);
  background: linear-gradient(180deg,#0b1220,#081018);
  color: var(--text);
  border-radius: 12px;
  padding: var(--cg-modal-padding);
  box-shadow: 0 18px 80px rgba(0,0,0,0.6);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: modalSlideUp 0.25s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal .left { flex: 1 1 60%; }
.modal .right { flex: 0 0 220px; text-align: center; }
.modal h2 { margin: 0 0 8px; color: var(--accent); font-size: clamp(1.2rem, 3vw, 1.5rem); }
.modal p { margin: 0; font-size: clamp(13px, 2vw, 14px); line-height: 1.4; color: var(--text); opacity: .95; }

/* modal nav */
.modal .nav { 
  display: flex; 
  gap: 8px; 
  justify-content: center; 
  margin-top: 12px; 
  flex-wrap: wrap;
}
.modal .nav button {
  background: rgba(255,255,255,0.04);
  color: var(--accent);
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  font-size: clamp(12px, 2vw, 14px);
}

.modal .nav button:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.modal .nav button:active {
  transform: translateY(0);
}

/* nicer arrow appearance */
.circular-graph-svg path.cg-path {
  transition: stroke-width .18s ease, opacity .18s ease, filter .18s ease, stroke .18s ease;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
  stroke-width: var(--cg-stroke-width);
}

/* subtle hover emphasis */
.circular-graph-svg path.cg-path:hover {
  stroke-width: calc(1.6 * var(--cg-stroke-width));
  opacity: 1;
  filter: drop-shadow(0 6px 18px rgba(140,211,124,0.14));
  cursor: default; /* arrows are decorative but respond visually */
}

/* optional subtle motion: enable per-connection by setting c.motion = true */
.circular-graph-svg path.cg-path.motion {
  stroke-dasharray: 14 10;
  animation: cg-dash 5s linear infinite;
  /* make motion low-contrast so it's not distracting */
  opacity: 0.86;
}
@keyframes cg-dash {
  to { stroke-dashoffset: -24; }
}

/* ensure svg draws above boxes so arrowheads remain visible */
.circular-graph-svg { z-index: 20; pointer-events: none; }

/* responsive */
@media (max-width:720px) {
  .modal .content { 
    flex-direction: column; 
    padding: var(--cg-modal-padding);
    gap: 10px;
  }
  .modal .right { 
    width: 100%; 
    flex: 1 1 auto;
  }
  .modal .left {
    flex: 1 1 auto;
  }
  .box { 
    font-size: var(--cg-box-font-size); 
    min-width: var(--cg-box-min-width);
    max-width: var(--cg-box-max-width);
  }
}

@media (max-width: 480px) {
  .modal .content {
    max-height: 85vh;
  }
  .modal h2 {
    font-size: 1.1rem;
  }
  .modal .nav {
    gap: 6px;
  }
  .modal .nav button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Improve touch targets on mobile */
@media (pointer: coarse) {
  .box {
    min-height: 44px; /* iOS recommended touch target */
  }
  .modal .nav button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .box,
  .box:hover,
  .box.focused,
  .circular-graph-svg path.cg-path,
  .modal,
  .modal .content,
  .modal .nav button {
    transition: none;
    animation: none;
  }
  
  .circular-graph-svg path.cg-path.motion {
    animation: none;
    stroke-dasharray: none;
  }
}
/* ...existing code... */