/* Chieftaincy pages: the history timeline and the unit chooser. Everything else on these pages comes from the shared
   education layer (education.css / education-pages.css): .edu-page, .edu-hero, .edu-card, .edu-table, .edu-badge,
   .edu-detail-list, .edu-form-grid, .edu-section-nav. Colours come from the --cs-* tokens. */

/* ---------- Summary cards ---------- */
.ch-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--edu-gap, .75rem);
  margin-bottom: 1rem;
}

.ch-stat {
  min-width: 0;
  padding: .75rem .9rem;
  background: var(--cs-surface, #fff);
  border: 1px solid var(--cs-border, #d9e0dc);
  border-radius: var(--edu-radius, 10px);
}

.ch-stat__label {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cs-muted, #5a6a65);
}

.ch-stat__value {
  margin-top: .15rem;
  font-family: var(--edu-serif, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ch-stat__note {
  font-size: .78rem;
  color: var(--cs-muted, #5a6a65);
}

/* ---------- Timeline ---------- */
.ch-timeline {
  --ch-line: var(--cs-border, #d9e0dc);
  --ch-succession: var(--cs-primary, #0b6b5b);
  --ch-conflict: var(--cs-danger, #b4233a);
  --ch-dispute: var(--cs-warning, #a66b00);
  --ch-event: #3d5a80;
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0 0 0 2.4rem;
  list-style: none;
}

.ch-timeline::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: .95rem;
  width: 2px;
  background: var(--ch-line);
}

.ch-timeline__item {
  position: relative;
  margin-bottom: .85rem;
  min-width: 0;
}

.ch-timeline__dot {
  position: absolute;
  top: .85rem;
  left: -2.4rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: #fff;
  font-size: .85rem;
  background: var(--ch-kind, var(--ch-event));
  box-shadow: 0 0 0 4px var(--cs-page-bg-soft, #f6f8f4);
}

.ch-kind-succession { --ch-kind: var(--ch-succession); }
.ch-kind-conflict { --ch-kind: var(--ch-conflict); }
.ch-kind-dispute { --ch-kind: var(--ch-dispute); }
.ch-kind-event { --ch-kind: var(--ch-event); }

.ch-timeline__card {
  border-left: 3px solid var(--ch-kind, var(--ch-event));
}

.ch-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem .75rem;
}

.ch-timeline__when {
  font-weight: 600;
  font-size: .85rem;
  color: var(--cs-muted, #5a6a65);
}

.ch-timeline__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.ch-timeline__title {
  margin: .35rem 0 .1rem;
  font-family: var(--edu-serif, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ch-timeline__summary {
  font-size: .88rem;
  color: var(--cs-muted, #5a6a65);
  overflow-wrap: anywhere;
}

.ch-timeline__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
}

/* ---------- Unit chooser ---------- */
.ch-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--edu-gap, .75rem);
}

.ch-unit-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  text-align: left;
  cursor: pointer;
}

.ch-unit-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--cs-surface-tint, #edf2ef);
  color: var(--cs-primary, #0b6b5b);
}

.ch-unit-card__title {
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ch-unit-card__meta {
  display: block;
  font-size: .8rem;
  color: var(--cs-muted, #5a6a65);
  overflow-wrap: anywhere;
}

/* Detail panel: attached files */
.edu-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .25rem 0 1rem;
}

@media (max-width: 575.98px) {
  .ch-timeline { padding-left: 2rem; }
  .ch-timeline::before { left: .75rem; }
  .ch-timeline__dot { left: -2rem; width: 1.6rem; height: 1.6rem; font-size: .75rem; }
  .ch-timeline__actions .btn { flex: 1 1 auto; }
}

/* ---------- Date entry: year / month / day / approximate, one row for the start and one for the end ---------- */
.edu-form-grid.ch-date-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .edu-form-grid.ch-date-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.offcanvas .edu-form-grid {
  grid-template-columns: minmax(0, 1fr);
}