/* storey visualisation: the last cent */
/* Article prose (.prose p/li/ol) must not reach inside the figure. */
.viz.viz-storey p,.viz.viz-storey li{margin:0}
.viz.viz-storey ol,.viz.viz-storey ul{padding:0;list-style:none}
.viz.viz-storey .viz-fallback p+p{margin-top:10px}
.viz.viz-storey{
  /* Copper, one hue light to dark. The site accent is kept for the paradox flag only. */
  --storey-hi:#f8cfa9;--storey-light:#e29c69;--storey-cu:#c8794a;--storey-deep:#9c5530;--storey-dark:#6e3519;
  --storey-well:#262220;--storey-engrave:#5c2c14
}
.viz.viz-storey .storey-app{position:relative}
.viz.viz-storey .storey-defs{position:absolute;width:0;height:0;overflow:hidden}
.viz.viz-storey .storey-label{display:block;font:10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-muted);margin:0}
.viz.viz-storey .storey-label b{font-weight:400;color:var(--viz-ink);margin-left:6px}

/* Levy and presets */
.viz.viz-storey .storey-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;padding-bottom:20px;border-bottom:1px solid var(--viz-line)}
.viz.viz-storey .storey-stepper{display:flex;align-items:center;gap:12px;margin-top:8px}
.viz.viz-storey .storey-stepper button{width:44px;height:44px;padding:0;font-size:12px;letter-spacing:0;text-transform:none}
.viz.viz-storey .storey-stepper button.is-flash{background:var(--viz-ink);border-color:var(--viz-ink);color:var(--viz-bg)}
.viz.viz-storey .storey-levy{font:400 30px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--viz-ink);min-width:9.6ch;text-align:center;padding:6px 2px;cursor:ns-resize;user-select:none}
.viz.viz-storey .storey-levy:focus-visible{outline:2px solid var(--viz-accent);outline-offset:3px}
.viz.viz-storey .storey-presets{display:flex;flex-wrap:wrap;gap:6px}

/* Lots */
.viz.viz-storey .storey-key{margin:16px 0 0;font-size:12px;line-height:1.55;color:var(--viz-muted)}
.viz.viz-storey .storey-board{position:relative;padding-top:14px}
.viz.viz-storey .storey-lots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.viz.viz-storey .storey-lot{position:relative;display:grid;justify-items:center;padding:12px 8px 14px;background:var(--viz-raised);border-top:2px solid transparent;transition:border-color .35s}
.viz.viz-storey .storey-lot-head{width:100%;display:flex;justify-content:space-between;gap:4px;font:10px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--viz-muted)}
.viz.viz-storey .storey-lot-head span+span{color:var(--viz-faint)}
.viz.viz-storey .storey-coin-slot{margin:14px 0 12px}
.viz.viz-storey svg.storey-coin{display:block;width:76px;height:76px}
.viz.viz-storey .storey-engrave{font:500 25px var(--sans);fill:var(--storey-engrave);letter-spacing:-.5px}
.viz.viz-storey .storey-bill{margin:0;font:400 17px/1.2 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--viz-ink);transition:color .25s}
.viz.viz-storey .storey-bill.is-pending{color:var(--viz-faint)}
.viz.viz-storey .storey-delta{margin:3px 0 0;height:15px;font:11px/15px var(--mono);color:var(--viz-muted);opacity:0;transition:opacity .35s}
.viz.viz-storey .storey-delta.is-shown{opacity:1}
.viz.viz-storey .storey-exact{margin:4px 0 0;font:10px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--viz-faint);white-space:nowrap}
.viz.viz-storey .storey-exact u{text-decoration:none;color:var(--viz-muted);border-bottom:1.5px solid var(--storey-cu);padding-bottom:1px}
.viz.viz-storey .storey-lot.is-paradox{border-top-color:var(--viz-accent)}
.viz.viz-storey .storey-lot.is-paradox .storey-delta{color:var(--viz-accent)}

/* Queue for the spare cents */
.viz.viz-storey .storey-queue{margin-top:22px;transition:opacity .35s}
.viz.viz-storey .storey-queue-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;margin:0 0 12px}
.viz.viz-storey .storey-queue-rule{font:10px/1.6 var(--mono);color:var(--viz-faint)}
.viz.viz-storey .storey-chips{--gap:16px;position:relative;height:60px}
.viz.viz-storey .storey-chip{position:absolute;left:0;top:0;width:calc((100% - 5 * var(--gap)) / 6);height:100%;display:grid;justify-items:center;align-content:center;gap:3px;
  border:1px solid var(--viz-line);background:var(--viz-bg);transform:translateX(calc(var(--rank, 0) * (100% + var(--gap))));transition:transform .52s cubic-bezier(.65,0,.35,1),border-color .3s}
