/* Visualisations on content pages (content/viz.py + the tool scripts). Lane colours as in the app. Builds on landing.css tokens. */
.v-sleep{--c:#9FD6B4}.v-potty{--c:#FFD66B}.v-food{--c:#F4B860}.v-move{--c:#B8D86B}.v-health{--c:#8FD3C8}
.v-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* figure frame */
.v-fig{margin:1.6em 0 0;padding:18px 18px 16px;border:1px solid var(--card-border);border-radius:20px;background:var(--surface-2);line-height:1.4}
.v-fig figcaption{margin:0 0 14px}
.v-title{display:block;font-weight:900;font-size:1rem;color:var(--ink)}
.v-cap{margin:14px 0 0!important;font-size:.84rem;line-height:1.5;color:var(--ink-faint)!important}
.v-small{padding:14px 16px 12px}

/* range bars on a shared axis */
.v-bars{display:grid;gap:10px}
.v-row{display:grid;grid-template-columns:1fr;gap:4px}
.v-rl{font-size:.84rem;font-weight:800;color:var(--ink-soft);line-height:1.25}
.v-track{position:relative;display:block;height:26px;border-radius:13px;background:#1a302b;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--grid) - 1px),rgba(243,245,240,.07) calc(var(--grid) - 1px) var(--grid))}
.v-base{position:absolute;left:0;top:0;bottom:0;border-radius:13px;background:var(--c);opacity:.16}
.v-rng{position:absolute;top:3px;bottom:3px;min-width:8px;border-radius:10px;background:var(--c)}
.v-rng.v-open{border-radius:10px 0 0 10px;-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.v-val{position:absolute;top:50%;transform:translateY(-50%);padding:0 7px;font-size:.78rem;font-weight:900;white-space:nowrap;color:var(--ink)}
.v-axisrow{margin-top:-4px}
.v-axis{position:relative;display:block;height:16px;margin-inline:0}
.v-axis span{position:absolute;top:0;transform:translateX(-50%);font-size:.7rem;font-weight:700;color:var(--ink-faint);white-space:nowrap}
.v-axis span:first-child{transform:none}
.v-axis span:last-child{transform:translateX(-100%)}
@media(min-width:560px){
  .v-row{grid-template-columns:9.5em 1fr;align-items:center;gap:12px}
  .v-axisrow{margin-top:-6px}
}

/* timeline (weeks) with numbered markers + legend */
.v-tl{padding:6px 12px 0}
.v-tl-track{position:relative;height:30px;border-radius:15px;background:#1a302b}
.v-span{position:absolute;top:6px;bottom:6px;border-radius:9px;background:var(--c);opacity:.55}
.v-span.v-hatch{opacity:.7;background:repeating-linear-gradient(135deg,var(--c) 0 5px,transparent 5px 9px)}
.v-arrow{position:absolute;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--c)}
.v-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--c);border-right:0}
.v-num{position:absolute;top:3px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--bg);border:3px solid var(--c);
  display:grid;place-items:center;font-size:.72rem;font-weight:900;color:var(--ink);line-height:1}
.v-tl .v-axis{margin-top:6px}
.v-legend{list-style:none;margin:16px 0 0!important;padding:0!important;display:grid;gap:8px}
.v-legend li{display:flex;gap:10px;align-items:flex-start;margin:0!important;font-size:.92rem;line-height:1.45;color:var(--ink-soft)}
.v-num.v-static{position:static;flex:none;margin:0}

