/* =============================================================================
   Calculator — the layout, the form panel and the result panel.

   Mobile first throughout. The two-column desktop layout is an enhancement added
   at 62rem; below that the order in the markup is the order on screen, which is
   exactly the order the brief asks for: inputs, button, answer, breakdown.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.calculator-header {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.calculator-header__title {
  margin-top: var(--space-3);
  font-size: clamp(1.875rem, 5.5vw, 2.625rem);
  letter-spacing: -0.03em;
}

.calculator-header__subtitle {
  margin-top: var(--space-3);
  max-width: 38rem;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

/* -----------------------------------------------------------------------------
   Two-panel layout
   -------------------------------------------------------------------------- */
/* minmax(0, …), not a bare 1fr: a bare 1fr track cannot be narrower than its content's
   natural minimum, and the form panel's (set by the state search box) is 321px, so on a
   320px screen it pushed the page sideways. */
.calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.calculator__below {
  grid-column: 1 / -1;
}

@media (min-width: 62rem) {
  .calculator {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-6);
  }

  /* The answer follows the inputs down the page: adjust a field, watch the
     number change, without scrolling back up to find it. */
  .calculator__panel--result {
    position: sticky;
    top: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
   Form panel
   -------------------------------------------------------------------------- */
.paycheck-form {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 48rem) {
  .paycheck-form {
    padding: var(--space-6);
  }
}

/* The same rhythm `.input-section + .input-section` already sets, extended to the
   advanced block and the actions so the whole panel breathes on one grid. */
.paycheck-form > * + * {
  margin-top: var(--space-6);
}

.income-slot > * + * {
  margin-top: var(--space-5);
}

.state-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.locality-slot:not(:empty) {
  margin-top: var(--space-4);
}

.unit-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.unit-field .segmented {
  width: 5.5rem;
}

.advanced > * + * {
  margin-top: var(--space-6);
}

.paycheck-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.paycheck-form__secondary {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

/* Closer to the button than the section rhythm, because it is about the button. */
.privacy-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* -----------------------------------------------------------------------------
   Result card
   -------------------------------------------------------------------------- */
.result {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

@media (min-width: 48rem) {
  .result {
    padding: var(--space-6);
  }
}

/* Before a calculation the card is a quiet placeholder; afterwards it is the
   loudest thing on the page. The border does the work of saying which. */
.result:not(.is-empty) {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-lg);
}

/* The switcher inside this wrapper is `hidden` until there is a result, so the
   wrapper only claims space once there is something to switch between. */
.result:not(.is-empty) .result__switcher {
  margin-bottom: var(--space-5);
}

.result__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.result__amount {
  display: flex;
  align-items: baseline;
  margin-top: var(--space-2);
  font-family: var(--font-numeric);
  font-size: clamp(2.75rem, 12vw, 3.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Cents are information, not the headline — same colour family, smaller. */
.result__amount-cents {
  font-size: 0.5em;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.result__cadence {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--brand-600);
}

.result__context {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.result__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.result__stat-label {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.result__stat-value {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.result__stat-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.result__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-2);
  text-align: center;
}

.result__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
}

.result__empty-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.result__empty-text {
  max-width: 24rem;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* -----------------------------------------------------------------------------
   Everything under the result card
   -------------------------------------------------------------------------- */
.result-panel > * + * {
  margin-top: var(--space-4);
}

.result-details > * + * {
  margin-top: var(--space-4);
}

.summary,
.breakdown,
.explanation {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* -----------------------------------------------------------------------------
   "You keep..." summary
   -------------------------------------------------------------------------- */
.summary__headline {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.summary__bar {
  height: 10px;
  margin: var(--space-3) 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.summary__bar-keep {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone-takehome);
  transition: width var(--duration) var(--ease);
}

.summary__detail {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* -----------------------------------------------------------------------------
   Breakdown
   -------------------------------------------------------------------------- */
.breakdown__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.breakdown__title {
  font-size: var(--text-md);
}

.breakdown__caption {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.breakdown-bar {
  margin: var(--space-4) 0 var(--space-2);
}

.breakdown-bar__track {
  display: flex;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.breakdown-bar__segment {
  height: 100%;
  background: var(--tone, var(--ink-muted));
  transition: width var(--duration) var(--ease);
}

.breakdown-bar__segment + .breakdown-bar__segment {
  border-left: 1px solid var(--surface);
}

.breakdown__list {
  display: flex;
  flex-direction: column;
}

.tax-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.tax-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tax-row__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  font-size: var(--text-base);
  color: var(--ink-soft);
}

.tax-row__swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--tone, var(--ink-muted));
  transform: translateY(-1px);
}

.tax-row__note {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* Line the note up under the label text, not under the swatch — but only on the
   rows that have a swatch in the first place. */
.tax-row__label:has(.tax-row__swatch) .tax-row__note {
  padding-left: calc(9px + var(--space-2));
}

.tax-row__values {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: none;
  text-align: right;
}

.tax-row__amount {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The share column is fixed-width so the percentages form a straight edge. */
.tax-row__share {
  min-width: 3.25rem;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.tax-row--muted .tax-row__label,
.tax-row--muted .tax-row__amount {
  color: var(--ink-muted);
}

.tax-row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  border-bottom: 0;
}

.tax-row--total .tax-row__label {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.tax-row--total .tax-row__amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

/* -----------------------------------------------------------------------------
   Explanation
   -------------------------------------------------------------------------- */
.explanation__title {
  font-size: var(--text-md);
}

.explanation__intro {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

.explanation__sections {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.explanation__sections .disclosure__panel > p + p {
  margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------------
   Notices and disclaimer
   -------------------------------------------------------------------------- */
.notices {
  display: grid;
  gap: var(--space-2);
}

/*
 * The estimate notice sits directly under the result card.
 *
 * Informational, not a warning: it qualifies a figure that is correct rather than
 * flagging a problem with it, so it takes the brand accent and the sunken surface
 * instead of the amber that `.notice` below uses for genuine warnings.
 */
.estimate-notice {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

.estimate-notice__title {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.estimate-notice__lead {
  margin-top: var(--space-1);
  color: var(--ink-muted);
}

.estimate-notice__list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.estimate-notice__list > li {
  position: relative;
  padding-left: 1.1em;
}

.estimate-notice__list > li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
}

.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warning-600);
  border-radius: var(--radius-md);
  background: var(--warning-50);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--warning-600);
}

.disclaimer {
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: transparent;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ink-muted);
}

.disclaimer__lead strong {
  color: var(--ink-soft);
}

.disclaimer__list {
  padding-left: 1.1em;
  margin: var(--space-2) 0;
}

.disclaimer__tail {
  margin-top: var(--space-2);
}

/* Used where the caveat sits inside another block rather than beside it. */
.disclaimer--compact {
  padding: var(--space-3) 0;
  border: 0;
}

/* -----------------------------------------------------------------------------
   Salary ↔ hourly converter
   -------------------------------------------------------------------------- */

/* The direction and the amount take a full row each; hours and weeks share one. */
.converter-fields > .converter-fields__wide {
  grid-column: 1 / -1;
}

/* The answer can be as long as $400,000,000.00, wider than a 320px card at headline
   size. The converter's headline may then wrap, cents first, instead of pushing the
   card past the screen edge. Ordinary figures such as $25.00 never reach the edge. */
.result--converter .result__amount {
  flex-wrap: wrap;
}

.result--converter .result__amount-whole {
  min-width: 0;
  overflow-wrap: anywhere;
}

.converter-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* A large figure and its unit can be wider than a 320px row, so the unit may drop
   under the figure instead of pushing the row past the screen edge. */
.converter-equivalents .tax-row__values,
.converter-schedule .tax-row__values {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--space-2);
  min-width: 0;
}

.converter-equivalents .tax-row__amount,
.converter-schedule .tax-row__amount {
  overflow-wrap: anywhere;
}

/* Units are words ("per month"), not percentages: wide enough for "per paycheck" so the
   figures still share a straight right edge. */
.converter-equivalents .tax-row__share,
.converter-schedule .tax-row__share {
  min-width: 4.75rem;
  text-align: left;
}

/* -----------------------------------------------------------------------------
   Overtime pay calculator
   -------------------------------------------------------------------------- */

/* The rate, the multiplier and the custom multiplier take a full row each; regular and
   overtime hours share one. */
.overtime-fields > .overtime-fields__wide {
  grid-column: 1 / -1;
}

/* The total can be as long as $5,040,000.00 (168 overtime hours at 3× $10,000 an hour),
   wider than a 320px card at headline size, so the headline may wrap, cents first,
   instead of pushing the card past the screen edge. Ordinary figures never reach the
   edge. */
.result--overtime .result__amount {
  flex-wrap: wrap;
}

.result--overtime .result__amount-whole {
  min-width: 0;
  overflow-wrap: anywhere;
}

.overtime-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* A large figure and its unit can be wider than a 320px row, so the unit may drop
   under the figure instead of pushing the row past the screen edge. */
.overtime-pay .tax-row__values,
.overtime-breakdown .tax-row__values,
.overtime-projection .tax-row__values {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--space-2);
  min-width: 0;
}

/* A figure is never split across lines, where "$1,680,000." and "00" could be read as
   two amounts. The longest, $262,080,000.00 a year, still fits a 320px row whole: the
   label beside it wraps instead. */
.overtime-pay .tax-row__amount,
.overtime-breakdown .tax-row__amount,
.overtime-projection .tax-row__amount {
  white-space: nowrap;
}

/* Units are words ("per week", "regular rate"), not percentages: wide enough for the
   longest so the figures still share a straight right edge. */
.overtime-pay .tax-row__share,
.overtime-breakdown .tax-row__share,
.overtime-projection .tax-row__share {
  min-width: 5.25rem;
  text-align: left;
}

/* -----------------------------------------------------------------------------
   Bonus paycheck calculator
   -------------------------------------------------------------------------- */

/* Said once at the top of Advanced options: none of these deductions comes out of the
   bonus. */
.advanced__note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* An after-tax bonus can be as long as $100,000,000.00 less tax, wider than a 320px card
   at headline size, so the headline may wrap, cents first, instead of pushing the card
   past the screen edge. */
.result--bonus .result__amount {
  flex-wrap: wrap;
}

.result--bonus .result__amount-whole {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* "Estimated effective tax rate on this bonus" is too long a label for half the card. */
.result__stat--wide {
  grid-column: 1 / -1;
}

.result--bonus .result__stat-value {
  overflow-wrap: anywhere;
}

.bonus-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* A large figure and its share can be wider than a 320px row, so the share may drop
   under the figure instead of pushing the row past the screen edge. */
.bonus-taxes .tax-row__values,
.bonus-income .tax-row__values {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--space-2);
  min-width: 0;
}

/* A figure is never split across lines, where "$100,000,000." and "00" could be read as
   two amounts; the label beside it wraps instead. */
.bonus-taxes .tax-row__amount,
.bonus-income .tax-row__amount {
  white-space: nowrap;
}

/* The worked example has four columns, one more than the pay table was sized for, and
   at its usual spacing it is wider than a 320px screen. The gaps between columns are
   narrower until there is room. The outer edges keep the pay table's own zero padding. */
.prose .pay-table.bonus-table th,
.prose .pay-table.bonus-table td {
  padding-inline: var(--space-1);
}

@media (min-width: 30rem) {
  .prose .pay-table.bonus-table th,
  .prose .pay-table.bonus-table td {
    padding-inline: var(--space-3);
  }
}

/* -----------------------------------------------------------------------------
   Pay raise calculator
   -------------------------------------------------------------------------- */

/* One field per row, even where the grid has room for two: three options are too many
   for half the form, and the salary beside an empty half row would read as a field
   missing. */
.raise-fields {
  grid-template-columns: minmax(0, 1fr);
}

/* The take-home estimate is opt-in. The checkbox is drawn larger than the browser's
   13px default, and the whole row is tall enough to tap. */
.raise-estimate__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.raise-estimate__box {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--brand-600);
  cursor: pointer;
}

.raise-estimate__box:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.raise-estimate__label {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  cursor: pointer;
}

.raise-estimate__hint {
  margin-top: var(--space-1);
}

.raise-tax > * + * {
  margin-top: var(--space-4);
}

.raise-tax__fields > * + * {
  margin-top: var(--space-5);
}

.raise-tax__status {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.raise-tax__status.is-error {
  font-weight: var(--weight-medium);
  color: var(--danger-600);
}

/* A new salary can be as long as $100,000,000.00, wider than a 320px card at headline
   size, so the headline may wrap, cents first, instead of pushing the card past the
   screen edge. */
.result--raise .result__amount {
  flex-wrap: wrap;
}

.result--raise .result__amount-whole {
  min-width: 0;
  overflow-wrap: anywhere;
}

.result--raise .result__stat-value {
  overflow-wrap: anywhere;
}

.raise-take-home__subtitle {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
}

/* As in the bonus panels: a large figure and its unit may drop under one another, but a
   figure is never split across lines. */
.raise-change .tax-row__values,
.raise-new-pay .tax-row__values,
.raise-hourly .tax-row__values,
.raise-take-home .tax-row__values,
.raise-taxes .tax-row__values {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--space-2);
  min-width: 0;
}

.raise-change .tax-row__amount,
.raise-new-pay .tax-row__amount,
.raise-hourly .tax-row__amount,
.raise-take-home .tax-row__amount,
.raise-taxes .tax-row__amount {
  white-space: nowrap;
}

/* The worked example has four columns, like the bonus example, and needs the same
   narrower gaps on a 320px screen. */
.prose .pay-table.raise-table th,
.prose .pay-table.raise-table td {
  padding-inline: var(--space-1);
}

@media (min-width: 30rem) {
  .prose .pay-table.raise-table th,
  .prose .pay-table.raise-table td {
    padding-inline: var(--space-3);
  }
}

/* -----------------------------------------------------------------------------
   Pay stub calculator
   -------------------------------------------------------------------------- */

.pay-stub-income > * + * {
  margin-top: var(--space-5);
}

/* The additional earnings and how often they are paid read as one question, and "This
   paycheck only" is too long an option for half the form. */
.pay-stub-extra {
  grid-template-columns: minmax(0, 1fr);
}

/* A paycheck can be as long as $100,000,000.00, wider than a 320px card at headline
   size, so the headline may wrap, cents first, instead of pushing the card past the
   screen edge. */
.result--pay-stub .result__amount {
  flex-wrap: wrap;
}

.result--pay-stub .result__amount-whole {
  min-width: 0;
  overflow-wrap: anywhere;
}

.result--pay-stub .result__stat-value {
  overflow-wrap: anywhere;
}

.pay-stub__header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.pay-stub__note,
.pay-stub__meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.pay-stub__section {
  margin-top: var(--space-5);
}

.pay-stub__section-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
}

/* Net pay closes the stub, set apart from the sections above it as the figure the
   whole stub works towards. */
.pay-stub__section--net {
  padding-top: var(--space-3);
  border-top: 2px solid var(--line-strong);
}

/* Section totals step down a size so estimated net pay is the largest line on the stub. */
.pay-stub .tax-row--total .tax-row__amount {
  font-size: var(--text-lg);
}

.pay-stub .pay-stub__section--net .tax-row--total .tax-row__amount {
  font-size: var(--text-2xl);
}

/* As in the bonus panels: a large figure and its share may drop under one another, but a
   figure is never split across lines. */
.pay-stub .tax-row__values,
.pay-stub-annual .tax-row__values {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--space-2);
  min-width: 0;
}

.pay-stub .tax-row__amount,
.pay-stub-annual .tax-row__amount {
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Time card calculator
   A week of day cards, each with two shifts of clock-in and clock-out times, an
   unpaid break and the day's total once calculated. Every class here starts with
   time-card-, so nothing on the other calculators changes.
   -------------------------------------------------------------------------- */
.time-card-hint {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.input-section__body > .time-card-hint + .time-card-hint {
  margin-top: var(--space-2);
}

.time-card-week {
  display: grid;
  gap: var(--space-3);
}

.time-card-day {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* Floated so the day's name sits inside the card rather than across its border. */
.time-card-day__name {
  float: left;
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: var(--weight-semibold);
}

.time-card-day__grid {
  clear: both;
  display: grid;
  gap: var(--space-2);
}

/* On a phone each shift's name sits above its two times, so a time input keeps half
   the card's width; from 30rem the name moves into a narrow first column. */
.time-card-shift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-2);
  align-items: center;
}

.time-card-shift__name {
  grid-column: 1 / -1;
}

.time-card-shift--heads > :first-child {
  display: none;
}

.time-card-shift__name,
.time-card-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
}

.time-card-cell {
  min-width: 0;
}

.time-card-time {
  min-width: 0;
  padding-inline: var(--space-2);
}

.time-card-day__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.time-card-break {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.time-card-break__label {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.time-card-break .input {
  width: 7rem;
}

.time-card-break .input__control {
  padding-inline: var(--space-3) var(--space-2);
}

.time-card-day__total {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.time-card-day__total-value {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (min-width: 30rem) {
  .time-card-shift {
    grid-template-columns: 3.25rem repeat(2, minmax(0, 1fr));
  }

  .time-card-shift__name {
    grid-column: auto;
  }

  .time-card-shift--heads > :first-child {
    display: block;
  }

  .time-card-time {
    padding-inline: var(--space-3);
  }
}

/* Three buttons may not fit on one line on a phone. */
.time-card-actions {
  flex-wrap: wrap;
}

/* The pay estimate checkbox is drawn at 24px rather than the shared 20px, so the box on
   its own is at least a 24px target; its label stays clickable too. */
.time-card-pay__box {
  width: 1.5rem;
  height: 1.5rem;
}

/* At 320px "After 40 hours in the week" is wider than the select leaves for it, so on the
   narrowest phones the form and its selects give up a little padding instead of cutting
   the words off. */
@media (max-width: 22.49rem) {
  .time-card-form {
    padding: var(--space-4);
  }

  .time-card-form .select__control {
    padding-inline: var(--space-3) 2.25rem;
  }

  .time-card-form .select__chevron {
    right: var(--space-3);
  }
}

/* Results. The figures are tables, so a column of hours reads straight down. */
.result--time-card .result__amount {
  flex-wrap: wrap;
}

.time-card-stat-decimal {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.time-card-print,
.time-card-print-only {
  display: none;
}

.time-card-table-wrap {
  overflow-x: auto;
}

.time-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.time-card-table th,
.time-card-table td {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

.time-card-table th:first-child {
  padding-left: 0;
  text-align: left;
}

.time-card-table th:last-child,
.time-card-table td:last-child {
  padding-right: 0;
}

.time-card-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.time-card-table tbody th {
  font-weight: var(--weight-medium);
}

.time-card-table tfoot th,
.time-card-table tfoot td {
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  font-weight: var(--weight-semibold);
}

.time-card-table__hm,
.time-card-table__decimal {
  display: block;
  white-space: nowrap;
}

.time-card-table__decimal {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}

.time-card-table__off th,
.time-card-table__off td {
  color: var(--ink-muted);
}

/* Below 30rem the daily table shows "Wed"; the full name stays for screen readers. */
@media (max-width: 29.99rem) {
  .time-card-table__day {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 30rem) {
  .time-card-table__day-short {
    display: none;
  }
}

/* The four-column overtime example in the page copy, narrowed like the bonus tables. */
.prose .pay-table.time-card-example th,
.prose .pay-table.time-card-example td {
  padding-inline: var(--space-1);
}

@media (min-width: 30rem) {
  .prose .pay-table.time-card-example th,
  .prose .pay-table.time-card-example td {
    padding-inline: var(--space-3);
  }
}

/* -----------------------------------------------------------------------------
   Work hours calculator
   A list of work periods, each either clock times with an unpaid break or hours and
   minutes, plus the decimal hours converter in the page copy. Every class here starts
   with work-hours-, so nothing on the other calculators changes.
   -------------------------------------------------------------------------- */
.work-hours-hint {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.work-hours-panel > .work-hours-hint + .work-hours-hint {
  margin-top: var(--space-1);
}

.work-hours-mode {
  display: grid;
  gap: var(--space-2);
}

.work-hours-mode__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.work-hours-mode + .work-hours-panel,
.work-hours-panel + .work-hours-panel {
  margin-top: var(--space-4);
}

.work-hours-periods {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.work-hours-period {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* Floated so the period's name sits inside the card rather than across its border. */
.work-hours-period__name {
  float: left;
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: var(--weight-semibold);
}

/* Start and end share the first line and the break takes the second on a phone; from
   30rem all three fit on one line. Hours and minutes are always side by side. */
.work-hours-period__grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.work-hours-cell {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.work-hours-cell--breakMinutes {
  grid-column: 1 / -1;
}

.work-hours-cell__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
}

.work-hours-time {
  min-width: 0;
  padding-inline: var(--space-2);
}

.work-hours-period .input--number .input__control {
  min-width: 0;
  padding-inline: var(--space-3) var(--space-2);
}

@media (min-width: 30rem) {
  .work-hours-period__grid--clock {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.8fr);
  }

  .work-hours-cell--breakMinutes {
    grid-column: auto;
  }

  .work-hours-time {
    padding-inline: var(--space-3);
  }
}

.work-hours-period__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.work-hours-period__total {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.work-hours-period__worked {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.work-hours-period__errors:not(:empty) {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.work-hours-row-actions,
.work-hours-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.work-hours-row-actions {
  margin-top: var(--space-3);
}

.work-hours-row-actions + .work-hours-hint,
.work-hours-limit {
  margin-top: var(--space-2);
}

.work-hours-limit {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
}

.work-hours-pay {
  margin-top: var(--space-4);
}

/* The pay estimate checkbox is drawn at 24px rather than the shared 20px, so the box on
   its own is at least a 24px target; its label stays clickable too. */
.work-hours-pay__box {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 22.49rem) {
  .work-hours-form {
    padding: var(--space-4);
  }

  .work-hours-period {
    padding: var(--space-2);
  }
}

/* Results. */
.result--work-hours .result__amount {
  flex-wrap: wrap;
}

.work-hours-print {
  display: none;
}

.work-hours-table-wrap {
  overflow-x: auto;
}

.work-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.work-hours-table th,
.work-hours-table td {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

.work-hours-table th:first-child {
  padding-left: 0;
  text-align: left;
}

.work-hours-table th:last-child,
.work-hours-table td:last-child {
  padding-right: 0;
}

.work-hours-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.work-hours-table tbody th {
  font-weight: var(--weight-medium);
}

.work-hours-table tfoot th,
.work-hours-table tfoot td {
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  font-weight: var(--weight-semibold);
}

.work-hours-table .work-hours-table__times {
  text-align: left;
}

.work-hours-table__hm,
.work-hours-table__decimal,
.work-hours-table__clock,
.work-hours-table__break {
  display: block;
}

.work-hours-table__hm,
.work-hours-table__decimal {
  white-space: nowrap;
}

.work-hours-table__decimal,
.work-hours-table__break {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}

.work-hours-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* The served placeholder for the calculator: the example result is on the page before
   the script runs, and the form side reserves roughly the height the real form takes,
   so nothing below moves when it mounts. */
.work-hours-shell__form {
  min-height: 63rem;
}

.work-hours-shell__text {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.work-hours-shell__actions {
  min-height: var(--control-height-sm);
}

/* The work periods table and its note, which sit under the card once mounted. */
.work-hours-shell__details {
  min-height: 22rem;
}

@media (min-width: 30rem) {
  .work-hours-shell__form {
    min-height: 50rem;
  }

  .work-hours-shell__details {
    min-height: 18rem;
  }
}

@media (min-width: 62rem) {
  .work-hours-shell__form {
    min-height: 52rem;
  }
}

/* The quick answer above the page copy, and the formula lines in it. Two classes, so it
   wins over .content-section in site.css, which loads after this file. */
.content-section.work-hours-answer {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.work-hours-answer__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.content-section.work-hours-answer > .prose {
  margin-top: var(--space-2);
}

.prose .work-hours-formula {
  overflow-wrap: anywhere;
}

/* The decimal hours converter in the page copy: smaller than the calculator above. */
.work-hours-converter {
  display: grid;
  gap: var(--space-3);
  max-width: 28rem;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.work-hours-converter__field {
  margin: 0;
}

.work-hours-converter__button {
  justify-self: start;
}

.work-hours-converter__result {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .calculator {
    display: block;
  }

  .calculator__panel--result {
    position: static;
  }

  /* The inputs are not the point of a printed estimate; the answer is. */
  .calculator__panel--form,
  .result__switcher,
  .result__actions,
  .toast {
    display: none !important;
  }

  .result,
  .summary,
  .breakdown,
  .explanation,
  .estimate-notice {
    border: 1px solid var(--line);
    box-shadow: none;
    break-inside: avoid;
  }

  /* A printed figure travels further than a screen one, so the qualification has to
     stay attached to it. */
  .estimate-notice {
    border-left: 3px solid var(--line-strong);
  }

  .disclosure__panel {
    display: block !important;
  }

  /* The pay stub prints as the stub alone, headed "Estimated Pay Stub — For Planning
     Purposes Only" and followed by the estimate notice: no page copy, no card repeating
     the net pay, no yearly view and no working. */
  .pay-stub-page .breadcrumbs,
  .pay-stub-page .calculator-header,
  .pay-stub-page .content-section,
  .pay-stub-page .result--pay-stub,
  .pay-stub-page .pay-stub-annual,
  .pay-stub-page .result-details .explanation {
    display: none !important;
  }

  .pay-stub-page .result-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .pay-stub-page .result-panel > * + * {
    margin-top: 0;
  }

  .pay-stub-page .result-details {
    display: contents;
  }

  .pay-stub-page .pay-stub {
    order: -1;
  }

  /* The time card prints as its tables alone, headed "Estimated Time Card — For
     Planning Purposes Only", with the week date if one was entered and each day's
     shifts and break added to the daily breakdown. */
  .time-card-page .breadcrumbs,
  .time-card-page .calculator-header,
  .time-card-page .content-section,
  .time-card-page .result--time-card {
    display: none !important;
  }

  .time-card-page .time-card-print {
    display: block;
  }

  .time-card-page .time-card-table .time-card-print-only {
    display: table-cell;
  }

  .time-card-print__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
  }

  .time-card-print__week,
  .time-card-print__note {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
  }

  .time-card-table-wrap {
    overflow: visible;
  }

  .time-card-table__day {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

  .time-card-table__day-short {
    display: none;
  }

  .time-card-table tr {
    break-inside: avoid;
  }

  /* Work hours print as the periods table alone, headed "Work Hours Summary — For
     Planning Purposes Only" with the note that it is not an employer time record, and
     the pay estimate only when it was switched on. */
  .work-hours-page .breadcrumbs,
  .work-hours-page .calculator-header,
  .work-hours-page .content-section,
  .work-hours-page .result--work-hours {
    display: none !important;
  }

  .work-hours-page .work-hours-print {
    display: block;
  }

  .work-hours-print__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
  }

  .work-hours-print__note {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
  }

  .work-hours-table-wrap {
    overflow: visible;
  }

  .work-hours-table tr {
    break-inside: avoid;
  }
}