/* ============================================================
   موسوعة الخيل — الموجز المعرفي (لوحة مكثّفة / ألمناك)
   تباعد ضيّق · تقسيمات واضحة · محتوى غزير · خط زمني
   ============================================================ */

:root {
  --dg-paper: #f1ece0;
  --dg-card: #fbf8f0;
  --dg-card-2: #f6f1e5;
  --dg-ink: #241c12;
  --dg-ink-soft: #574a39;
  --dg-ink-mute: #8a7c66;
  --dg-line: #d6caae;
  --dg-line-2: #e4dbc6;
  --dg-bar: #34271a;
  --dg-bar-2: #4a3824;
  --dg-gold: #ac7a36;
  --dg-gold-bright: #ecd9aa;
  --dg-accent: #8a5a2b;

  --dg-font: "Tajawal", system-ui, sans-serif;
  --dg-serif: "Amiri", serif;
  --dg-maxw: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.digest-body {
  margin: 0;
  font-family: var(--dg-font);
  color: var(--dg-ink);
  background: var(--dg-paper);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.digest-body a { color: inherit; text-decoration: none; }
.digest-body .sep { color: var(--dg-gold); margin: 0 7px; opacity: .7; }

.brand-logo { display: block; height: 42px; width: auto; }

/* ===================== Top strip ===================== */
.dg-strip { background: var(--dg-bar); color: var(--dg-gold-bright); font-size: 12px; }
.dg-strip-in {
  max-width: var(--dg-maxw); margin: 0 auto; padding: 5px 16px;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
.dg-strip-brand { font-weight: 800; letter-spacing: .5px; color: #fff; margin-inline-end: 8px; }
.dg-strip-end { margin-inline-start: auto; color: rgba(236,217,170,.7); font-style: italic; }

/* ===================== Header ===================== */
.dg-header { background: var(--dg-card); border-bottom: 2px solid var(--dg-bar); }
.dg-header-in {
  max-width: var(--dg-maxw); margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 16px;
}
.dg-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-inline-start: 6px; }
.dg-nav a {
  padding: 5px 10px; font-size: 14px; font-weight: 700; color: var(--dg-ink-soft);
  border-radius: 5px;
}
.dg-nav a:hover { background: var(--dg-paper); color: var(--dg-accent); }
.dg-search { margin-inline-start: auto; display: flex; }
.dg-search input {
  border: 1px solid var(--dg-line); background: #fff; font-family: inherit; font-size: 13px;
  padding: 6px 10px; width: 150px; border-radius: 5px 0 0 5px; outline: none;
}
.dg-search button {
  border: 1px solid var(--dg-bar); border-inline-start: none; background: var(--dg-bar); color: var(--dg-gold-bright);
  cursor: pointer; padding: 0 12px; font-size: 16px; border-radius: 0 5px 5px 0;
}

/* ===================== Ticker ===================== */
.dg-ticker {
  background: var(--dg-card-2); border-bottom: 1px solid var(--dg-line);
  font-size: 13px; color: var(--dg-ink-soft);
}
.dg-ticker { padding: 6px 16px; }
.dg-ticker b { color: var(--dg-accent); font-weight: 800; margin-inline-end: 6px; }
.dg-ticker a:hover { color: var(--dg-accent); text-decoration: underline; }

/* ===================== Modules ===================== */
.dg-mod { background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
.dg-mod-h {
  background: var(--dg-bar); color: var(--dg-gold-bright);
  font-family: var(--dg-serif); font-weight: 700; font-size: 15px;
  padding: 6px 12px; border-inline-start: 4px solid var(--dg-gold);
  display: flex; align-items: center;
}
.dg-mod-b { padding: 10px 12px; }
.dg-mod-b > *:last-child { margin-bottom: 0; }
.dg-accent { border-color: var(--dg-gold); }
.dg-accent .dg-mod-h { background: linear-gradient(90deg, var(--dg-accent), var(--dg-bar)); }

/* ===================== Main grid ===================== */
.dg-main {
  max-width: var(--dg-maxw); margin: 12px auto; padding: 0 16px;
  display: grid; grid-template-columns: 1.05fr 1.25fr 0.95fr; gap: 12px;
  align-items: start;
}
.dg-col { min-width: 0; }

/* Feature */
.dg-feature h3 { font-family: var(--dg-serif); font-size: 22px; margin: 0 0 4px; color: var(--dg-ink); line-height: 1.25; }
.dg-byline { font-size: 12px; color: var(--dg-ink-mute); margin: 0 0 8px; }
.dg-feature p { margin: 0 0 8px; color: var(--dg-ink-soft); }
.dg-more { font-weight: 800; color: var(--dg-accent); font-size: 13px; }

/* Lists */
.dg-list { list-style: none; padding: 0; margin: 0; }
.dg-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px dotted var(--dg-line);
}
.dg-list li:last-child { border-bottom: none; }
.dg-cat {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--dg-gold);
  padding: 1px 7px; border-radius: 3px; min-width: 48px; text-align: center;
}
.dg-list a { font-weight: 500; }
.dg-list a:hover { color: var(--dg-accent); }

/* Facts */
.dg-facts { list-style: none; padding: 0; margin: 0; }
.dg-facts li { padding: 4px 0 4px 16px; padding-inline-start: 16px; position: relative; border-bottom: 1px dotted var(--dg-line); }
.dg-facts li:last-child { border-bottom: none; }
.dg-facts li::before { content: "▪"; position: absolute; inset-inline-start: 0; color: var(--dg-gold); }
.dg-facts b { color: var(--dg-accent); }

/* Rank */
.dg-rank { margin: 0; padding-inline-start: 22px; }
.dg-rank li { padding: 3px 0; border-bottom: 1px dotted var(--dg-line); }
.dg-rank li:last-child { border-bottom: none; }
.dg-rank a:hover { color: var(--dg-accent); }

/* Dictionary */
.dg-dict { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.dg-dict dt { font-family: var(--dg-serif); font-weight: 700; font-size: 16px; color: var(--dg-accent); }
.dg-dict dd { margin: 0; font-size: 13px; color: var(--dg-ink-soft); align-self: center; }

/* ===================== Timeline ===================== */
.dg-timeline-mod .dg-mod-b { padding: 12px 14px; }
.dg-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.dg-timeline::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; inset-inline-start: 78px;
  width: 2px; background: repeating-linear-gradient(180deg, var(--dg-gold) 0 8px, transparent 8px 13px);
}
.dg-timeline > li:not(.dg-era) {
  position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 18px;
  padding: 6px 0;
}
.dg-timeline > li:not(.dg-era)::before {
  content: ""; position: absolute; inset-inline-start: 73px; top: 11px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--dg-card);
  border: 2px solid var(--dg-gold); z-index: 1;
}
.dg-yr { font-size: 12px; font-weight: 800; color: var(--dg-accent); text-align: end; padding-top: 2px; }
.dg-timeline b { font-size: 15px; color: var(--dg-ink); display: block; }
.dg-timeline p { margin: 1px 0 0; font-size: 12.5px; color: var(--dg-ink-soft); line-height: 1.45; }
.dg-era {
  font-family: var(--dg-serif); font-weight: 700; font-size: 13px; color: #fff;
  background: var(--dg-bar-2); padding: 3px 12px; border-radius: 4px;
  margin: 10px 0 8px; display: inline-block;
}
.dg-era:first-child { margin-top: 0; }

/* ===================== Secondary grid ===================== */
.dg-grid2 {
  max-width: var(--dg-maxw); margin: 0 auto 14px; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.dg-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dg-tags a {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--dg-ink-soft);
  background: var(--dg-card-2); border: 1px solid var(--dg-line); padding: 4px 10px; border-radius: 999px;
}
.dg-tags a:hover { background: var(--dg-gold); color: #fff; border-color: var(--dg-gold); }

/* ===================== Footer ===================== */
.dg-footer {
  background: var(--dg-bar); color: rgba(236,217,170,.7); font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: none; padding: 12px 16px;
}
.dg-footer { padding-inline: max(16px, calc((100% - var(--dg-maxw))/2 + 16px)); }

/* ===================== Theme chooser (shared) ===================== */
.theme-chooser { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 999; font-family: var(--dg-font); }
.chooser-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--dg-bar); color: var(--dg-gold-bright); padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(36,28,18,.4); font-size: 14px; font-weight: 700; border: 1px solid #1d140c; cursor: pointer; font-family: inherit; transition: background .18s, transform .18s; }
.chooser-toggle:hover { background: var(--dg-accent); transform: translateY(-2px); }
.chooser-icon { font-size: 16px; line-height: 1; color: var(--dg-gold-bright); }
.chooser-label { line-height: 1; }
.chooser-menu { list-style: none; padding: 8px; margin: 0; position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0; min-width: 215px; background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(36,28,18,.25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.theme-chooser.is-open .chooser-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.chooser-menu li { margin: 0; }
.chooser-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 7px; color: var(--dg-ink); font-size: 14px; transition: background .14s; }
.chooser-menu a:hover { background: var(--dg-paper); }
.chooser-menu a.is-active { background: var(--dg-bar); color: var(--dg-gold-bright); font-weight: 700; pointer-events: none; }
.chooser-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; }
.chooser-dot[data-tone="modern"]   { background: linear-gradient(135deg, #c9a961, #6b3410); }
.chooser-dot[data-tone="wiki"]     { background: linear-gradient(135deg, #cedff2, #0645ad); }
.chooser-dot[data-tone="heritage"] { background: linear-gradient(135deg, #b8864a, #6e1e1e); }
.chooser-dot[data-tone="gallery"]  { background: linear-gradient(135deg, #e6c878, #15100a); }
.chooser-dot[data-tone="portal"]   { background: linear-gradient(135deg, #11a195, #095a54); }
.chooser-dot[data-tone="magazine"] { background: linear-gradient(135deg, #8b1e1e, #1a1a18); }
.chooser-dot[data-tone="guide"]    { background: linear-gradient(135deg, #6e69e0, #3a35a3); }
.chooser-dot[data-tone="bento"]    { background: linear-gradient(135deg, #c89048, #2b2118); }
.chooser-dot[data-tone="platform"] { background: linear-gradient(135deg, #c2a04a, #16243a); }
.chooser-dot[data-tone="digest"]   { background: linear-gradient(135deg, #ac7a36, #34271a); }
.chooser-menu a.is-active .chooser-dot { border-color: var(--dg-gold-bright); }

/* ===================== Responsive ===================== */
@media (max-width: 960px) {
  .dg-main { grid-template-columns: 1fr 1fr; }
  .dg-col-mid { grid-column: 1 / -1; order: 3; }
  .dg-grid2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dg-main { grid-template-columns: 1fr; }
  .dg-col-mid { grid-column: auto; order: 0; }
  .dg-grid2 { grid-template-columns: 1fr 1fr; }
  .dg-nav { display: none; }
  .dg-search { margin-inline-start: auto; }
  .dg-strip-end { display: none; }
  .theme-chooser { bottom: 12px; inset-inline-start: 12px; }
  .chooser-label { display: none; }
}