/* breed scales */
.v-scales{display:grid;gap:14px;margin-top:14px;padding:16px;border:1px solid var(--card-border);border-radius:16px;background:var(--surface-2)}
.v-scale{display:grid;gap:6px}
.v-sn{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.v-steps,.v-sl{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}
.v-step{height:12px;border-radius:6px;background:#1a302b}
.v-step.v-on{background:var(--c);opacity:.38}
.v-step.v-here{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
.v-sl span{font-size:.7rem;font-weight:700;color:var(--ink-faint);text-align:center;line-height:1.2;white-space:nowrap;margin-inline:-6px}
.v-sl span.v-here{color:var(--ink);font-weight:900}

/* CTA with an app screenshot */
.v-cta{position:relative;overflow:hidden}
.v-shot{flex:none;align-self:center;width:200px;max-width:70%;margin:4px auto -24px}
.v-shot img{display:block;width:100%;height:auto;aspect-ratio:360/500;border-radius:24px 24px 0 0;border:1px solid var(--card-border);border-bottom:0;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
@media(min-width:640px){.v-shot{width:170px;align-self:flex-end;margin:0 0 -30px auto}}

/* calculator lanes (drawn by content/tools/*.js) */
.v-lanes{margin:16px 0 4px;padding:16px;border-radius:18px;background:var(--bg-deep);border:1px solid var(--card-border)}
.v-lh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;font-weight:900;font-size:.95rem;color:var(--ink)}
.v-lh small{font-size:.78rem;font-weight:700;color:var(--ink-faint);text-align:end}
.v-segs{display:flex;flex-wrap:wrap;gap:12px 8px}
.v-seg{flex:1 1 100%;min-width:0}
.v-seg-h{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.v-tk{position:relative;height:30px;border-radius:15px;background:#1a302b}
.v-night .v-tk{background:#0c1b18;box-shadow:inset 0 0 0 1px #2b4a42}
.v-dot{position:absolute;top:4px;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:3px solid var(--c);background:#0F2521}
.v-dot.v-maybe{border-style:dashed;background:transparent}
.v-fill{position:absolute;top:5px;bottom:5px;border-radius:10px;background:var(--c)}
.v-fill.v-soft{opacity:.45;background:repeating-linear-gradient(135deg,var(--c) 0 5px,transparent 5px 9px)}
.v-tl-l{position:relative;height:18px;margin-top:4px}
.v-tl-l.v-2{height:34px}
.v-t{position:absolute;top:0;transform:translateX(-50%);font-size:.72rem;font-weight:800;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.v-t.v-r2{top:16px}
.v-t.v-hide{visibility:hidden}
.v-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.78rem;color:var(--ink-faint)}
.v-key span{display:inline-flex;align-items:center;gap:6px}
.v-key i{width:12px;height:12px;border-radius:50%;border:2px solid var(--c)}
.v-key i.v-maybe{border-style:dashed}
.v-key i.v-sq{border-radius:3px;background:var(--c);border:0}
.v-key i.v-sq.v-soft{opacity:.6;background:repeating-linear-gradient(135deg,var(--c) 0 3px,transparent 3px 5px)}
.v-mark{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--bg-deep)}
@media(min-width:560px){.v-seg{flex:var(--g) 1 0}}
.v-num.v-low{top:36px}
.v-tl2 .v-axis{margin-top:36px}
.v-fill.v-open{border-radius:10px 0 0 10px;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.v-key i.v-bar{width:4px;height:14px;border-radius:2px;border:0;background:var(--ink)}
.v-val.v-dark{color:var(--on-primary)}
.v-num.v-low::before{content:"";position:absolute;bottom:100%;left:50%;width:2px;height:7px;margin-left:-1px;background:var(--c)}
.v-fill.v-mid{opacity:.62;margin-left:2px}

/* Right-to-left pages (ar, he): charts are mirrored (viz.py and the tool scripts position from the right) */
[dir=rtl] .v-track{background-image:repeating-linear-gradient(270deg,transparent 0 calc(var(--grid) - 1px),rgba(243,245,240,.07) calc(var(--grid) - 1px) var(--grid))}
[dir=rtl] .v-base{left:auto;right:0}
[dir=rtl] .v-rng.v-open,[dir=rtl] .v-fill.v-open{border-radius:0 10px 10px 0;-webkit-mask-image:linear-gradient(270deg,#000 60%,transparent);mask-image:linear-gradient(270deg,#000 60%,transparent)}
[dir=rtl] .v-axis span{transform:translateX(50%)}
[dir=rtl] .v-axis span:first-child{transform:none}
[dir=rtl] .v-axis span:last-child{transform:translateX(100%)}
[dir=rtl] .v-val,[dir=rtl] .v-t{unicode-bidi:plaintext}
[dir=rtl] .v-arrow::after{right:auto;left:-1px;border-left:0;border-right:7px solid var(--c)}
[dir=rtl] .v-num{margin-left:0;margin-right:-12px}
[dir=rtl] .v-num.v-static{margin:0}
[dir=rtl] .v-dot{margin-left:0;margin-right:-11px}
[dir=rtl] .v-mark{margin-left:0;margin-right:-2px}
[dir=rtl] .v-fill.v-mid{margin-left:0;margin-right:2px}
[dir=rtl] .v-t{transform:translateX(50%)}
@media(min-width:640px){[dir=rtl] .v-shot{margin:0 auto -30px 0}}