/* Salary Compare: page 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)}

.sal-form{display:grid;gap:var(--s3);width:min(820px,100%)}
.sal-row{width:100%;gap:var(--s2)}
.sal-tag{flex:none;width:52px;font:500 var(--t-cap) var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.sal-cur{font-family:var(--font-serif);font-style:italic;font-size:1.6rem;color:var(--ink-2)}
.sal-row #aAmt,.sal-row #bAmt{flex:0 0 9ch;font-family:var(--font-serif);font-size:1.6rem}
.sal-word{font-family:var(--font-serif);font-style:italic;font-size:1.2rem;color:var(--ink-2)}
.sal-row .sal-place{flex:1;font-size:1.0625rem}
.sal-st{flex:none;height:40px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font:500 var(--t-small) var(--font-ui)}
.sal-st[hidden]{display:none}
.sal-opts{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:center}
.sal-err{color:var(--cta)}

.sal-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}
.sal-main .sc-line{font-size:clamp(1.6rem,3vw,2.3rem)}
.sal-main:hover{transform:none}
.sal-main .sd-d{font-size:clamp(2.5rem,5vw,3.75rem)}

.sal-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.sal-col{gap:var(--s2)}
.sal-li{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.sal-li b{font-weight:500;font-variant-numeric:tabular-nums}
.sal-li.tot{border-bottom:0;border-top:2px solid var(--ink);font-size:var(--t-body-lg)}
.sal-li.tot b{font-weight:600}
.sal-li.f span::before,.sal-li.s span::before,.sal-li.p span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px}
.sal-stack{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin:var(--s2) 0}
.sal-stack .k{background:var(--ink)}
.sal-stack .f,.sal-li.f span::before{background:var(--cta)}
.sal-stack .s,.sal-li.s span::before{background:var(--ink-3)}
.sal-stack .p,.sal-li.p span::before{background:var(--line-strong)}

.sal-rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.sal-rank{list-style:none;margin:0;padding:0;counter-reset:r}
.sal-rank li{counter-increment:r}
.sal-rank button{display:grid;grid-template-columns:28px 1fr auto 64px;gap:var(--s2);align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:400 var(--t-body) var(--font-ui);text-align:left;cursor:pointer}
.sal-rank button::before{content:counter(r);color:var(--ink-3);font-size:var(--t-small)}
.sal-rank button:hover span{text-decoration:underline}
.sal-rank b{font-weight:500;font-variant-numeric:tabular-nums}
.sal-rank em{font-style:normal;font-size:var(--t-small);text-align:right;color:var(--ink-2)}
.sal-rank em.up{color:var(--cta)}

@media(max-width:899px){.sal-cols,.sal-rank-grid{grid-template-columns:1fr}}
@media(max-width:639px){
  .sal-row{height:auto;flex-wrap:wrap;padding:var(--s3) var(--s4);border-radius:var(--r-lg)}
  .sal-tag{width:100%}
  .sal-row #aAmt,.sal-row #bAmt{flex:1 1 40%;height:44px}
  .sal-row .sal-place{flex:1 1 100%;height:44px;border-top:1px solid var(--line)}
  .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}
  .sal-rank button{grid-template-columns:24px 1fr auto}
  .sal-rank em{display:none}
}