/* Inflation calculator (tools/inflation.html). Frame: tool-frame.css + tools/kit.css + tools/quickwin.css. */

/* Hero chart: the CPI since 1913, the chosen span in the accent */
.in-line-all { fill: none; stroke: rgba(236, 230, 216, .5); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.in-line-down { fill: none; stroke: rgba(236, 230, 216, .6); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.in-line-span { fill: none; stroke: var(--kesef); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.in-area { fill: rgba(255, 214, 2, .08); }
.qw-key .in-k-all { height: 0; border-top: 2px solid rgba(236, 230, 216, .5); border-radius: 0; }
.qw-key .in-k-down { height: 0; border-top: 2px dashed rgba(236, 230, 216, .6); border-radius: 0; }
.in-tags { position: absolute; inset: 0; pointer-events: none; }
.in-tag { position: absolute; transform: translate(-6px, -100%); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.in-tag i { order: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--parchment); box-shadow: 0 0 0 3px var(--stage-2); transform: translate(1px, 5px); }
.in-tag b { order: 1; font: 500 13px/1.2 var(--font-sans); color: var(--parchment); white-space: nowrap; background: var(--stage-2); padding: 2px 4px; border-radius: 4px; }
.in-tag--b i { background: var(--kesef); }
.in-tag--b b { color: var(--kesef); }
.in-tag.is-right { transform: translate(calc(-100% + 6px), -100%); align-items: flex-end; }
.in-tag.is-right i { transform: translate(-1px, 5px); }
.in-tag--d { transform: translate(calc(-100% + 6px), 6px) !important; flex-direction: column-reverse; }
.in-tag--d i { transform: translate(-1px, -5px) !important; }

/* Basket: ten bags, filled by what $100 still buys */
.in-basket { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair-stage); display: grid; grid-template-columns: minmax(180px, 16em) minmax(0, 1fr); gap: 10px 28px; align-items: center; }
.in-basket-title { margin: 0; font: 400 clamp(18px, 1.5vw, 21px)/1.25 var(--font-display); color: var(--parchment); }
.in-bags { display: flex; gap: clamp(4px, 1vw, 12px); grid-row: span 2; }
.in-bags-say { margin: 0; font: 400 13.5px/1.45 var(--font-sans); color: var(--parchment-2); }
.in-bag { position: relative; flex: 1 1 0; max-width: 44px; aspect-ratio: 40 / 44; }
.in-bag svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.in-bag > svg .in-bag-b { fill: none; stroke: rgba(236, 230, 216, .35); stroke-width: 1.5; }
.in-bag > svg .in-bag-h { stroke: rgba(236, 230, 216, .35); }
.in-bag-fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--f)) 0 0); }
.in-bag-fill .in-bag-b { fill: var(--parchment); stroke: var(--parchment); stroke-width: 1.5; }
.in-bag-fill .in-bag-h { stroke: var(--parchment); }
@media (prefers-reduced-motion: no-preference) { .in-bag-fill { transition: clip-path .5s var(--ease); } }
@media (max-width: 760px) {
  .in-basket { grid-template-columns: 1fr; }
  .in-bags { grid-row: auto; }
  .in-tag b { font-size: 12px; }
}

/* Work area */
.in-mode .ks-seg { max-width: 100%; }
.in-mode .ks-seg button { padding: 0 16px; }
.in-hint { margin-top: 16px; line-height: 1.55; }
.in-chips { margin-top: 16px; }
#in-past > .tk-field:first-child, #in-future > .tk-field:first-child { margin-top: 24px; }