/* ==========================================================================
   Diagram system.

   HARD RULE: no <text> inside SVG. Labels are real HTML.
   Text inside an SVG scales with the viewBox, so on a 390px phone a 14px label
   in a 900-wide viewBox renders at ~6px — and every geometric probe still
   passes, so it ships looking fine and is unreadable in the hand. It also
   breaks under RTL (labels clip to a 3-letter stub). HTML labels scale with the
   page, mirror natively via logical properties, and stay selectable.
   SVG here draws connectors only.
   ========================================================================== */

.dg {
  --dg-acc: var(--acc, var(--gold));
  margin-block: clamp(28px, 4vw, 44px) 0;
  padding: clamp(22px, 3vw, 34px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.dg-cap {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-3); margin-block-end: 22px;
}
html[dir="rtl"] .dg-cap { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.dg-cap b { color: var(--dg-acc); font-weight: 600; }

/* ---------- shared node ---------- */
.dg-node {
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 5px; min-inline-size: 0;
}
.dg-node.is-acc { border-color: var(--dg-acc); background: color-mix(in srgb, var(--dg-acc) 9%, var(--ink-3)); }
.dg-node.is-dead { border-style: dashed; border-color: var(--cream-3); opacity: .72; }
.dg-t { font-size: 14px; font-weight: 600; color: var(--cream); line-height: 1.35; }
html[dir="rtl"] .dg-t { line-height: 1.6; }
.dg-s { font-size: 12.5px; color: var(--cream-2); line-height: 1.55; }
html[dir="rtl"] .dg-s { font-size: 13px; line-height: 1.85; }
.dg-k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dg-acc);
}
html[dir="rtl"] .dg-k { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; }

/* ---------- 1. FLOW — stages left→right, wrapping to a column on narrow ---------- */
.dg-flow { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; align-items: stretch; }
.dg-flow > * { position: relative; }
/* connector chevron between stages; inset-inline so it flips under RTL */
.dg-flow > * + *::before {
  content: ''; position: absolute; inset-block-start: 50%;
  inset-inline-start: -10px; inline-size: 10px; block-size: 1px;
  background: var(--line-2);
}
@media (max-width: 720px) {
  .dg-flow { grid-template-columns: 1fr; }
  .dg-flow > * + *::before { inset-block-start: -6px; inset-inline-start: 26px; inline-size: 1px; block-size: 6px; }
}

/* ---------- 2. HUB — one centre the satellites report into ----------
   The connectors are the whole point: without a drawn line between each node and
   the core this is just five cards in a row and communicates nothing. */
.dg-hub { --dg-gap: 26px; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--dg-gap); align-items: center; }
.dg-hub-side { display: grid; gap: 12px; }
.dg-hub-side > .dg-node { position: relative; }
/* stub running from the node into the gap, toward the core */
.dg-hub-side > .dg-node::after {
  content: ''; position: absolute; inset-block-start: 50%;
  inline-size: var(--dg-gap); block-size: 1px; background: var(--line-2);
}
.dg-hub-side:first-child > .dg-node::after { inset-inline-end: calc(var(--dg-gap) * -1); }
.dg-hub-side:last-child  > .dg-node::after { inset-inline-start: calc(var(--dg-gap) * -1); }
/* dot where the stub meets the node */
.dg-hub-side > .dg-node::before {
  content: ''; position: absolute; inset-block-start: 50%; margin-block-start: -2.5px;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--dg-acc);
}
.dg-hub-side:first-child > .dg-node::before { inset-inline-end: -2.5px; }
.dg-hub-side:last-child  > .dg-node::before { inset-inline-start: -2.5px; }

.dg-hub-core {
  position: relative; z-index: 1;
  align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 22px 20px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, var(--dg-acc) 15%, var(--ink-3));
  border: 1.5px solid var(--dg-acc);
  min-inline-size: 176px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dg-acc) 7%, transparent);
}
.dg-hub-core .dg-t { font-size: 16.5px; }

@media (max-width: 820px) {
  .dg-hub { grid-template-columns: 1fr; --dg-gap: 16px; }
  .dg-hub-core { min-inline-size: 0; order: -1; }
  /* vertical stubs once stacked */
  .dg-hub-side > .dg-node::after {
    inset-block-start: calc(var(--dg-gap) * -1); inset-inline-start: 28px; inset-inline-end: auto;
    inline-size: 1px; block-size: var(--dg-gap);
  }
  .dg-hub-side > .dg-node::before {
    inset-block-start: -2.5px; margin-block-start: 0;
    inset-inline-start: 26px; inset-inline-end: auto;
  }
}

