/* The result tile (design wave, Calvin 11 October 2026): the yellow bolted spinner panel as a rubber
   playground tile. tool-page.js marks the tool's .headline as .result-tile.has-bolts, adds four
   .tile-bolt screws and a .tile-ring, puts the unit under the number and plays the landing spring
   (Web Animations; reduced motion keeps an opacity fade). Share cards draw the same tile
   (assets/share-card-canvas.js); saved results can reuse .result-tile with .tile-bolt children.
   Tokens only (assets/tokens.css), so light and dark themes follow the skin. */
.result-tile{transform-origin:50% 100%}
/* Real bolts replace the four painted ones, so they can turn when the tile lands. */
.result-panel .headline.has-bolts,.result-tile.has-bolts{background:var(--spinner)}
/* Bolt safe area: the corner bolts live in the tile's padding, never over its text. Top padding is the
   bolt's inset plus its size plus a clear gap, and the same at the bottom, so every line of text sits
   between the bolt rows whatever the width or text length; a longer explanation makes the tile taller
   and carries the bottom bolts down with it. tests/result-tile.test.js checks these sums and, in a
   real browser, that no text line comes within the clear gap of a bolt. */
.result-tile,.result-panel .headline{--bolt-size:14px;--bolt-inset:10px;--bolt-inset-bottom:14px;--bolt-clear:8px}
.result-tile.has-bolts,.result-panel .headline{padding-top:calc(var(--bolt-inset) + var(--bolt-size) + var(--bolt-clear));padding-bottom:calc(var(--bolt-inset-bottom) + var(--bolt-size) + var(--bolt-clear))}
.tile-bolt{position:absolute;width:var(--bolt-size,14px);height:var(--bolt-size,14px);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,var(--bolt-lit) 0 2px,var(--bolt-mid) 3.5px,var(--bolt-dark) 6.5px,transparent 7px);transform:rotate(-45deg)}
.tile-bolt::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;border-radius:1px;background:var(--bolt-dark)}
.tile-bolt-tl{left:var(--bolt-inset,10px);top:var(--bolt-inset,10px)}.tile-bolt-tr{right:var(--bolt-inset,10px);top:var(--bolt-inset,10px)}.tile-bolt-bl{left:var(--bolt-inset,10px);bottom:var(--bolt-inset-bottom,14px)}.tile-bolt-br{right:var(--bolt-inset,10px);bottom:var(--bolt-inset-bottom,14px)}
/* The stage colour spreading where the tile meets the floor; invisible at rest. It grows sideways and
   down from its top edge, so it never reaches the step label above the tile. */
.tile-ring{position:absolute;inset:-5px;border:4px solid var(--stage);border-radius:31px;opacity:0;pointer-events:none;transform-origin:50% 0}

/* Unit under the number: "S$105" large, "A Month" on its own line at reading size. A long amount
   scales down to fit one line instead of breaking between digits. */
.result-panel .headline .headline-value.is-split{overflow-wrap:normal}
.headline-value.is-split .headline-num{display:block;white-space:nowrap;font-size:min(1em,calc(165cqi / var(--tile-len,6)))}
.headline-value.is-split .headline-unit{display:block;margin-top:.14em;font:800 clamp(1.125rem,.3em,1.5rem)/1.2 var(--font-head);letter-spacing:0}
/* A plain amount ("S$21,000") stays on one line, scaled to fit. */
.result-panel .headline .headline-value.is-fit{white-space:nowrap;overflow-wrap:normal;font-size:min(clamp(3rem,15vw,4.4rem),24cqi,calc(165cqi / var(--tile-len,6)))}
/* Answers that are words or dates ("Due May 2027 · 30 weeks to go") get a calmer size and balanced lines. */
.result-panel .headline .headline-value.is-wordy{font-size:min(clamp(2rem,9vw,2.75rem),13cqi);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:normal}
/* The (i) help button on the tile keeps the tile's ink in both themes. */
.result-panel .result-tile .info-tip-button{border-color:var(--spinner-ink)!important;color:var(--spinner-ink)!important}
/* A live change (tool-page.js tick): the tile warms and the number glows for a moment, so a parent
   typing beside it notices the new answer. Colour only, so it stays with reduced motion. */
.result-tile{--tile-warm:color-mix(in srgb,var(--spinner) 55%,white)}
.result-tile.is-tinted{animation:tile-tint .7s ease-out}
.result-tile.is-tinted .headline-value{animation:tile-glow .7s ease-out}
@keyframes tile-tint{from{background-color:var(--tile-warm);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),0 0 0 4px var(--stage)}}
/* Colour fades stay with reduced motion (motion.css keeps them too); this keeps the tint's length. */
@media(prefers-reduced-motion:reduce){.result-tile.is-tinted,.result-tile.is-tinted .headline-value{animation-duration:.7s!important}}
@keyframes tile-glow{from{text-shadow:0 0 .3em var(--tile-warm),0 0 .08em var(--tile-warm)}}
@media print{.tile-bolt,.tile-ring{display:none}}