/* charts.css — Graficos: mandala, radar, pinnacles, timeline */

/* ═══ MANDALA ═══ */
.mandala-wrap {
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:28px; padding:28px 0 16px;
  width:100%;
}
.mandala-svg {
  width: min(320px, 80vw);
  height: min(320px, 80vw);
  overflow:visible;
  display:block;
}
@media (min-width: 821px) {
  .mandala-svg {
    width: 300px;
    height: 300px;
  }
}
@media (max-width: 480px) {
  .mandala-svg {
    width: min(260px, 88vw);
    height: min(260px, 88vw);
  }
}
.mandala-legend { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--dim); letter-spacing:.06em; }
.mandala-legend-item { display:flex; align-items:center; gap:5px; }
.mandala-legend-dot { width:6px; height:6px; border-radius:50%; }

/* ═══ CYCLES TIMELINE ═══ */
.cycles-timeline { background:var(--panel); border:1px solid var(--bg-gold); border-radius:var(--r-lg); overflow:hidden; margin-bottom:20px; }
.cycle-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--bg-gold); }
.cycle-row:last-child { border-bottom:none; }
.cycle-row.current-cycle { background:rgba(201,168,76,.04); }
.cycle-label { font-family:'JetBrains Mono',monospace; font-size:.60rem; color:var(--muted); letter-spacing:.10em; width:28px; flex-shrink:0; }
.cycle-num { font-family:'PT Serif',serif; font-size:1.4rem; color:var(--gold-dim); width:30px; flex-shrink:0; text-align:center; line-height:1; }
.cycle-num.is-master { color:var(--gold); }
.cycle-bar-track { flex:1; height:6px; background:var(--bg-gold); border-radius:3px; overflow:hidden; }
.cycle-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); transition:width .8s cubic-bezier(.25,.1,.25,1); }
.cycle-bar-fill.current { background:linear-gradient(90deg,var(--gold),var(--gold2)); }
.cycle-ages { font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--dim); letter-spacing:.04em; white-space:nowrap; flex-shrink:0; }
.cycle-current-badge { font-family:'JetBrains Mono',monospace; font-size:.50rem; color:var(--gold); background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.25); border-radius:10px; padding:1px 6px; letter-spacing:.08em; flex-shrink:0; }

/* ═══ PINNACLES CHART ═══ */
.pinnacles-chart { display:flex; align-items:flex-end; gap:8px; padding:20px 16px 0; background:var(--panel); border:1px solid var(--bg-gold); border-radius:var(--r-lg); margin-bottom:20px; height:200px; position:relative; }
.pinnacles-chart::after { content:''; position:absolute; bottom:52px; left:16px; right:16px; height:1px; background:var(--bg-gold); }
@media (max-width:820px) { .pinnacles-chart { height:160px; } }
.pinnacle-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; padding-bottom:48px; }
.pinnacle-bar { width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--gold),var(--gold-dim)); min-height:4px; position:relative; }
.pinnacle-bar.current-pin { background:linear-gradient(180deg,var(--gold2),var(--gold)); box-shadow:0 0 12px rgba(201,168,76,.2); }
.pinnacle-bar-num { font-family:'PT Serif',serif; font-size:.9rem; color:var(--gold); position:absolute; top:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.pinnacle-footer { position:absolute; bottom:0; left:0; right:0; display:flex; gap:8px; padding:0 16px 12px; }
.pinnacle-footer-item { flex:1; text-align:center; }
.pinnacle-footer-label { font-family:'JetBrains Mono',monospace; font-size:.54rem; color:var(--muted); letter-spacing:.08em; display:block; }
.pinnacle-footer-ages { font-family:'JetBrains Mono',monospace; font-size:.50rem; color:var(--dim); letter-spacing:.04em; display:block; margin-top:1px; }
.pinnacle-current-label { font-family:'JetBrains Mono',monospace; font-size:.48rem; color:var(--gold); display:block; margin-top:1px; }

/* ═══ RADAR CHART ═══ */
.radar-wrap { display:flex; align-items:center; gap:20px; background:var(--panel); border:1px solid var(--bg-gold); border-radius:var(--r-lg); padding:20px; margin-bottom:20px; flex-wrap:wrap; }
.radar-legend { flex:1; min-width:120px; display:flex; flex-direction:column; gap:10px; }
.radar-legend-item { display:flex; align-items:center; gap:8px; }
.radar-legend-name { font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--muted); letter-spacing:.06em; flex:1; }
.radar-legend-count { font-family:'PT Serif',serif; font-size:1rem; color:var(--gold-dim); line-height:1; }
.radar-legend-item.dominant .radar-legend-count { color:var(--gold); }

/* ═══ NUM STRIP ═══ */
.num-strip { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.num-strip-item { background:var(--panel); border:1px solid var(--bg-gold); border-radius:var(--r); padding:6px 10px; display:flex; align-items:center; gap:6px; transition:background var(--t-fast) var(--ease); }
.num-strip-item:hover { background:var(--panel2); }
.num-strip-item.is-master { border-color:rgba(201,168,76,.4); }
.num-strip-item.is-karmic { border-color:rgba(181,43,10,.3); }
.num-strip-n { font-family:'PT Serif',serif; font-size:1.1rem; color:var(--gold-dim); line-height:1; }
.num-strip-item.is-master .num-strip-n { color:var(--gold); }
.num-strip-item.is-karmic .num-strip-n { color:#b52b0a; }
.num-strip-lbl { font-family:'JetBrains Mono',monospace; font-size:.52rem; color:var(--dim); letter-spacing:.06em; line-height:1.3; }

/* ═══ TAB ICONS + ANIMATION ═══ */
.map-tab { flex:1; padding:8px 6px; background:transparent; border:none; border-radius:var(--r); cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); display:flex; flex-direction:column; align-items:center; gap:3px; }
.map-tab-icon { font-size:.80rem; line-height:1; }
.map-tab:hover { color:var(--gold); background:var(--bg-gold); }
.map-tab.active { background:var(--bg-gold); color:var(--gold); border:1px solid rgba(201,168,76,.25); }

/* ═══ PANEL FADE ═══ */
.map-panel { display:none; }
.map-panel.active { display:block; animation:panelFadeIn 220ms var(--ease) both; }
@keyframes panelFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ═══ UX HINTS ═══ */
.input-hint { font-family:'JetBrains Mono',monospace; font-size:.54rem; color:var(--dim); letter-spacing:.06em; text-align:center; margin-top:8px; }
.input-hint kbd { background:var(--panel2); border:1px solid rgba(201,168,76,.2); border-radius:3px; padding:1px 5px; font-family:inherit; font-size:inherit; }
.tab-nav-hint { font-family:'JetBrains Mono',monospace; font-size:.50rem; color:var(--dim); letter-spacing:.08em; text-align:center; margin-top:-14px; margin-bottom:18px; opacity:.5; }
@media (max-width:820px) {
  .tab-nav-hint { display:none; }
  .pinnacles-chart { height:140px; }
  .radar-wrap { flex-direction:column; }
}

/* ═══ TILE HOVER LIFT ═══ */
.s-tile { transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease); }
.s-tile:hover { transform:translateY(-2px); }
.cards-grid .num-card:nth-child(1) { animation-delay:0ms; }
.cards-grid .num-card:nth-child(2) { animation-delay:60ms; }
.cards-grid .num-card:nth-child(3) { animation-delay:120ms; }