/* ————————————————————————————————————————————
   نتيجة٢٤ — أرشيف النتائج البصري
   رسوم بيانية على أرض ورقية بهوية الحبر والنحاس
   ———————————————————————————————————————————— */

.archive-main { padding-block: 40px 84px; }

/* التبويبات */
.arch-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.arch-tab {
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 24px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.arch-tab:hover { transform: translateY(-2px); }
.arch-tab.is-active {
  color: var(--navy);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--sand) 42%, var(--card));
}
:root[data-theme="dark"] .arch-tab.is-active { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .arch-tab.is-active { color: var(--ink); } }

/* لوحة الأرقام العليا */
.arch-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.arch-kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.arch-kpi b {
  display: block;
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--navy);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .arch-kpi b { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .arch-kpi b { color: var(--ink); } }
.arch-kpi span { font-size: .85rem; font-weight: 600; color: var(--muted); }
.arch-kpi em { font-style: normal; font-size: .82rem; font-weight: 700; }
.up { color: var(--green); }
.down { color: #A3402E; }

/* بطاقة الرسم */
.chart-card {
  padding: 26px 28px 20px;
  margin-bottom: 22px;
}
.chart-card h2 {
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
  line-height: 1.4;
}
:root[data-theme="dark"] .chart-card h2 { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart-card h2 { color: var(--ink); } }
.chart-card .chart-sub { font-size: .86rem; color: var(--muted); margin-bottom: 12px; }
.chart-wrap { position: relative; overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; min-width: 460px; }

/* عناصر الرسم */
.axis-line { stroke: var(--line); stroke-width: 1; }
.grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; opacity: .8; }
.axis-label { font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 600; fill: var(--muted); }
.axis-label.y { text-anchor: end; }
.axis-label.x { text-anchor: middle; }

.line-area { fill: url(#goldFade); opacity: 0; transition: opacity .8s ease .5s; }
.line-area.in { opacity: 1; }
.line-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-dot { fill: var(--card); stroke: var(--gold); stroke-width: 2; cursor: pointer; transition: r .15s; }
.line-dot:hover { r: 7; }
.line-dot.last { fill: var(--green); stroke: var(--green); }
.dot-value { font-family: 'Amiri', serif; font-size: 13px; font-weight: 700; fill: var(--navy); text-anchor: middle; }
:root[data-theme="dark"] .dot-value { fill: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot-value { fill: var(--ink); } }

/* أعمدة الشعب */
.bar-rect { transition: none; cursor: pointer; }
.bar-rect:hover { opacity: .82; }
.bar-value { font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 700; fill: var(--navy); text-anchor: middle; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .bar-value { fill: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar-value { fill: var(--ink); } }
.bar-group-label { font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; fill: var(--muted); text-anchor: middle; }

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* التلميح */
.chart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--navy);
  color: var(--on-navy);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity .15s;
  z-index: 5;
  box-shadow: var(--shadow-lift);
}
.chart-tip.show { opacity: 1; }
.chart-tip b { color: var(--gold-soft); font-family: 'Amiri', serif; font-size: 1rem; }
.chart-tip small { display: block; color: var(--on-navy-muted); font-weight: 500; font-size: .74rem; margin-top: 2px; }

/* الخط الزمني للسنوات */
.arch-years { margin-top: 8px; }
.arch-years h2 {
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
  text-align: center;
  margin-bottom: 20px;
}
:root[data-theme="dark"] .arch-years h2 { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .arch-years h2 { color: var(--ink); } }
.year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.year-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.year-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-gold); }
.year-card.peak { border-top: 3px solid var(--green); }
.year-card.low { border-top: 3px solid #A3402E; }
.year-tag {
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.year-rate {
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--navy);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .year-rate { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .year-rate { color: var(--ink); } }
.year-rate small { font-size: .9rem; }
.year-delta { font-size: .82rem; font-weight: 700; margin-top: 2px; }
.year-meta { font-size: .8rem; color: var(--muted); margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.year-badge {
  position: absolute;
  top: 16px;
  inset-inline-end: 18px;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}
.year-badge.peak { color: var(--green); background: var(--green-tint); }
.year-badge.low { color: #A3402E; background: color-mix(in srgb, #A3402E 10%, transparent); }

.sources-note {
  max-width: 900px;
  margin: 28px auto 0;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  line-height: 2.1;
}
.sources-note a { color: var(--gold); text-decoration: none; }
.sources-note a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .chart-card { padding: 20px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .line-area, .line-path, .bar-rect, .chart-tip { transition: none !important; }
}