/* ---------- 3. SPLIT — one source, two divergent paths ---------- */
.dg-split { display: grid; gap: 12px; }
.dg-split-src { justify-self: center; inline-size: min(340px, 100%); text-align: center; }
.dg-split-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dg-split-legs > div { display: grid; gap: 8px; align-content: start; }
@media (max-width: 680px) { .dg-split-legs { grid-template-columns: 1fr; } }

/* ---------- 4. BARS — comparison. Widths come from real figures only ---------- */
.dg-bars { display: grid; gap: 14px; }
.dg-bar-row { display: grid; grid-template-columns: minmax(96px, 26%) 1fr auto; gap: 12px; align-items: center; }
.dg-bar-l { font-size: 13px; color: var(--cream-2); }
.dg-bar-track { block-size: 12px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.dg-bar-fill { block-size: 100%; border-radius: 99px; background: var(--dg-acc); }
.dg-bar-fill.is-mute { background: var(--ink-4); }
.dg-bar-v { font-family: var(--ff-mono); font-size: 13px; color: var(--cream); white-space: nowrap; }
html[dir="rtl"] .dg-bar-v { font-family: var(--ff-body); }
@media (max-width: 560px) {
  .dg-bar-row { grid-template-columns: 1fr auto; }
  .dg-bar-track { grid-column: 1 / -1; }
}

/* ---------- 5. GRID — a labelled matrix, e.g. hours of a week ----------
   Axis labels are mandatory. Without them this is coloured squares, not data.
   Width is capped: at full container width the cells become ~140px each and the
   diagram swallows the page. */
.dg-grid { display: grid; gap: 16px; justify-items: start; }
.dg-matrix {
  display: grid;
  grid-template-columns: auto repeat(var(--cols, 7), minmax(0, 1fr));
  gap: 4px; align-items: center;
  inline-size: 100%; max-inline-size: 520px;
}
.dg-ax {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--cream-3); text-align: center; white-space: nowrap;
}
html[dir="rtl"] .dg-ax { font-family: var(--ff-body); font-size: 12px; letter-spacing: 0; }
.dg-ax.is-row { text-align: end; padding-inline-end: 8px; }
.dg-cell { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.05); }
.dg-cell.is-hot { background: var(--dg-acc); }
.dg-cell.is-warm { background: color-mix(in srgb, var(--dg-acc) 42%, transparent); }
.dg-grid-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--cream-2); }
html[dir="rtl"] .dg-grid-legend { font-size: 13px; }
.dg-grid-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dg-grid-legend i { inline-size: 11px; block-size: 11px; border-radius: 3px; display: block; flex: none; }
/* Latin can shrink; Arabic cannot — 11px Arabic is below the legible floor even
   though the box fits. Keep 12.5px and let the cells give up the width instead. */
@media (max-width: 520px) {
  .dg-ax { font-size: 9.5px; }
  html[dir="rtl"] .dg-ax { font-size: 12.5px; }
  .dg-matrix { gap: 3px; }
}

/* ---------- 6. STACK — layers, optionally marking the weak one ---------- */
.dg-stack { display: grid; gap: 6px; }
.dg-layer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 10px;
  background: var(--ink-3); border: 1px solid var(--line);
}
.dg-layer.is-break { border-color: var(--dg-acc); background: color-mix(in srgb, var(--dg-acc) 10%, var(--ink-3)); }
.dg-layer-n { font-family: var(--ff-mono); font-size: 11.5px; color: var(--cream-3); }
html[dir="rtl"] .dg-layer-n { font-family: var(--ff-body); }
.dg-layer-tag {
  font-size: 11.5px; color: var(--dg-acc); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--dg-acc) 40%, transparent);
  padding: 3px 10px; border-radius: 99px;
}
html[dir="rtl"] .dg-layer-tag { font-size: 13px; }
@media (max-width: 560px) {
  .dg-layer { grid-template-columns: auto 1fr; }
  .dg-layer-tag { grid-column: 2; justify-self: start; }
}

/* ---------- print ---------- */
@media print { .dg { break-inside: avoid; } }