/* TOYS.CSS — the demos on the tiles and on a lab's page. They run on the site's colour variables (rr.css), so a theme change there restyles them. */
/* shared by the toys */
.toy{min-width:0}
.has-toy>.toy{margin-block:auto}

/* portfolio: the 12-month line, with a scrubber */
.pf-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.pf-big{font:600 clamp(3rem,2vw + 2.2rem,4.4rem)/.9 var(--rr-display);letter-spacing:.005em;font-variant-numeric:tabular-nums;color:var(--text)}
.pf.neg .pf-big{color:var(--down)}
.pf-when{font:500 .8125rem/1.3 var(--rr-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pf-vs{flex-basis:100%;display:flex;align-items:center;gap:10px;font:500 .875rem/1.4 var(--rr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-key{flex:none;width:24px;height:0;border-top:2px solid var(--spx)}   /* the benchmark's line sample */
.pf-vs b{font:500 .875rem/1 var(--rr-mono);color:var(--text);font-variant-numeric:tabular-nums}
.pf-chart{position:relative;height:clamp(150px,17vw,210px);margin-top:16px;cursor:crosshair;touch-action:pan-y}
.pf-chart svg{display:block;width:100%;height:100%;overflow:visible}
.pf-area.up,.pf-area.dn{fill:color-mix(in srgb,var(--fund) 16%,transparent)}   /* the fund's area, either side of zero */
.pf-zero{stroke:var(--edge-hi);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.pf-s{fill:none;stroke:var(--spx);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pf-p{fill:none;stroke:var(--fund);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pf-x{position:absolute;top:0;bottom:0;border-left:1px solid var(--text);pointer-events:none}
.pf-dot{position:absolute;width:10px;height:10px;background:var(--fund);outline:2px solid var(--surface);transform:translate(-50%,-50%);pointer-events:none}

/* halfway: two handles on a five-step scale */
.hw-q{font:600 clamp(1.25rem,.8vw + 1rem,1.5rem)/1.25 var(--rr-sans);margin:0;max-width:24ch}
.hw-track{position:relative;height:64px;margin:24px 32px 12px;touch-action:none;cursor:pointer;
  background:linear-gradient(var(--edge-hi),var(--edge-hi)) 0 50%/100% 1px no-repeat}
/* one tick per answer, drawn by toys.js (the game's scale has six) */
.hw-tick{position:absolute;top:50%;width:1px;height:12px;background:var(--edge-hi);transform:translate(-50%,-50%)}
.hw-mid{position:absolute;top:50%;width:14px;height:14px;background:var(--text);outline:2px solid var(--surface);
  transform:translate(-50%,-50%) rotate(45deg);transition:left var(--dur) var(--ease)}
.hw-h{position:absolute;top:50%;z-index:1;transform:translate(-50%,-50%);display:grid;place-items:center;
  min-width:60px;height:36px;padding:0 12px;font:600 .8125rem/1 var(--rr-mono);letter-spacing:.1em;text-transform:uppercase;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:left var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hw-h.grab{cursor:grabbing}
.hw-a{background:var(--gold);color:var(--gold-ink)}
.hw-b{background:var(--text);color:var(--bg)}
.same .hw-a{transform:translate(-50%,-115%)}.same .hw-b{transform:translate(-50%,15%)}
.hw-out{font:400 1.0625rem/1.45 var(--rr-sans);margin:0 0 16px;color:var(--muted)}
.hw-out b{font-weight:600;color:var(--text)}

/* spades: bid and tricks, scored */
.sp-row{display:flex;flex-wrap:wrap;gap:12px 32px}
.sp-step{display:flex;align-items:center;gap:10px}
.sp-k{min-width:3.6em;font:500 .8125rem/1 var(--rr-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sp-b{width:var(--rr-control);height:var(--rr-control);border:var(--rr-hair);border-color:var(--edge-hi);border-radius:0;background:transparent;color:var(--text);
  font:400 1.25rem/1 var(--rr-sans);cursor:pointer;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.sp-b:hover{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.sp-v{font:600 2.4rem/1 var(--rr-display);min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums}
.sp-pips{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:clamp(3px,.6vw,6px);margin-top:24px}
.sp-pips i{aspect-ratio:5/7;border:1px solid var(--edge-hi);transition:background-color var(--dur) var(--ease)}
.sp-pips i.on{background:var(--gold);border-color:var(--gold)}
.sp-pips i.bid{outline:2px solid var(--text);outline-offset:2px}
.sp-out{margin-top:20px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.sp-score{display:inline-block;padding:.04em .2em .04em .24em;font:600 clamp(3rem,2vw + 2.2rem,4.2rem)/.9 var(--rr-display);letter-spacing:.005em;font-variant-numeric:tabular-nums;
  color:var(--text);border-left:4px solid var(--gold)}
.sp.neg .sp-score{border-left-color:var(--down)}
.sp-why{font:400 1rem/1.4 var(--rr-sans);color:var(--muted)}

/* copenhagen: the districts, shaded */
.cph-modes{display:flex;gap:8px;flex-wrap:wrap}
.cph-map{display:block;width:100%;height:auto;max-height:320px;margin-top:12px;overflow:visible}
.cph-map .d{fill:color-mix(in srgb,var(--heat) 5%,var(--surface));stroke:var(--bg);stroke-width:1.5;stroke-linejoin:round;
  cursor:pointer;transition:fill var(--dur) var(--ease);outline:none}
[data-mode="safe"] .d[data-safe="1"],[data-mode="metro"] .d[data-metro="1"]{fill:color-mix(in srgb,var(--heat) 14%,var(--surface))}
[data-mode="safe"] .d[data-safe="2"],[data-mode="metro"] .d[data-metro="2"]{fill:color-mix(in srgb,var(--heat) 30%,var(--surface))}
[data-mode="safe"] .d[data-safe="3"],[data-mode="metro"] .d[data-metro="3"]{fill:color-mix(in srgb,var(--heat) 50%,var(--surface))}
[data-mode="safe"] .d[data-safe="4"],[data-mode="metro"] .d[data-metro="4"]{fill:color-mix(in srgb,var(--heat) 72%,var(--surface))}
[data-mode="safe"] .d[data-safe="5"],[data-mode="metro"] .d[data-metro="5"]{fill:var(--heat)}
.cph-map .d:hover,.cph-map .d:focus-visible,.cph-map .d.on{fill:var(--text)}
.cph-metro{pointer-events:none;transition:opacity var(--dur) var(--ease)}
.cph-metro rect{fill:var(--bg);stroke:var(--text);stroke-width:1.2}
[data-mode="safe"] .cph-metro{opacity:0}
.cph-out{margin-top:12px;font:400 .9375rem/1.45 var(--rr-sans);color:var(--muted);min-height:2.9em}
.cph-out b{font-weight:600;color:var(--text);margin-right:4px}

/* household: a sample statement, each line filed by the app's own rules */
.hh-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--edge)}
.hh-list{list-style:none;margin:0 0 16px;padding:0}
.hh-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d a" "c c";align-items:center;gap:6px 16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.hh-d{grid-area:d;font:400 .8125rem/1.3 var(--rr-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.hh-a{grid-area:a;font:500 .9375rem/1 var(--rr-mono);font-variant-numeric:tabular-nums}
.hh-c{grid-area:c;justify-self:start;display:inline-flex;align-items:center;gap:8px;height:var(--rr-tag);padding:0 12px;
  font:500 .8125rem/1 var(--rr-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2);border:1px solid var(--edge);color:var(--text)}
.hh-c::before{content:"";flex:none;width:8px;height:8px;background:var(--down)}   /* the kind, as a marker: out coral */
.hh-c.k-in::before{background:var(--up)}                                          /* in green */
.hh-c.k-move::before{background:var(--dim)}                                       /* a move between accounts: grey */
.hh-c.wait::before{display:none}
.hh-c.wait{background:none;border:1px dashed var(--edge-hi);color:var(--muted);min-width:5rem;justify-content:center}
@media (prefers-reduced-motion:no-preference){.hh-c.in{animation:stamp var(--dur) var(--ease) both}}
@keyframes stamp{from{opacity:0;transform:translateX(-6px)}}
@media (min-width:1000px){.hh-list li{grid-template-columns:minmax(0,1fr) auto 12.5rem;grid-template-areas:"d a c"}}

/* cfa: a level, its hours, and what each topic weighs */
.cfa-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.cfa-levels{display:flex;gap:8px;flex-wrap:wrap}
.cfa-hours{font:500 .8125rem/1.2 var(--rr-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:flex;align-items:baseline;gap:10px}
.cfa-h{font:600 clamp(2.6rem,2vw + 1.8rem,3.6rem)/.9 var(--rr-display);letter-spacing:.005em;color:var(--text);font-variant-numeric:tabular-nums}
.cfa-bar{display:block;width:100%;height:clamp(32px,4vw,44px);margin-top:20px;overflow:visible}
.cfa-seg{fill:var(--heat);cursor:pointer;transition:fill var(--dur) var(--ease);outline:none}
.cfa-seg.on,.cfa-seg:hover,.cfa-seg:focus-visible{fill:var(--text)}
.cfa-out{margin-top:14px;font:400 1rem/1.4 var(--rr-sans);color:var(--muted);min-height:1.4em}
.cfa-out b{font:600 1.0625rem/1.3 var(--rr-sans);color:var(--text)}
.cfa-bar{gap:3px}