/* =================== حاسبات التاريخ (date_calculator.html) =================== */
/* الأزرار .dc-tab و .dc-res .copy خارج نمط الأزرار العام (:where() في forms.css). */

.dc-title { margin: 0 0 .4rem; font-size: 1.6em; display: flex; align-items: center; gap: .5rem; }
.dc-lead { opacity: .85; margin: 0 0 1.1rem; }

/* التبويبات */
.dc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 1.2rem; }
.dc-tab {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--main-bg-glass); border: var(--glass-border); color: var(--text-main);
  font: inherit; font-weight: 600; font-size: .95em; box-shadow: none;
  transition: background .15s, color .15s;
}
.dc-tab i { color: var(--primary); }
.dc-tab:hover { background: rgba(120, 140, 180, .12); }
.dc-tab.is-active { background: var(--accent); color: #fff; border-color: transparent; }
.dc-tab.is-active i { color: #fff; }
.dc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme='dark'] .dc-tab { background: var(--main-bg-glass); color: var(--text-main); }
:root[data-theme='dark'] .dc-tab:hover { background: rgba(120, 140, 180, .18); }
:root[data-theme='dark'] .dc-tab.is-active { background: #31495f; color: #fff; }

/* حقول التاريخ */
.dc-block + .dc-block { margin-top: 1rem; }
.dc-card-title { font-weight: 700; margin: 0 0 .6rem; color: var(--primary); }
.dc-input-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dc-field { display: flex; flex-direction: column; gap: 4px; }
.dc-field label { margin: 0; font-size: .85em; min-height: 1.2em; }
.dc-field select, .dc-field input { margin: 0; }
.dc-field.cal { min-width: 150px; }
.dc-field.num { width: 78px; }
.dc-field.num.wide { width: 120px; }
.dc-field.mon { min-width: 140px; }
.dc-field.yr { width: 96px; }
.dc-field.op { min-width: 96px; }
.dc-add-row { margin-top: 1rem; }

/* الخيارات */
.dc-options { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: .92em; }
.dc-options label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; margin: 0; color: var(--text-main); }
.dc-options input[type="checkbox"] { margin: 0; }
.dc-inline-select { width: auto; margin: 0; padding: 2px 6px; }

/* بطاقات التقاويم */
.dc-out { margin-top: 1rem; }
.dc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.dc-res {
  position: relative; border-radius: 14px; padding: 14px 16px;
  background: var(--main-bg-glass); border: 1px solid rgba(120, 140, 180, .25);
  box-shadow: 0 2px 10px rgba(74, 92, 124, .08);
}
.dc-res.is-src { outline: 2px solid var(--accent); }
.dc-res.is-target { background: rgba(120, 140, 180, .14); border-color: var(--accent); }
.dc-res .k { font-size: .82em; opacity: .75; display: flex; align-items: center; gap: 6px; }
.dc-res .v { font-size: 1.35em; font-weight: 800; margin-top: 4px; color: var(--text-main); }
.dc-res .s { font-size: .85em; opacity: .8; margin-top: 2px; min-height: 1.2em; }
.dc-res-top { display: flex; align-items: center; gap: 6px; }
.dc-res-top .k { flex: 1; min-width: 0; }
.dc-res .copy {
  margin: -6px 0; padding: 0; flex: none;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none; color: var(--text-main);
  opacity: .55; cursor: pointer; font-size: 1.1em; border-radius: 8px;
}
.dc-res .copy:hover, .dc-res .copy:focus-visible { opacity: 1; background: rgba(120, 140, 180, .15); }
.dc-res .copy.is-done { opacity: 1; color: #2e8b57; }
.dc-result-title { margin-top: .4rem; }

/* العمر والمدة: بطاقةٌ لكل تقويم بالترتيب المعتمد */
.dc-cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.dc-cal-card .v { font-size: 1.12em; }
.dc-cal-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(120, 140, 180, .35); }
.dc-cal-foot span { display: block; font-size: .8em; opacity: .75; }
.dc-cal-foot b { display: block; font-size: 1em; }
.dc-cal-grid + .dc-facts { margin-top: 10px; }
.dc-facts.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .dc-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-cal-grid > .dc-cal-card:last-child { grid-column: 1 / -1; }
}

