/* Salary to hourly (tools/salary-to-hourly.html). Frame: tool-frame.css + tools/kit.css + tools/quickwin.css. */

/* Hero ladder: seven pay periods, log-scaled bars; the hourly rung carries the accent */
.sh-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sh-rung { display: grid; grid-template-columns: minmax(130px, 12em) minmax(0, 1fr) minmax(120px, 10em); align-items: center; gap: 8px 24px; min-height: 52px; border-bottom: 1px solid var(--hair-stage); }
.sh-rung:last-child { border-bottom: 0; }
.sh-rung-name { font: 400 clamp(17px, 1.4vw, 20px)/1.2 var(--font-display); color: var(--parchment); }
.sh-rung-name small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--font-sans); color: var(--parchment-2); }
.sh-rung-track { display: block; height: 22px; }
.sh-rung-bar { display: block; height: 100%; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(236, 230, 216, .75) 0 2px, rgba(236, 230, 216, .1) 2px 6px); overflow: hidden; }
.sh-rung-net { display: block; height: 100%; background: rgb(189, 184, 172); }
.sh-rung-val { font: 400 clamp(18px, 1.6vw, 22px)/1.1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--parchment); text-align: right; }
.sh-rung-val small { display: block; margin-top: 4px; font: 400 12.5px/1.2 var(--font-sans); color: var(--parchment-2); }
.sh-rung.is-main .sh-rung-net { background: var(--kesef); }
.sh-rung.is-main .sh-rung-bar { background: repeating-linear-gradient(135deg, rgba(255, 214, 2, .8) 0 2px, rgba(255, 214, 2, .12) 2px 6px); }
.sh-rung.is-main .sh-rung-val { color: var(--kesef); }
@media (prefers-reduced-motion: no-preference) { .sh-rung-bar, .sh-rung-net { transition: width .5s var(--ease); } }
@media (max-width: 760px) {
  .sh-rung { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; }
  .sh-rung-track { grid-column: 1 / -1; grid-row: 2; height: 14px; }
}

/* Work area */
.sh-hint { margin-top: 12px; line-height: 1.5; }
.sh-tax-rows { margin-top: 8px; }
.sh-tax-rows[hidden] { display: none; }
#sh-tax-fields { margin-top: 24px; }
.sh-hours-lead { margin: 12px 0 0; font: 400 15px/1.55 var(--font-sans); color: var(--ink-2); max-width: 36em; }
#sh-hours-table tbody tr:last-child td { font-weight: 400; }