/* Phases page styling */
.phases-page .phase-wrap{ display:grid; gap:1rem; }
.phases-page details.phase-item{
  background:var(--bg-200);
  border:1px solid var(--bg-300);
  border-radius:16px;
  overflow:hidden;
}
.phases-page details.phase-item[open]{ border-color:var(--primary-200); }
.phases-page details.phase-item.past{ opacity:.82; }
.phases-page details.phase-item.current{
  border:1px solid var(--primary-200);
  background:linear-gradient(135deg, rgba(255,87,51,.12), rgba(46,134,171,.12));
}
.phases-page summary.phase-summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.phases-page summary.phase-summary::-webkit-details-marker{ display:none; }
.phases-page .phase-title{ display:flex; flex-direction:column; gap:.2rem; }
.phases-page .phase-title strong{ font-size:1.05rem; }
.phases-page .phase-meta{ font-size:.9rem; color:var(--text-200); white-space:nowrap; }
.phases-page .phase-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}
.phases-page .phase-arrow{
  width:34px;
  height:34px;
  border:1px solid var(--bg-300);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  transition:background .15s ease, border-color .15s ease, transform .18s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.phases-page .phase-arrow .arrow-icon{
  width:14px;
  height:14px;
  transition:transform .18s ease;
  stroke:currentColor;
}
.phases-page details.phase-item[open] .phase-arrow{
  background:var(--primary-soft-10);
  border-color:var(--primary-200);
}
.phases-page details.phase-item[open] .phase-arrow .arrow-icon{
  transform:rotate(90deg);
}
.phases-page .phase-body{ padding:0 1.25rem 1.25rem; }
.phases-page .phase-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .75rem; }
.phases-page .pill{
  display:inline-flex;
  align-items:center;
  padding:.25rem .65rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--bg-300);
  background:var(--bg-200);
  color:var(--text);
}

.phases-page .phase-controls{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.75rem;
}
.phases-page .pill.primary{ border-color:var(--primary-200); background:rgba(255,87,51,.14); }
.phases-page .pill.accent{ border-color:var(--accent-200); background:rgba(46,134,171,.14); }
.phases-page .phase-schedule-link-wrap{
  text-align:right;
  margin-top:-.2rem;
}
.phases-page .phase-schedule-link-wrap--left{
  text-align:left;
  margin-top:.75rem;
}
.phases-page .phase-schedule-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .9rem;
  border-radius:999px;
  background:var(--bg-300);
  color:var(--text);
  border:1px solid var(--bg-300);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.phases-page .phase-schedule-link:hover{
  background:var(--bg-400);
  border-color:var(--text-200);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.phases-page .phase-grid{ display:grid; gap:1rem; }
@media (min-width: 768px){
  .phases-page .phase-grid{ grid-template-columns:1.25fr .75fr; }
}
.phases-page .mini{ font-size:.9rem; color:var(--text-200); margin-bottom:0; }
.phases-page .callouts{ margin-top:.75rem; }
.phases-page .callouts ul{ margin-top:.5rem; }
.phases-page .section-title{ margin-top:.75rem; }

/* Yearly overview (phases.html) */
.phase-year-wrap { display: grid; gap: 1rem; }
.phase-year-grid { display: grid; gap: 1rem; }
@media (min-width: 900px){ .phase-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.phase-year-card{
  background: var(--bg-200);
  border: 1px solid var(--bg-300);
  border-radius: 16px;
  padding: 1.1rem 1.15rem;
}
.phase-year-card h3{ margin: 0 0 .25rem; }
.phase-year-meta{ color: var(--text-200); font-size: .92rem; margin: 0 0 .6rem; }
.phase-year-bullets{ margin: 0.5rem 0 0; }
.phase-year-bullets li + li{ margin-top: .25rem; }

.phase-chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  border: 1px solid var(--bg-300);
  background: rgba(0,0,0,.08);
  color: var(--text);
  white-space: nowrap;
}
.phase-chip.primary{
  border-color: var(--primary-200);
  background: rgba(255,87,51,.14);
}