/* =============================================================================
   Components — the reusable controls, styled only through tokens.

   Every selector here belongs to a component in /src/components. Nothing in this
   file knows about the paycheck calculator specifically; the next calculator gets
   all of it for free.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The `:hover` half is not redundant: when the button is an `<a>`, the base
   stylesheet's `a:hover` colour would otherwise win on specificity and paint the
   label green on green. */
.button--primary,
.button--primary:hover {
  background: var(--brand-600);
  color: var(--brand-contrast);
  box-shadow: var(--shadow-sm);
}

.button--primary:hover:not(:disabled) {
  background: var(--brand-700);
}

.button--primary:active:not(:disabled) {
  transform: translateY(1px);
}

.button--block {
  width: 100%;
  min-height: 54px;
  font-size: var(--text-md);
}

/* For a single call to action that has to carry a page on its own. */
.button--lg {
  min-height: 54px;
  padding: 0 var(--space-7);
  font-size: var(--text-md);
}

.button--ghost {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.button--ghost:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.button--ghost svg {
  color: var(--ink-muted);
}

.button--link {
  min-height: auto;
  padding: 0;
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* -----------------------------------------------------------------------------
   Fields — label, control, hint, error
   -------------------------------------------------------------------------- */
.field {
  display: block;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* A <legend> inside a <fieldset> needs help to behave like a block label. */
fieldset.field > .field__label {
  float: left;
  width: 100%;
}

/*
 * A plain block ignores a float and flows behind it; a grid or flex container does
 * not — it shrinks to whatever space is left beside the float, and beside a 100%-wide
 * legend that is nothing at all. Without this the pay-frequency cards collapse to zero
 * width and spill out of the panel. Everything after the legend simply clears it.
 */
fieldset.field > .field__label ~ * {
  clear: both;
}

fieldset.field::after {
  content: '';
  display: table;
  clear: both;
}

.field__suffix {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}

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

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--danger-600);
}

/* A shape as well as a colour, so the message is not carried by red alone. */
.field__error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--danger-600);
  color: var(--surface);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.input-section + .input-section {
  margin-top: var(--space-6);
}

.input-section__header {
  margin-bottom: var(--space-4);
}

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

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

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

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4) var(--space-4);
}

/* -----------------------------------------------------------------------------
   Text and number inputs
   -------------------------------------------------------------------------- */
.input {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.input:hover {
  border-color: var(--ink-faint);
}

/* The ring sits on the wrapper, so the prefix and suffix are inside it. */
.input:focus-within {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-focus);
}

.input__control {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: inherit;
  background: transparent;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  outline: none;
}

.input__control::placeholder {
  color: var(--ink-faint);
}

.input--currency .input__control {
  padding-left: var(--space-1);
  font-weight: var(--weight-medium);
}

.input__prefix,
.input__suffix {
  flex: none;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.input__prefix {
  padding-left: var(--space-4);
}

.input__suffix {
  padding-right: var(--space-4);
  font-size: var(--text-sm);
}

.input[aria-invalid='true'],
.input:has([aria-invalid='true']) {
  border-color: var(--danger-600);
}

.input:has([aria-invalid='true']):focus-within {
  box-shadow: 0 0 0 3px var(--danger-50);
}

.input--lg .input__control,
.input--lg .input__prefix {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.input--lg {
  min-height: 56px;
}

/* -----------------------------------------------------------------------------
   Native select
   -------------------------------------------------------------------------- */
.select {
  position: relative;
  display: flex;
  align-items: center;
}

.select__control {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-md);
  appearance: none;
  cursor: pointer;
}

.select__control:hover {
  border-color: var(--ink-faint);
}

.select__control:focus-visible {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.select__control[aria-invalid='true'] {
  border-color: var(--danger-600);
}

.select__chevron {
  position: absolute;
  right: var(--space-4);
  display: flex;
  color: var(--ink-muted);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Segmented control
   -------------------------------------------------------------------------- */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--segment-count, 2), 1fr);
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  isolation: isolate;
}

.segmented__thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--segment-count, 2));
  border-radius: calc(var(--radius-md) - 3px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--segment-index, 0) * 100%));
  transition: transform var(--duration) var(--ease);
}

.segmented__option {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: calc(var(--control-height) - 8px);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease);
}

.segmented__option:hover {
  color: var(--ink-soft);
}

.segmented__option.is-selected {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.segmented__hint {
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}

.segmented--sm {
  padding: 2px;
}

.segmented--sm .segmented__option {
  min-height: var(--control-height-sm);
  font-size: var(--text-xs);
}

.segmented--sm .segmented__thumb {
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--segment-count, 2));
}

/* -----------------------------------------------------------------------------
   Radio cards
   -------------------------------------------------------------------------- */
.radio-cards {
  display: grid;
  gap: var(--space-2);
}

.radio-cards--grid {
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.radio-cards--list {
  grid-template-columns: 1fr;
}

.radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.radio-card:hover {
  border-color: var(--ink-faint);
}

/* The input is invisible but still the thing that is focused and checked. */
.radio-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.radio-card:has(.radio-card__input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.radio-card:has(.radio-card__input:checked) {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-600);
}

.radio-card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.radio-card__label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.radio-card__description {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.radio-card__meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.radio-card:has(.radio-card__input:checked) .radio-card__meta {
  color: var(--brand-700);
}

.radio-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.radio-card:has(.radio-card__input:checked) .radio-card__mark {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: var(--brand-contrast);
}

/* -----------------------------------------------------------------------------
   Combobox (the state selector)
   -------------------------------------------------------------------------- */
.combobox {
  position: relative;
}

.combobox__shell {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.combobox__shell:hover {
  border-color: var(--ink-faint);
}

.combobox__shell:focus-within {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-focus);
}

.combobox__shell:has([aria-invalid='true']) {
  border-color: var(--danger-600);
}

.combobox__icon {
  display: flex;
  flex: none;
  padding-left: var(--space-4);
  color: var(--ink-muted);
}

.combobox__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-3);
  border: 0;
  background: transparent;
  font-size: var(--text-md);
  outline: none;
}

