/* KesefSmart v2.1 wow layer, homepage: W4 (maaser field), W5 (cost of waiting), W6 (tool row mini-plots).
   docs/WOW-SPEC.md. Tokens from css/v2/kesef.css. Default state = finished and visible; motion is opt-in. */

/* Section rhythm (WOW-SPEC amendment, NDS principle 7): 88px mobile, 160px desktop */
.h-tools.ks-section, .h-maaser.ks-section, .h-costs.ks-section { padding: 88px 0; }
@media (min-width: 1024px) { .h-tools.ks-section, .h-maaser.ks-section, .h-costs.ks-section { padding: 160px 0; } }

/* ---------- W4: exactly ten percent ---------- */
.h-maaser { overflow: hidden; }
.wm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.h-maaser__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); grid-template-areas: 'copy receipt' 'field receipt' 'cta receipt'; row-gap: 0; align-items: start; }
.h-maaser__copy { grid-area: copy; }
.h-maaser__copy .ks-lead { margin: 24px 0 0; max-width: 30em; }
.h-maaser .h-receipt { grid-area: receipt; align-self: center; }
.h-maaser__cta { grid-area: cta; margin-top: 32px; }
.wm-figure { grid-area: field; margin: 44px 0 0; max-width: 560px; }
.wm-field { position: relative; width: 100%; aspect-ratio: 40 / 25; }
.wm-cap { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; font: 400 14px/1.5 var(--font-sans); color: var(--parchment-2); max-width: 34em; }
.wm-key { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kesef); box-shadow: 0 0 0 4px rgba(255, 214, 2, .14); transform: translateY(-1px); }
.h-receipt__lines .is-hi dd { transition: box-shadow .5s var(--ease); }
.h-receipt__lines .is-hi.wm-hit dd { box-shadow: 0 0 0 5px rgba(255, 214, 2, .32); }
@media (max-width: 860px) {
  .h-maaser__grid { grid-template-columns: 1fr; grid-template-areas: 'copy' 'receipt' 'field' 'cta'; }
  .h-maaser .h-receipt { margin-top: 36px; }
  .wm-figure { margin-top: 40px; }
}
@media (max-width: 767px) { .wm-field { aspect-ratio: 25 / 20; } }