/* الرقم الكبير والحقائق */
.dc-card { margin-top: 0; }
.dc-results + .dc-card { margin-top: 14px; }
.dc-actions + .dc-details { margin-top: 18px; }
.dc-details .dc-card-title { text-align: start; }
.dc-big { text-align: center; padding: 18px 10px 6px; }
.dc-big .n { font-size: 3em; font-weight: 900; color: var(--accent); line-height: 1.1; }
.dc-big .u { font-size: 1.1em; opacity: .85; margin-top: 6px; }
:root[data-theme='dark'] .dc-big .n { color: #e7effc; }
.dc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
/* صفوفٌ بعددٍ ثابت من الأعمدة (تفاصيل اليوم) */
.dc-facts + .dc-facts { margin-top: 10px; }
.dc-facts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-facts.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dc-facts.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dc-facts[class*='cols-'] .dc-fact { padding: 10px 8px; }
.dc-facts.cols-4 .dc-fact b, .dc-facts.cols-5 .dc-fact b { font-size: 1em; }
@media (max-width: 900px) {
  .dc-facts.cols-4 .dc-fact b, .dc-facts.cols-5 .dc-fact b { font-size: .9em; }
  .dc-facts.cols-4 .dc-fact span, .dc-facts.cols-5 .dc-fact span { font-size: .76em; }
}
.dc-fact {
  background: var(--main-bg-glass); border: 1px solid rgba(120, 140, 180, .25);
  border-radius: 12px; padding: 10px 12px; text-align: center;
}
.dc-fact b { display: block; font-size: 1.15em; }
.dc-fact span { font-size: .82em; opacity: .75; }

.dc-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dc-note { font-size: .85em; opacity: .8; margin-top: 14px; display: flex; gap: 7px; align-items: flex-start; }
.dc-out > .form-message { margin-bottom: .8rem; }

/* «كيف يُحسب؟» تحت كل تبويب */
.dc-helps { margin-top: 22px; }
.dc-help { padding: 0; overflow: hidden; }
.dc-help summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--primary);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.dc-help summary::-webkit-details-marker { display: none; }
.dc-help summary::after { content: '\25BE'; margin-inline-start: auto; transition: transform .2s; }
.dc-help[open] summary::after { transform: rotate(180deg); }
.dc-help-body { padding: 2px 18px 16px; line-height: 1.85; font-size: .95em; }
.dc-help-body h3 { font-size: 1em; margin: 14px 0 6px; color: var(--text-main); }
.dc-help-body ul { margin: 0; padding-inline-start: 1.3em; }
.dc-help-body ul ul { margin-top: 4px; }
.dc-help-body li { margin: 0; padding: 0; }
.dc-help-body li + li { margin-top: 4px; }
.dc-help-body p { margin: 6px 0; }
.dc-ex {
  background: var(--main-bg-glass); border-inline-start: 3px solid var(--accent);
  border-radius: 8px; padding: 8px 12px;
}
.dc-ex-inline { background: var(--main-bg-glass); border-radius: 6px; padding: 1px 6px; white-space: normal; }

@media (max-width: 600px) {
  .dc-results { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dc-res { padding: 10px 12px; }
  .dc-res .v { font-size: 1.08em; }
  .dc-tab { padding: 7px 12px; font-size: .88em; }
  .dc-big .n { font-size: 2.3em; }
  .dc-facts.cols-4, .dc-facts.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-facts.cols-5 > .dc-fact:last-child { grid-column: 1 / -1; }
  .dc-facts.cols-4 .dc-fact b, .dc-facts.cols-5 .dc-fact b { font-size: 1em; }
  .dc-facts.cols-4 .dc-fact span, .dc-facts.cols-5 .dc-fact span { font-size: .82em; }
  .dc-facts.cols-3 { gap: 6px; }
  .dc-facts.cols-3 .dc-fact { padding: 8px 4px; }
  .dc-facts.cols-3 .dc-fact b { font-size: 1em; }
}

/* صفحات الهبوط: نصّ المقالة، والأسئلة الشائعة، وأدوات ذات صلة */
.dc-article { margin-top: 22px; padding: 16px 20px; line-height: 1.9; }
.dc-article h2, .dc-faq h2, .dc-related h2 { font-size: 1.1em; margin: 0 0 8px; color: var(--primary); }
.dc-article p { margin: 0 0 10px; }
.dc-article p:last-child { margin-bottom: 0; }
.dc-article h2:not(:first-child) { margin-top: 18px; }
/* جداول المقال (المقارنة وشواهد التاريخ): تمرير أفقيّ داخل غلافها على الشاشات الضيقة */
.dc-table-wrap { overflow-x: auto; margin: 0 0 10px; }
.dc-table { width: 100%; border-collapse: collapse; font-size: 0.95em; line-height: 1.6; }
.dc-table th, .dc-table td {
  padding: 7px 10px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.dc-table thead th { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.dc-table tbody th { font-weight: 700; white-space: nowrap; }
.dc-table .dc-match { color: var(--primary); font-weight: 700; }
.dc-faq { margin-top: 22px; }
.dc-faq .dc-help + .dc-help { margin-top: 8px; }
.dc-faq .dc-help summary { color: var(--text-main); font-weight: 600; }
.dc-faq .dc-help summary::before { content: '\2022'; color: var(--accent); }
.dc-related { margin-top: 22px; }
.dc-related ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px;
}
.dc-related li { margin: 0; }
.dc-related a {
  display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none;
  background: var(--main-bg-glass); border: 1px solid rgba(120, 140, 180, .25); color: var(--text-main);
}
.dc-related a:hover, .dc-related a:focus-visible { border-color: var(--accent); }