/* ==========================================================================
   seiflden.com v3 - The Liquidity Ledger 1.0 (liquidity_{en,ar}.html)
   Loaded after pub.css, doctrine.css and ledger.css (the series system and the Channel Ledger's
   components: proposed badges, story box, checklist, notes, repeating rows, tool layouts).
   Liquidity-only parts: the valley cover, three companion cards,
   seven diagrams, the valley chart in the calculator, and their print treatment.
   ========================================================================== */


/* ---------- Cover: the valley ---------- */
.qmotif .mrule { stroke: var(--border); stroke-width: 1; }
.qmotif .mbar { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.qmotif .mbar.low { fill: var(--danger-soft); stroke: var(--danger); }
.qmotif .marea { fill: var(--danger-soft); opacity: .7; }
.qmotif .mcurve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.qmotif .mfloor { stroke: var(--accent-text); stroke-width: 1.6; stroke-dasharray: 7 5; }
.qmotif .mdot { fill: var(--danger); stroke: var(--s1); stroke-width: 3; }
@container (min-width: 900px) { .series-cards--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Diagrams (tokens only; theme-aware) ---------- */
.fig--bridge .dg, .fig--ccc .dg, .fig--rent .dg, .fig--gate .dg { max-width: 520px; }
.fig--valley .dg, .fig--forecast .dg, .fig--calendar .dg { max-width: 560px; }
.dg .grid { stroke: var(--border); stroke-width: 1; }
.dg .lq-rec { fill: var(--info-soft); stroke: var(--info); stroke-width: 1; }
.dg .lq-b2b { fill: url(#lhatch); stroke: var(--danger); stroke-width: 1; }
.dg .bar.lq-ok { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.dg .bar.lq-tie { fill: var(--warning-soft); stroke: var(--warning); stroke-width: 1.4; }
.dg .bar.lq-ghost { fill: none; stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dg .lq-width { fill: var(--danger-soft); opacity: .6; }
.dg .lq-ratio { stroke: var(--info); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg .lq-lp { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; }
.dg .lq-ls { fill: none; stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.dg .dot.lq-dotS { fill: var(--danger); }
.dg .lq-mo { fill: var(--s2); stroke: var(--border); }
.dg .lq-mn { fill: var(--text-2); font-size: 11.5px; }
.dg .lq-gosi { fill: var(--info); }
.dg .lq-pay { fill: var(--text-2); }
.dg .lq-vat { fill: var(--warning); }
.dg .lq-zakat { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.dg .lq-ram { fill: var(--info-soft); stroke: var(--info); stroke-width: 1.2; }
.dg .lq-eid { stroke: var(--info); stroke-width: 2.4; }
.dg .lq-sum { fill: url(#lhatch); stroke: var(--warning); stroke-width: 1; stroke-dasharray: 4 3; }
.dg .lq-ramw { fill: var(--info-soft); opacity: .7; }
.dg .lq-eidw { fill: var(--accent-soft); opacity: .7; }
.dg .box.lq-og { fill: var(--s2); stroke: var(--border-strong); stroke-width: 1.2; }
.dg .box.lq-cg { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.dg .box.go { fill: var(--accent-soft); stroke: var(--accent); }
.dg .box.mid { fill: var(--warning-soft); stroke: var(--warning); }
.dg .box.nogo { fill: var(--danger-soft); stroke: var(--danger); }

/* The valley chart inside the calculator */
.t-x .lq-vchart { max-width: 560px; margin: 0 0 12px; }
.t-x .lq-vchart .tx { font-size: 12px; }

/* ---------- Print ---------- */
@media print {
  .qmotif .mrule { stroke: #ccc; }
  .qmotif .mbar, .qmotif .mcurve, .qmotif .mfloor { stroke: #000; }
  .qmotif .mbar { fill: #eee; }
  .qmotif .mbar.low, .qmotif .marea { fill: url(#hatch2); }
  .dg .lq-rec, .dg .lq-mo, .dg .lq-ram, .dg .lq-ramw, .dg .lq-eidw, .dg .box.lq-og, .dg .box.mid, .dg .bar.lq-tie { fill: #eee; }
  .dg .lq-b2b, .dg .lq-width, .dg .box.nogo, .dg .lq-sum { fill: url(#hatch); }
  .dg .bar.lq-ok, .dg .lq-zakat, .dg .box.lq-cg, .dg .box.go { fill: url(#hatch2); }
  .dg .lq-rec, .dg .lq-b2b, .dg .bar.lq-ok, .dg .bar.lq-tie, .dg .bar.lq-ghost, .dg .lq-ratio, .dg .lq-lp, .dg .lq-ls, .dg .lq-zakat,
  .dg .lq-ram, .dg .lq-eid, .dg .lq-sum, .dg .box.lq-og, .dg .box.lq-cg, .dg .box.go, .dg .box.mid, .dg .box.nogo, .dg .grid { stroke: #000; }
  .dg .lq-gosi, .dg .lq-pay, .dg .lq-vat, .dg .dot.lq-dotS, .dg .lq-mn { fill: #000; }
}