/* [csn_pretul_treptei] (includes/stories/scara-netului.php): what the next 100 lei of net cost in
   gross, step by step, without dependants and with four. Loaded on any page whose text holds it. */

/* ---- [csn_pretul_treptei]: the price of the next 100 lei of net ---- */
.sn-price { margin: 1.6em 0 1.8em; container: snprice / inline-size; }
.sn-price { padding: 14px 0 0; border-top: 1px solid var(--rule); font-family: var(--sans); }
.sn-price .dm__title { font: 750 18px/1.25 var(--sans); letter-spacing: -.005em; margin: 0 0 14px; text-wrap: balance; }
.sn-price .dm__cap { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 500 13.5px/1.5 var(--sans); color: var(--ink-3); }
.sn-price .dm__say, .sn-price .dm__src { display: block; }
.sn-price .dm__src { margin-top: 4px; font-size: 13px; }
.sn-price .dm__src .src { margin: 0; font-size: inherit; color: var(--ink-2); }
.sn-price svg { display: block; width: 100%; height: auto; font-family: var(--sans); overflow: visible; }
.sn-price .sp--l { display: none; }
@container snprice (min-width: 560px) { .sn-price .sp--s { display: none; } .sn-price .sp--l { display: block; } }
.sn-price .sp-bar { fill: var(--acc); }
.sn-price .sp-bar--low { fill: var(--acc-pale); stroke: var(--acc); stroke-width: 1; }
.sn-price .sp-bar--spike { fill: var(--pencil); }
.sn-price .sp-zero { stroke: var(--ink-3); stroke-width: 1; }
.sn-price .sp-grid { stroke: var(--line); stroke-width: 1; }
.sn-price .sp-ref { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sn-price text { font-variant-numeric: lining-nums tabular-nums; }
.sn-price .sp-tick { font: 500 12.5px var(--sans); fill: var(--ink-2); }
.sn-price .sp-row { font: 700 14px var(--sans); fill: var(--ink); }
.sn-price .st-note { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.sn-price .sp-v { font: 600 13px var(--mono); fill: var(--ink-2); }
.sn-price .sp-v--spike { fill: var(--pencil); font-weight: 700; }
.sn-price .sp-axt { font: 600 12.5px var(--sans); fill: var(--ink-3); }
.sn-price .st-note { font: 600 19px/1 var(--hand); font-stretch: 72%; fill: var(--pencil); }
.sn-price .sp-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.sn-price.reveal-ready .sp-bar { transform: scaleY(0); }
.sn-price.reveal-ready.is-revealed .sp-bar { transform: none; transition: transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 18ms); }

@media (prefers-reduced-motion: reduce) { .sn-price * { transition-delay: 0s !important; } }