.viz.viz-storey .storey-chip.is-in{border-color:var(--storey-deep)}
.viz.viz-storey svg.storey-mini{display:block;width:18px;height:18px}
.viz.viz-storey .storey-chip-lot{font:9px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--viz-muted)}
.viz.viz-storey .storey-chip-frac{font:11px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--viz-ink)}
.viz.viz-storey .storey-eq,.viz.viz-storey .storey-cut{position:absolute;left:calc(var(--i, 0) * ((100% - 5 * var(--gap)) / 6 + var(--gap)) - var(--gap) / 2)}
.viz.viz-storey .storey-eq{top:50%;z-index:1;transform:translate(-50%,-50%);font:12px/1 var(--mono);color:var(--viz-muted);background:var(--viz-bg);padding:3px 0;opacity:0;transition:opacity .3s}
.viz.viz-storey .storey-eq.is-shown{opacity:1}
.viz.viz-storey .storey-cut{--i:var(--cut, 0);top:-6px;bottom:-6px;width:1px;background:var(--viz-faint);opacity:0;transition:left .52s cubic-bezier(.65,0,.35,1),opacity .3s}
.viz.viz-storey .storey-cut.is-shown{opacity:1}
.viz.viz-storey .storey-tokens{position:absolute;inset:0;pointer-events:none;z-index:2}
.viz.viz-storey .storey-token{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.viz.viz-storey svg.storey-token-coin{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.viz.viz-storey .is-round .storey-chips{opacity:.3}

/* Sum, method and the note */
.viz.viz-storey .storey-result{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-top:22px;padding-top:16px;border-top:1px solid var(--viz-line)}
.viz.viz-storey .storey-sum{margin:0;font:11px/1.5 var(--mono);color:var(--viz-muted);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.viz.viz-storey .storey-sum b{font-weight:400;font-size:16px;color:var(--viz-ink);font-variant-numeric:tabular-nums}
.viz.viz-storey .storey-check{padding:2px 7px;border:1px solid var(--viz-line);color:var(--viz-muted);transition:color .25s,border-color .25s}
.viz.viz-storey .storey-check.is-pending{color:var(--viz-faint)}
.viz.viz-storey .storey-check.is-off{border-color:var(--viz-accent);color:var(--viz-ink)}
.viz.viz-storey .storey-method{display:flex}
.viz.viz-storey .storey-method button+button{margin-left:-1px}
.viz.viz-storey .storey-note{min-height:72px;margin-top:16px;transition:opacity .4s}
.viz.viz-storey .storey-note.is-hidden{opacity:0;transition-duration:.15s}
.viz.viz-storey .storey-note-lead{margin:0;font:500 15px/1.45 var(--sans);letter-spacing:-.15px;color:var(--viz-ink);text-wrap:balance}
.viz.viz-storey .storey-note.is-paradox .storey-note-lead:before{content:'';display:inline-block;width:7px;height:7px;background:var(--viz-accent);margin-right:10px;vertical-align:2px}
.viz.viz-storey .storey-note-more{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--viz-muted);max-width:70ch;text-wrap:pretty}

/* Six lots need ~860px of figure; below that, two rows of three. */
@container viz (max-width:860px){
  .viz.viz-storey .storey-lots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Phones */
@container viz (max-width:560px){
  .viz.viz-storey .storey-top{align-items:stretch;flex-direction:column}
  .viz.viz-storey .storey-stepper{justify-content:space-between}
  .viz.viz-storey .storey-levy{font-size:28px;flex:1}
  .viz.viz-storey .storey-key{min-height:3.1em}
  .viz.viz-storey .storey-lots{gap:8px}
  .viz.viz-storey .storey-lot{padding:10px 6px 12px}
  .viz.viz-storey .storey-coin-slot{margin:10px 0 9px}
  .viz.viz-storey svg.storey-coin{width:60px;height:60px}
  .viz.viz-storey .storey-bill{font-size:14px}
  .viz.viz-storey .storey-exact-k{display:block;font-size:8px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1px}
  .viz.viz-storey .storey-chips{height:56px}
  .viz.viz-storey .storey-chip-word{display:none}
  .viz.viz-storey .storey-chip-lot{font-size:10px;color:var(--viz-ink)}
  .viz.viz-storey .storey-chip-frac{font-size:10px;color:var(--viz-muted)}
  .viz.viz-storey .storey-method{width:100%}
  .viz.viz-storey .storey-method button{flex:1}
  .viz.viz-storey .storey-note{min-height:120px}
}
@media (prefers-reduced-motion:reduce){
  .viz.viz-storey *{transition:none!important}
}