.combobox__input::placeholder {
  color: var(--ink-faint);
}

.combobox__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  align-self: stretch;
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  color: var(--ink-muted);
}

.combobox__toggle svg {
  transition: transform var(--duration) var(--ease);
}

.combobox__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.combobox__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(20rem, 50vh);
  padding: var(--space-1);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  -webkit-overflow-scrolling: touch;
}

.combobox__list[hidden] {
  display: none;
}

.combobox__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.combobox__option.is-active {
  background: var(--brand-50);
}

.combobox__option-label {
  font-size: var(--text-base);
  color: var(--ink);
}

.combobox__option-meta {
  margin-left: auto;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  text-align: right;
}

.combobox__option-check {
  display: flex;
  flex: none;
  color: var(--brand-600);
  opacity: 0;
}

.combobox__option.is-selected .combobox__option-check {
  opacity: 1;
}

.combobox__option.is-selected .combobox__option-label {
  font-weight: var(--weight-semibold);
}

.combobox__empty {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Disclosure
   -------------------------------------------------------------------------- */
.disclosure {
  border-radius: var(--radius-md);
}

.disclosure__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

.disclosure__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.disclosure__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

.disclosure__summary-text {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.disclosure__detail {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.disclosure__chevron {
  display: flex;
  flex: none;
  color: var(--ink-muted);
  transition: transform var(--duration) var(--ease);
}

.disclosure.is-open .disclosure__chevron {
  transform: rotate(180deg);
}

.disclosure__panel {
  padding-bottom: var(--space-4);
}

.disclosure__panel[hidden] {
  display: none;
}

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

/* Inline: the explanation and FAQ lists — hairline separated, no box. */
.disclosure--inline + .disclosure--inline {
  border-top: 1px solid var(--line);
}

.disclosure--inline .disclosure__panel {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

/* Panel: Advanced options — a container you open, not a row you expand. */
.disclosure--panel {
  border: 1px solid var(--line);
  background: var(--surface);
}

.disclosure--panel > .disclosure__trigger,
.disclosure--panel > * > .disclosure__trigger {
  padding: var(--space-3) var(--space-4);
}

.disclosure--panel .disclosure__panel {
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-top: 1px solid var(--line);
}

.disclosure--panel.is-open {
  background: var(--surface-sunken);
}

/* -----------------------------------------------------------------------------
   Info tip
   -------------------------------------------------------------------------- */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.info-tip__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24px is the WCAG 2.2 Target Size (Minimum) floor. The glyph inside stays 16px —
     only the hit area grows, so the control looks unchanged and is easier to hit. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
}

/*
 * A 20px circle is the right size next to a label and the wrong size under a thumb.
 * The visible mark stays 20px; an invisible 44px pad around it catches the tap,
 * absolutely positioned so it never pushes the label around.
 */
.info-tip__button::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

.info-tip__button:hover,
.info-tip__button[aria-expanded='true'] {
  background: var(--surface-sunken);
  color: var(--ink);
}

.info-tip__panel {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  left: 50%;
  width: min(20rem, 78vw);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
  transform: translateX(-50%);
}

.info-tip__panel[hidden] {
  display: none;
}

.info-tip__list {
  padding-left: 1.1em;
  margin: 0;
}

.info-tip__list li + li {
  margin-top: var(--space-2);
}

/* -----------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 0);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    visibility var(--duration);
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -4px);
}

.toast--warning {
  background: var(--warning-600);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Breakdown tones — one class per colour, used by swatches and bar segments.
   -------------------------------------------------------------------------- */
.tone--takehome { --tone: var(--tone-takehome); }
.tone--federal { --tone: var(--tone-federal); }
.tone--social { --tone: var(--tone-social); }
.tone--medicare { --tone: var(--tone-medicare); }
.tone--state { --tone: var(--tone-state); }
.tone--local { --tone: var(--tone-local); }
.tone--payroll { --tone: var(--tone-payroll); }
.tone--deductions { --tone: var(--tone-deductions); }

/* -----------------------------------------------------------------------------
   Connection status — "you are offline" and "a new version is ready".

   Lower on the page than the toast and quieter than it, because neither message
   is about something the visitor just did. It sits above the safe area on a
   phone, wraps rather than truncates, and never covers the Calculate button:
   it is anchored to the bottom, which on mobile is below the form, and the
   result it might overlap is scrollable past it.
   -------------------------------------------------------------------------- */
.net-status {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: min(30rem, calc(100vw - var(--space-8)));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.net-status__message {
  flex: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.net-status--offline {
  border-color: var(--warning-600);
}

.net-status--update {
  border-color: var(--brand-500);
}

.net-status__action {
  flex: none;
  min-height: 32px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-600);
  color: var(--brand-contrast);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.net-status__action:hover {
  background: var(--brand-700);
}

/* The dismiss target is 44px of hit area around a small glyph, per the rest of
   the site — the visible mark stays quiet, the thing you can press does not. */
.net-status__dismiss {
  flex: none;
  width: 44px;
  height: 44px;
  margin: calc(var(--space-3) * -1) calc(var(--space-2) * -1) 0 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.net-status__dismiss:hover {
  color: var(--ink);
}

@media print {
  .net-status {
    display: none;
  }
}