/* Inflation Time Machine: page-specific pieces on top of the shared Days Until system */
.modal[hidden]{display:none}
html{scroll-padding-top:calc(var(--header-h) + 16px)}
.hdr-in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}

/* calculator pill: "$ 100 in 1975 in 2025" in the Days Until search shape */
.itm-form{justify-content:center;gap:var(--s3);padding-inline:var(--s5) var(--s2)}
.itm-cur{font-family:var(--font-serif);font-style:italic;font-size:1.75rem;color:var(--ink-2)}
.itm-form input{font-family:var(--font-serif);font-size:1.75rem;min-width:4ch}
.itm-word{font-family:var(--font-serif);font-style:italic;font-size:1.25rem;color:var(--ink-2)}
.itm-sel{appearance:none;height:44px;padding:0 30px 0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23857d73' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);font:500 1.0625rem var(--font-ui);cursor:pointer}
#line .inf{fill:none;stroke:var(--cta);stroke-width:2;stroke-dasharray:6 5}
.itm-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:var(--s3)}
.itm-key span[class^=k-]{display:inline-block;width:22px;height:0;border-top:2.5px solid var(--ink)}
.itm-key .k-inf{border-top:2px dashed var(--cta);margin-left:var(--s3)}
.itm-sel:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.itm-swap{font-size:18px;flex:none}
.itm-decades{justify-content:center;max-width:760px}

/* main result: Days Until's horizontal card */
.itm-result{padding-bottom:var(--s6)}
.sc--h{flex-direction:row;min-height:220px}
.sc--h>.sc-slot{flex:0 0 auto;width:34%;aspect-ratio:auto;border-bottom:0;border-right:var(--card-rule)}
.sc--h .sc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5) var(--s6);justify-content:center}
.itm-main .sc-line{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.itm-main:hover{transform:none}
.itm-actions{margin-top:var(--s2)}
.today-banner b{font-weight:600}

/* line chart */
.itm-chart{position:relative;padding:var(--s4)}
#line{width:100%;display:block;touch-action:pan-y}
#line .g{stroke:var(--line);stroke-width:1}
#line .t{fill:var(--ink-3);font:12px var(--font-ui)}
#line .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
#line .area{fill:color-mix(in srgb,var(--ink) 8%,transparent)}
#line .pt{fill:var(--cta);stroke:var(--surface);stroke-width:2}
#line .hair{stroke:var(--line-strong);stroke-dasharray:3 3}
.itm-tip{position:absolute;top:var(--s3);padding:6px 12px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:var(--t-small);pointer-events:none;white-space:nowrap}
.itm-tip b{font-weight:600;margin-right:6px}

/* item cards */
.itm-groups{margin-bottom:var(--s5)}
.itm-sort .select{min-width:200px}
.itm-item{position:relative}
.itm-cards .sc:nth-child(3){display:flex}
.itm-hit{position:absolute;inset:0;z-index:1;border:0;background:none;border-radius:inherit;cursor:pointer}
.itm-hit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.itm-item .sd-m{text-transform:none;letter-spacing:0}
.itm-item .sc-line{font-size:1.5rem}
.itm-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.itm-item .sc-slot{aspect-ratio:auto;padding:var(--s5) var(--s3)}
.itm-item .sd-d{font-size:clamp(2.25rem,4vw,3rem)}
.itm-item .sc-body{padding:var(--s4)}
@media(max-width:1099px){.itm-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){.itm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){
  .itm-cards{grid-template-columns:1fr;gap:var(--s3)}
  .itm-item{flex-direction:row}
  .itm-item .sc-slot{flex:0 0 38%;border-bottom:0;border-right:var(--card-rule);padding:var(--s3) var(--s2)}
  .itm-item .sd-d{font-size:2rem}
  .itm-item .sc-body{padding:var(--s3)}
  .itm-item .sc-line{font-size:1.2rem}
}
.itm-tag{color:var(--ink-2);font-weight:500}
.itm-tag.up{color:var(--cta)}
.itm-missing{margin-top:var(--s4)}

/* plain dollars */
.itm-mform{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.itm-mform .input{width:9ch;font-family:var(--font-serif);font-size:1.5rem}
.itm-mform .select{width:auto}
.itm-mout{margin:var(--s4) 0 var(--s2)}

/* salary */
.itm-sal-grid{display:grid;grid-template-columns:2fr 1fr 2fr 1fr;gap:var(--s4)}
.itm-sal-out{font-size:var(--t-h3)}
.itm-sal-track{position:relative;height:12px;overflow:visible}
.itm-sal-mark{position:absolute;top:-6px;width:3px;height:24px;margin-left:-1px;background:var(--cta);border-radius:2px}
.perk-mini li>span:first-child{color:var(--ink);font-weight:600}

@media(max-width:899px){.itm-sal-grid{grid-template-columns:2fr 1fr}}
@media(max-width:639px){
  .itm-form{height:auto;flex-wrap:wrap;justify-content:center;padding:var(--s3) var(--s4);border-radius:var(--r-lg)}
  .itm-form input{flex:1 1 60%;width:auto;height:48px;font-size:1.5rem}
  .itm-form .itm-word{flex-basis:100%;text-align:center}
  .sc--h{flex-direction:column}
  .sc--h>.sc-slot{width:auto;aspect-ratio:16/8;border-right:0;border-bottom:var(--card-rule)}
  .sc--h .sc-body{padding:var(--s4)}
  .hdr-tools .btn{display:none}
}