/* ---------- W5: the cost of waiting ---------- */
.wc { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.wc .ks-micro { margin: 8px 0 0; }
.wc-gap { margin: 40px 0 0; font: 300 clamp(56px, 18vw, 96px)/.95 var(--font-display); letter-spacing: -0.035em; font-variation-settings: 'opsz' 72; white-space: nowrap; display: flex; align-items: baseline; }
@media (min-width: 1024px) { .wc-gap { font-size: clamp(92px, 7.4vw, 112px); } }
.wc-gap-cap { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 26em; }
.wc-gap-cap b { color: var(--ink); font-weight: 500; }
.wc .ks-disclaimer { margin-top: 28px; }

.wc-chart { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: clamp(20px, 3vw, 40px); align-self: stretch; padding-top: 34px; }
.wc-col { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.wc-track { position: relative; height: clamp(260px, 26vw, 340px); border-bottom: 1px solid var(--hair-strong); }
.wc-bar { position: absolute; left: 12%; right: 12%; bottom: 0; height: var(--h); background: var(--ink); border-radius: 6px 6px 0 0; transform-origin: bottom; transition: transform .7s cubic-bezier(.215, .61, .355, 1); }
.wc-paid { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p); background: rgba(236, 230, 216, .34); border-top: 1px solid rgba(236, 230, 216, .5); }
.wc-miss { position: absolute; left: 0; right: 0; top: 0; height: var(--m); border-radius: 6px 6px 0 0; background-color: rgba(18, 17, 14, 0); background-image: repeating-linear-gradient(135deg, rgba(18, 17, 14, .16) 0 1px, transparent 1px 7px); border: 1px dashed rgba(18, 17, 14, .55); border-bottom: 0; transition: background-color .7s var(--ease), border-color .7s var(--ease); }
.wc-col--late .wc-bar { background: transparent; }
.wc-col--late .wc-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - var(--m, 57.99%)); background: var(--ink); z-index: 0; }
.wc-col--late .wc-paid { z-index: 1; }
.wc-miss__lab { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font: 400 15px/1 var(--font-sans); font-style: normal; color: var(--ink-2); white-space: nowrap; letter-spacing: -0.01em; transition: opacity .5s var(--ease) .2s; }
.wc-val { position: absolute; left: 0; right: 0; bottom: calc(var(--h) + 10px); text-align: center; font: 500 16px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; transition: opacity .5s var(--ease), bottom .9s cubic-bezier(.215, .61, .355, 1); }
.wc-label { margin-top: 12px; text-align: center; font: 500 14px/1.3 var(--font-sans); color: var(--ink-2); }
.wc-legend { grid-column: 1 / -1; list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.wc-legend li { display: inline-flex; align-items: center; gap: 7px; }
.wc-legend .k { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wc-legend .k--paid { background: #5D5A54; }
.wc-legend .k--grow { background: var(--ink); }
.wc-legend .k--miss { border: 1px dashed rgba(18, 17, 14, .8); background-image: repeating-linear-gradient(135deg, rgba(18, 17, 14, .3) 0 1px, transparent 1px 4px); }

/* motion states (added by js/v2/wow-costs.js only when motion is allowed) */
.wc.is-pre .wc-bar { transform: scaleY(0); }
.wc.is-pre .wc-val, .wc.is-solid .wc-col--late .wc-val { opacity: 0; }
.wc.is-solid .wc-col--late .wc-val { bottom: calc(100% + 10px); }
.wc.is-solid .wc-miss { background-color: var(--ink); border-color: var(--ink); }
.wc.is-solid .wc-miss__lab { opacity: 0; transition-delay: 0s; }
@media (max-width: 900px) {
  .wc { grid-template-columns: 1fr; align-items: start; }
  .wc-chart { padding-top: 40px; }
  .wc-track { height: 260px; }
}
@media (max-width: 420px) { .wc-bar { left: 6%; right: 6%; } .wc-val { font-size: 14px; } .wc-miss__lab { font-size: 13px; } }

/* ---------- W6: tool row mini-plots ---------- */
@media (min-width: 761px) {
  .h-row { grid-template-columns: 56px minmax(0, 1.2fr) 128px minmax(0, 1fr) 44px; }
}
.h-row__viz { display: block; width: 128px; height: 44px; color: var(--ink); }
.h-row__viz svg { display: block; width: 100%; height: 100%; overflow: visible; }
.h-row__viz .v-base { stroke: var(--hair-strong); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.h-row__viz .v-line { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.h-row__viz .v-soft { stroke: rgba(18, 17, 14, .38); stroke-width: 1.25; fill: none; stroke-dasharray: 2 3; }
:where(.h-row__viz path.v-soft.v-draw) { stroke-dasharray: none; stroke: rgba(18, 17, 14, .3); }
.h-row__viz .v-bar { stroke: currentColor; fill: none; stroke-linecap: butt; }
.h-row__viz .v-dot { fill: currentColor; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .h-row__viz { opacity: 0; transition: opacity .3s var(--ease); }
  .h-row:hover .h-row__viz, .h-row:focus-visible .h-row__viz { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .h-row__viz .v-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s cubic-bezier(.215, .61, .355, 1); }
  .h-row__viz .v-dot { opacity: 0; transition: opacity .2s var(--ease); }
  .h-row:hover .h-row__viz .v-draw, .h-row:focus-visible .h-row__viz .v-draw { stroke-dashoffset: 0; }
  .h-row:hover .h-row__viz .v-dot, .h-row:focus-visible .h-row__viz .v-dot { opacity: 1; transition-delay: .5s; }
  .h-row__viz .v-draw.v-d2 { transition-delay: .08s; }
  .h-row__viz .v-draw.v-d3 { transition-delay: .16s; }
  .h-row__viz .v-draw.v-d4 { transition-delay: .24s; }
  .h-row__viz .v-draw.v-d5 { transition-delay: .32s; }
}
@media (max-width: 760px) {
  .h-row { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: 'name go' 'out viz'; }
  .h-row__go { justify-self: end; }
  .h-row__viz { grid-area: viz; width: 96px; height: 34px; align-self: end; }
}