@media (max-width: 680px) {
  .site-header .tour-button {
    display: inline-flex !important;
  }
}

/* All numeric entry boxes share the same editable orange border. */
.input-wrap {
  border-color: #f97316;
}

.input-wrap:focus-within {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.input-wrap input::placeholder {
  color: #a8b2c1;
  opacity: 1;
  font-weight: 500;
}

.orange-field {
  padding: 0;
  border: 0;
  background: transparent;
}

.kilometres-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
}

.orange-field .total-kilometres-output {
  width: 100%;
  border-color: var(--line);
  background: #f8fafc;
}

.total-kilometres-output strong {
  flex: 1;
  min-width: 0;
  padding-left: 12px;
  color: var(--ink);
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.penalty-time-input .unit-select {
  align-self: stretch;
  width: 76px;
  min-width: 76px;
  padding: 0 24px 0 10px;
  border: 0;
  border-left: 1px solid var(--line);
  outline: 0;
  background-color: #fff;
  color: #526077;
  font: 700 .9rem "Source Sans 3", sans-serif;
  cursor: pointer;
}

@media (max-width: 680px) {
  .kilometres-entry-grid {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
  }

  .kilometres-entry-grid .orange-field.field {
    display: block;
  }

  .kilometres-entry-grid .orange-field.field > span:first-child {
    margin-bottom: 5px;
    line-height: 1.2;
  }

  .verify-panel .orange-field.penalty-time-field {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .penalty-time-input .unit-select {
    width: 80px;
    min-width: 80px;
    padding-left: 11px;
  }
}

.penalty-time-input .unit-select:focus-visible {
  background: var(--blue-soft);
}

.expression-plus-button {
  display: none;
  align-self: stretch;
  flex: 0 0 38px;
  width: 38px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--blue-soft);
  color: var(--blue);
  font: 700 1.2rem/1 "Source Sans 3", sans-serif;
  cursor: pointer;
}

.expression-plus-button:active { background: #dbe9ff; }
.expression-plus-button:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

.multi-day-input,
.kilometres-entry-grid .input-wrap {
  flex-wrap: nowrap;
}

.multi-day-input > input,
.kilometres-entry-grid .input-wrap > input {
  flex: 1 1 0;
  width: 0;
}

@media (max-width: 680px) {
  .expression-plus-button {
    display: grid;
    place-items: center;
  }

  .hours-splitter > .multi-day-input {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    max-width: 100%;
  }
}

/* Summary disclosure behavior is consistent on desktop, tablet, and mobile. */
.union-content .summary-card:not(.summary-expanded) .summary-group,
.union-content .summary-card:not(.summary-expanded) .commission-details {
  display: none !important;
}

.union-content .summary-card:not(.summary-expanded) .labour-summary-group,
.union-content .summary-card:not(.summary-expanded) .deductions-group,
.union-content .summary-card:not(.summary-expanded) .commission-details,
.union-content .summary-card:not(.summary-expanded) .extras-summary-details[open] > .summary-group {
  display: block !important;
}

.union-content .summary-card:not(.summary-expanded) .deductions-group {
  display: grid !important;
}

.union-content .summary-card:not(.summary-expanded) .deductions-group > .summary-row {
  display: none !important;
}

.union-content .summary-card:not(.summary-expanded) .deductions-group > .total-deductions-row {
  display: grid !important;
  margin-top: 0;
  padding-block: 0;
  border-top: 0;
}

.union-content .summary-card:not(.summary-expanded) .labour-summary-group > .summary-row {
  display: none;
}

.union-content .summary-card:not(.summary-expanded) .labour-summary-group > .gross-labour-row {
  display: flex;
  margin-top: 0;
  padding-block: 0;
  border-top: 0;
}

.union-content .summary-card:not(.summary-expanded) .labour-summary-group,
.union-content .summary-card:not(.summary-expanded) .deductions-group {
  padding-block: 10px;
}

.union-content .summary-card:not(.summary-expanded) .provider-totals {
  padding-bottom: 0;
}

.union-content .summary-card:not(.summary-expanded) .provider-totals > .summary-row {
  margin-top: 0;
  padding-block: 10px;
}

.union-content .extras-summary-details:not(.has-entered-extras) {
  display: none;
}

.union-content .extras-summary-details .extra-summary-row:not(.has-value) {
  display: none;
}

/* Final override: Step 4 uses standard compact fields without tinted panels. */
.orange-field,
.orange-field.field {
  padding: 0;
  border: 0;
  background: transparent;
}

.membership-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}
.membership-options legend { padding: 0; color: var(--muted); font-size: .82rem; font-weight: 700; }
.membership-options > div { display: grid; grid-template-columns: repeat(2, max-content); gap: 3px; padding: 3px; border-radius: 10px; background: #e9eef5; }
.membership-options label { position: relative; cursor: pointer; }
.membership-options input { position: absolute; opacity: 0; pointer-events: none; }
.membership-options label span { min-height: 34px; padding: 0 12px; border-radius: 8px; display: grid; place-items: center; color: #526077; font-size: .86rem; font-weight: 700; white-space: nowrap; }
.membership-options input:checked + span { background: #101a2e; color: #fff; box-shadow: 0 3px 9px rgba(16, 26, 46, .18); }
.membership-options input:focus-visible + span { outline: 3px solid rgba(32, 95, 197, .3); }
.editable-summary-row.deduction-locked { cursor: default; }
.editable-summary-row.deduction-locked:hover { background: transparent; }
.summary-row[hidden] { display: none !important; }

.deductions-group {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: 6px;
}
.deductions-group > .summary-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: 6px;
  row-gap: 0;
}
.deductions-group > .summary-row > small {
  align-self: center;
  color: var(--muted);
  font-size: 1em;
  line-height: inherit;
  text-align: left;
}
.deductions-group > .summary-row > strong { grid-column: 3; justify-self: end; }
.deductions-group > .summary-row.emphasized > span { grid-column: 1 / 3; }

/* Rate summaries keep labels and amounts compact; desktop shares the vacation note. */
.rate-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
}
.rate-summary > div > span,
.rate-summary > div > strong { display: block; margin: 0; }
.rate-summary > div > strong { white-space: nowrap; }
.rate-summary > div > small { grid-column: 1 / -1; }

.rate-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
}
.rate-summary > div {
  padding-block: 4px;
}
.rate-summary > div:nth-child(1) { grid-column: 1; grid-row: 2; }
.rate-summary > div:nth-child(2) { grid-column: 2; grid-row: 2; }
.rate-summary > div:nth-child(3) { grid-column: 3; grid-row: 2; }
.rate-summary .rate-vacation-note {
  display: none;
}
.rate-summary > .shared-vacation-note {
  grid-column: 1 / 4;
  grid-row: 1;
  display: block;
  padding: 3px 6px 0;
  background: #f8fafc;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 680px) {
  .rate-summary > div {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: 1px;
  }

  .rate-summary > div > span,
  .rate-summary > div > strong {
    grid-column: 1;
  }
}

@media (max-width: 980px) {
  .page-grid .summary-column {
    order: initial;
  }

  .summary-card.nu-summary-card .summary-group,
  .summary-card.nu-summary-card .commission-details {
    display: block !important;
  }
}

@media (max-width: 980px) {
  .summary-card.nu-summary-card .summary-group,
  .summary-card.nu-summary-card .commission-details {
    display: block !important;
  }
}

#commissions,
#sumDeductions,
#sumGrossLabour,
#sumGrossPay {
  padding: 3px 9px;
  border: 2px solid #f97316;
  border-radius: 999px;
  background: #fff8cc;
  color: #a16207;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.14);
}

#commissions,
#sumDeductions {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.14);
}

.highlight-total {
  padding: 3px 9px;
  border: 2px solid #f97316;
  border-radius: 999px;
  background: #fff8cc;
  color: #a16207;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.14);
}

.label-info-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.label-info-button { width: 15px; height: 15px; padding: 0; border: 1px solid #f97316; border-radius: 50%; display: inline-grid; place-items: center; background: #fff; color: #a16207; font: 700 .65rem Georgia,serif; cursor: help; }
.label-info-wrap .amount-tooltip { left: 0; right: auto; }
.label-info-wrap .amount-tooltip::before { left: 4px; right: auto; }
.label-info-wrap.is-open .amount-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.provider-totals .label-info-wrap .amount-tooltip {
  width: min(220px, calc(100vw - 48px));
  white-space: normal;
  overflow-wrap: anywhere;
}

#commissionBaseTooltip,
#subtotalTooltip,
#epGrossTooltip,
#ccGrossTooltip,
#netPayTooltip { width: min(230px, calc(100vw - 24px)); }
#commissionBaseTooltip .tooltip-title,
#subtotalTooltip .tooltip-title,
#epGrossTooltip .tooltip-title,
#ccGrossTooltip .tooltip-title,
#netPayTooltip .tooltip-title { display: block; margin-bottom: 7px; color: #fff; }
.amount-tooltip .tooltip-calculation { display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 12px; row-gap: 3px; }
.amount-tooltip .tooltip-calculation > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.amount-tooltip .tooltip-calculation > div > span { min-width: 0; overflow-wrap: anywhere; }
.amount-tooltip .tooltip-calculation strong { color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.amount-tooltip .tooltip-result { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.3); }
#commissionBaseTooltip > small { display: block; margin-top: 9px; color: #cbd5e1; line-height: 1.35; }
#subtotalTooltip > small { display: block; margin-top: 9px; color: #cbd5e1; line-height: 1.35; }
#netPayTooltip > small { display: block; margin-top: 9px; color: #cbd5e1; line-height: 1.35; }
.net-pay .label-info-button { background: transparent; color: #fdba74; }
.net-pay .net-info-wrap .amount-tooltip { left: -22px; }
.net-pay .amount-tooltip {
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.4;
}
.net-pay .amount-tooltip span,
.net-pay .amount-tooltip strong,
.net-pay .amount-tooltip small {
  font: inherit;
  line-height: inherit;
}
.net-pay .amount-tooltip .tooltip-title,
.net-pay .amount-tooltip .tooltip-calculation strong {
  font-weight: 700;
}
.net-pay .amount-tooltip small { color: #cbd5e1; }
.plain-amount-button { padding: 0; border: 0; border-bottom: 1px dashed #f97316; background: transparent; color: #172033; font: 700 1rem "Source Sans 3",sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }

#deposit {
  padding: 3px 9px;
  border: 2px solid #f97316;
  border-radius: 999px;
  background: #dcfce7;
  color: #087a55;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(249,115,22,.14);
}

.cast-crew-gross-row > span { white-space: nowrap; }
.cast-crew-gross-row > strong { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 420px) { .cast-crew-gross-row > span { white-space: normal; } }

.rate-heading-copy { flex: 1; min-width: 0; }
.rate-heading-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rate-period-label select { min-height: 40px; padding: 0 34px 0 12px; border: 2px solid #b8c3d1; border-radius: 10px; background: #fff; color: var(--ink); font: 700 .9rem "Source Sans 3", sans-serif; cursor: pointer; }
.rate-period-label select:focus { border-color: var(--orange); outline: 3px solid rgba(249,115,22,.16); }
@media (max-width: 560px) {
  .rate-step-heading { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 10px; }
  .rate-step-heading .rate-heading-line { flex-direction: row; align-items: center; gap: 8px; }
  .rate-step-heading h2 { margin-left: 0; white-space: nowrap; font-size: 1.05rem; }
  .membership-options { align-items: stretch; flex-direction: column; gap: 5px; }
  .membership-options > div { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; }
  .membership-options label span { min-height: 34px; padding: 0 8px; font-size: .72rem; }
  .rate-period-label { min-width: 0; margin-left: auto; }
  .rate-period-label select { width: 130px; min-height: 38px; padding: 0 18px 0 8px; appearance: none; background-image: linear-gradient(45deg,transparent 50%,#172033 50%),linear-gradient(135deg,#172033 50%,transparent 50%); background-position: calc(100% - 9px) 50%,calc(100% - 5px) 50%; background-size: 4px 4px,4px 4px; background-repeat: no-repeat; font-size: .72rem; }
  .rate-step-heading p { margin-top: 4px; }
}
@media (max-width: 390px) {
  .rate-step-heading .rate-heading-line { gap: 6px; }
  .rate-step-heading h2 { font-size: .96rem; }
  .rate-period-label select { width: 118px; padding-left: 5px; font-size: .66rem; }
}

/* Step 4 disclosure: collapsed by default on every screen size. */
.verification-heading {
  align-items: center;
  cursor: pointer;
}

.verification-heading > div {
  flex: 1;
}

.mobile-section-toggle.verification-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  background: #f5f7fa;
  color: #172033;
}

.verification-toggle::before {
  content: "▼";
  font-size: 0.78rem;
}

.verification-toggle[aria-expanded="true"]::before {
  content: "▶";
}

#verificationContent {
  display: none;
}

.step-card.verification-expanded #verificationContent {
  display: grid;
}

[hidden] {
  display: none !important;
}

.mode-switch {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.mode-switch .eyebrow {
  color: #205fc5;
}

.mode-switch h2 {
  margin: 0;
  font: 600 1.05rem Lexend, sans-serif;
}

.mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: #eef2f6;
}

.mode-options label {
  cursor: pointer;
}

.mode-options input {
  position: absolute;
  opacity: 0;
}

.mode-options span {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #526077;
  font-weight: 700;
}

.mode-options input:checked + span {
  background: #101a2e;
  color: #ffffff;
  box-shadow: 0 3px 9px rgba(16, 26, 46, 0.2);
}

.mode-options input:focus-visible + span {
  outline: 3px solid rgba(249, 115, 22, 0.45);
}

.nu-rate-cards,
.nu-commission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nu-rate-card,
.nu-comparison-card {
  min-width: 0;
  min-height: 106px;
  padding: 14px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #f8fafc;
  color: #172033;
  text-align: left;
  font: inherit;
}

button.nu-rate-card,
button.nu-comparison-card {
  border: 2px solid #f97316;
  background: #ffffff;
  cursor: pointer;
}

.nu-rate-card > span,
.nu-rate-card > strong,
.nu-rate-card > small,
.nu-comparison-card > span,
.nu-comparison-card > strong,
.nu-comparison-card > small {
  display: block;
}

.nu-rate-card > span,
.nu-comparison-card > span {
  color: #617087;
  font-size: 0.78rem;
  font-weight: 700;
}

.nu-rate-card > strong,
.nu-comparison-card > strong {
  margin: 6px 0 3px;
  font: 600 1.08rem Lexend, sans-serif;
  font-variant-numeric: tabular-nums;
}

.nu-rate-card > small,
.nu-comparison-card > small {
  color: #617087;
  font-size: 0.74rem;
}

.nu-rate-card.calculated {
  background: #eef4ff;
}

.nu-commission-note {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #f6c66d;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #fffaf0;
  color: #445168;
}

.nu-note-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f97316;
  color: #fff;
  font: 700 .78rem Georgia, serif;
}

.nu-commission-note strong { display: block; color: #172033; }
.nu-commission-note p { margin: 4px 0 6px; font-size: .88rem; line-height: 1.45; }
.nu-commission-note a { color: #1757ae; font-size: .84rem; font-weight: 700; }

.nu-comparison-card.difference {
  background: #fff8cc;
  border-color: #f97316;
}

.nu-comparison-card.agent-charge-card {
  border-color: #dc2626;
  background: #fff1f2;
}

.nu-comparison-card.agent-charge-card strong { color: #b91c1c; }

.nu-comparison-card.difference.is-over strong {
  color: #c0342b;
}

.nu-comparison-card.difference.is-match strong {
  color: #087a55;
}

.nu-summary-card #nuSumGross,
.nu-summary-card #nuSummaryDifference {
  padding: 3px 9px;
  border: 2px solid #f97316;
  border-radius: 999px;
  background: #fff8cc;
  color: #a16207;
}

.commission-details[open] {
  overflow: visible;
}

/* The editable-row hit area must not indent the Agent Fee contents. */
.commission-details #agentRateRow {
  padding-inline: 0;
}

.calculation-error {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--red);
  border-radius: 9px;
  background: var(--red-soft);
  color: var(--red);
  font-size: .86rem;
  font-weight: 600;
}

.amount-info-wrap {
  position: relative;
  display: inline-flex;
}

.amount-info-button {
  padding: 0 18px 1px 0;
  border: 0;
  border-bottom: 1px dashed #f97316;
  background: transparent;
  color: #172033;
  font: 700 1rem "Source Sans 3", sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

.amount-info-button::after {
  content: "i";
  position: absolute;
  top: 2px;
  right: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #f97316;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #a16207;
  font: 700 0.65rem Georgia, serif;
}

.amount-info-button:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.3);
  outline-offset: 3px;
}

.commission-dialog-content { padding: 24px; }
.commission-dialog-content > p { margin: 10px 0 20px; color: var(--muted); }
.commission-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.commission-option { min-height: 76px; padding: 13px 14px; border: 2px solid #d7e0ea; border-radius: 12px; background: #f6f8fb; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.commission-option strong,.commission-option span { display: block; }
.commission-option strong { font-weight: 700; }
.commission-option span { margin-top: 3px; color: var(--muted); font-size: .86rem; }
.commission-option[aria-pressed="true"] { border-color: var(--orange); background: #fff7ed; }
.commission-option[aria-pressed="true"] span { color: #9a3412; font-weight: 700; }
@media(max-width:480px){.commission-option-grid{grid-template-columns:1fr 1fr}.commission-dialog-content{padding:20px}}

.amount-tooltip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  right: 0;
  width: min(285px, calc(100vw - 48px));
  padding: 11px 12px;
  border: 1px solid #f97316;
  border-radius: 10px;
  background: #101a2e;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(16, 26, 46, 0.24);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  pointer-events: none;
}

.amount-tooltip::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 100%;
  border: 6px solid transparent;
  border-bottom-color: #101a2e;
}

.label-info-wrap .amount-tooltip.is-viewport-positioned {
  position: fixed;
  inset: auto;
  width: min(230px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  transform: none;
}
.label-info-wrap .amount-tooltip.is-viewport-positioned::before { display: none; }

.amount-info-wrap:hover .amount-tooltip,
.amount-info-wrap:focus-within .amount-tooltip,
.amount-info-wrap.is-open .amount-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hours-splitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #f8fafc;
}

.hours-heading > div {
  flex: 1;
}

.resettable-heading > div {
  flex: 1;
}

.step-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto !important;
}

.hours-reset-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #f5f7fa;
  color: #172033;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.hours-reset-button:hover {
  border-color: #f97316;
  background: #fff2e8;
}

.hours-reset-button:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.35);
  outline-offset: 2px;
}

.hours-reset-button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hours-splitter strong,
.hours-splitter small {
  display: block;
}

.split-mobile-break {
  display: none;
}

.hours-splitter small {
  color: #617087;
  font-size: 0.78rem;
}

.hours-splitter .input-wrap {
  min-height: 42px;
}

.hours-splitter .input-wrap input {
  height: 38px;
}

.hours-splitter .multi-day-input { width: 100%; min-width: 0; }
.hours-splitter .multi-day-input input { padding-left: 9px; }
.hours-splitter .multi-day-input input::placeholder { color: #a8b2c1; opacity: 1; font-weight: 500; }
.hours-splitter .multi-day-input > span { padding-inline: 5px 8px; }


@media (max-width: 680px) {
  .mode-switch {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .mode-options {
    width: 100%;
  }

  .nu-rate-cards,
  .nu-commission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nu-rate-card,
  .nu-comparison-card {
    min-height: 92px;
    padding: 10px;
  }

  .hours-splitter {
    grid-template-columns: minmax(0, 1fr) minmax(138px, 47%);
    gap: 8px;
    padding: 9px;
  }

  .hours-splitter-copy {
    display: block;
    min-width: 0;
  }

  .hours-splitter-copy > strong {
    line-height: 1.15;
  }

  .hours-splitter-copy > small {
    margin-top: 2px;
    line-height: 1.1;
  }

  .hours-splitter > label {
    grid-column: 2;
    grid-row: 1;
    max-width: 100%;
  }

  .split-mobile-break {
    display: initial;
  }


  .nu-summary-card .summary-group,
  .nu-summary-card .commission-details {
    display: block !important;
  }
}

.feedback-button {
  background: transparent;
  border-color: #71809b;
  color: #ffffff;
}

.feedback-button:hover {
  background: #26324b;
  border-color: #9caac0;
}

.feedback-dialog {
  width: min(620px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  color: #172033;
  box-shadow: 0 24px 70px rgba(16, 26, 46, 0.34);
}

.feedback-dialog::backdrop {
  background: rgba(16, 26, 46, 0.66);
  backdrop-filter: blur(3px);
}

.feedback-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 10px;
}

.feedback-dialog-header .eyebrow {
  color: #205fc5;
}

.feedback-dialog-header h2 {
  margin: 0;
  font: 600 1.35rem Lexend, sans-serif;
}

.feedback-intro {
  margin: 0;
  padding: 0 22px 14px;
  color: #617087;
}

.feedback-frame-wrap {
  position: relative;
  min-height: 420px;
  border-top: 1px solid #dbe2ea;
  background: #ffffff;
}

#feedbackFrame {
  display: block;
  width: 100%;
  height: min(590px, calc(100dvh - 175px));
  border: 0;
  background: #ffffff;
}

.feedback-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #617087;
  background: #ffffff;
  z-index: 1;
}

.feedback-frame-wrap.is-loaded .feedback-loading {
  display: none;
}

@media (max-width: 680px) {
  .site-header .feedback-button {
    display: inline-flex !important;
    width: 42px;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
  }

  .feedback-dialog-header {
    padding: 16px 16px 8px;
  }

  .feedback-intro {
    padding: 0 16px 12px;
    font-size: 0.9rem;
  }

  #feedbackFrame {
    height: calc(100dvh - 160px);
  }
}

/* Three selectable rate types; GBP and Photo Double share one rate. */
.mobile-rate-break {
  display: none;
}

.rate-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .mobile-rate-break {
    display: initial;
  }

  .rate-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .rate-option span {
    padding-inline: 5px;
  }

  .rate-option strong {
    line-height: 1.1;
  }

  .rate-option small {
    font-size: 0.64rem;
  }
}

/* Keep the active tour controls above the page-dimming highlight. */
.tour-layer {
  z-index: 2000;
}

.tour-popover {
  z-index: 2002;
  border: 1px solid #dbe2ea;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.tour-popover .primary-button:not(:disabled) {
  background: #205fc5;
  color: #ffffff;
  border-color: #205fc5;
  box-shadow: 0 4px 12px rgba(32, 95, 197, 0.28);
  cursor: pointer;
}

.tour-popover .primary-button:not(:disabled):hover {
  background: #164898;
  border-color: #164898;
}

.tour-popover .primary-button:not(:disabled):focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.55);
  outline-offset: 3px;
}

.summary-title { align-items: center; }
.summary-title h2 { margin: 0; }

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.app-version {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.summary-toggle,
.mobile-section-toggle {
  display: inline-flex;
  min-height: 34px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8c3d1;
  border-radius: 8px;
  background: #f8fafc;
  color: #205fc5;
  font: 700 0.82rem "Source Sans 3", sans-serif;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.summary-toggle:hover,
.mobile-section-toggle:hover { background: var(--blue-soft); border-color: #8da9d4; }

.summary-toggle:focus-visible,
.mobile-section-toggle:focus-visible { outline: 3px solid rgba(32,95,197,.22); outline-offset: 2px; }

@media (max-width: 680px) {
  .deductions-group > .summary-row {
    grid-template-columns: 84px 48px minmax(0, 1fr);
  }
  .deductions-group > .summary-row.emphasized > span { grid-column: 1 / 3; }

  .step-card {
    padding: 16px;
    margin-bottom: 14px;
  }

  .section-heading {
    gap: 10px;
    margin-bottom: 14px;
  }

  .section-heading p {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .rate-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .rate-option span {
    min-height: 68px;
    padding: 9px 7px;
  }

  .rate-option strong {
    font-size: 0.88rem;
  }

  .rate-option small {
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .table-row {
    grid-template-columns: minmax(0, 1fr) 94px 68px;
    gap: 8px;
    padding: 10px;
  }

  .table-row .input-wrap {
    min-height: 40px;
  }

  .table-row .input-wrap input {
    height: 36px;
    padding-left: 8px;
  }

  .table-row .input-wrap > span {
    padding: 0 7px;
    font-size: 0.8rem;
  }

  .table-row output {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
    text-align: right;
    font-size: 0.88rem;
  }

  .table-row small {
    font-size: 0.74rem;
  }

  .table-total {
    grid-template-columns: minmax(0, 1fr) 94px 68px;
    gap: 8px;
    padding: 10px;
  }

  .table-total strong,
  .table-total strong:last-child {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
    text-align: right;
    font-size: 0.88rem;
  }

  .summary-toggle,
  .mobile-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .summary-card .summary-details {
    display: block;
  }

  .summary-card.summary-expanded .summary-details {
    display: block;
  }

  .summary-card.summary-expanded .summary-group,
  .summary-card.summary-expanded .commission-details {
    display: block;
  }

  .verification-heading {
    align-items: center;
  }

  .verification-heading > div {
    flex: 1;
  }

  .verification-heading p {
    display: none;
  }

  #verificationContent {
    display: none;
  }

  .step-card.verification-expanded #verificationContent {
    display: grid;
    grid-template-columns: 1fr;
  }

  .verify-panel {
    padding: 12px;
  }

  .orange-field {
    padding: 8px;
  }
}

/* Version 1.1.1: compact extras, reliable summary toggle, bounded help. */
.help-dialog {
  width: min(75vw, 1000px);
  max-width: calc(100% - 28px);
  max-height: min(680px, calc(100dvh - 24px));
  overflow-y: auto;
  margin-top: 12px;
}

.guide-shot {
  height: clamp(165px, 18vw, 220px);
  margin: 10px 0 2px;
  border: 1px solid #d7e0ea;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f7fa;
  box-shadow: 0 3px 10px rgba(16,26,46,.08);
}

.guide-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 0;
}

.guide-shot-mode img { object-position: center 4%; }
.guide-shot-rates img { object-position: left 7%; }
.guide-shot-hours img { object-position: left 16%; }
.guide-shot-extras img { object-position: left 29%; }
.guide-shot-summary img { object-position: right 9%; }
.guide-shot-commission img { object-position: right 25%; }

.union-hours-table .table-header,
.union-hours-table .table-row,
.union-hours-table .table-total {
  grid-template-columns: minmax(150px,1fr) 130px 150px 112px;
  gap: 12px;
}

.union-hours-table .table-header > span:nth-child(n+3) { text-align: right; }
.union-hours-table .table-header small { display: block; font-size: .66rem; letter-spacing: 0; text-transform: none; }

.extras-summary-details {
  border-top: 1px solid var(--line);
}

.extras-summary-details > summary {
  padding: 11px 0;
  color: #445168;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.extras-summary-details > summary::-webkit-details-marker { display: none; }
.extras-summary-details > summary::after { content: "▸"; display: inline-block; color: var(--blue); }
.extras-summary-details[open] > summary::after { content: "▾"; }
.extras-summary-details > .summary-group { padding-top: 4px; border-top: 1px dashed var(--line); }
.provider-totals { padding-bottom: 10px; }

@media (max-width: 980px) {
  .help-dialog { width: min(90vw, 820px); }
}

@media (max-width: 680px) {
  .help-dialog { width: calc(100% - 16px); }
  .guide-shot { display: none; }
  .union-hours-table .table-header {
    display: grid;
    grid-template-columns: minmax(74px,1.1fr) minmax(58px,.82fr) minmax(58px,.82fr) minmax(76px,1fr);
    gap: 6px;
    padding: 7px;
    font-size: .58rem;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
  }
  .union-hours-table .table-header > span:nth-child(1),
  .union-hours-table .table-header > span:nth-child(2) { display: none; }
  .union-hours-table .table-header > span:nth-child(3) { grid-column: 2; text-align: left; }
  .union-hours-table .table-header > span:nth-child(4) { grid-column: 3; text-align: left; }
  .union-hours-table .table-header > span:nth-child(4) small { display: none; }
  .union-hours-table .table-row { grid-template-columns: minmax(74px,1.1fr) minmax(58px,.82fr) minmax(58px,.82fr) minmax(76px,1fr); gap: 6px; padding: 11px 7px; }
  .union-hours-table .table-row > span:first-child { grid-column: 1; grid-row: 1; }
  .union-hours-table .table-row .input-wrap { grid-column: 4; grid-row: 1; width: 100%; min-height: 40px; }
  .union-hours-table .table-row .input-wrap input { height: 36px; padding-inline: 6px 1px; }
  .union-hours-table .table-row .input-wrap > span { padding-inline: 3px 5px; font-size: .7rem; }
  .union-hours-table .table-row output { grid-row: 1; margin: 0; padding: 0; border: 0; text-align: left; font-size: .86rem; }
  .union-hours-table .table-row output:nth-of-type(1) { grid-column: 2; }
  .union-hours-table .table-row output:nth-of-type(2) { grid-column: 3; }
  .union-hours-table .table-row output:nth-of-type(1)::before,
  .union-hours-table .table-row output:nth-of-type(2)::before { content: none; display: none; }
  .union-hours-table .table-row strong { font-size: .86rem; }
  .union-hours-table .table-row small { font-size: .68rem; }
  .union-hours-table .table-total { grid-template-columns: minmax(74px,1.1fr) minmax(58px,.82fr) minmax(58px,.82fr) minmax(76px,1fr); gap: 6px; padding: 11px 7px; }
  .union-hours-table .table-total strong { padding: 0; border: 0; text-align: left; font-size: .84rem; }
  .union-hours-table .table-total strong:nth-of-type(1) { grid-column: 4; grid-row: 1; }
  .union-hours-table .table-total strong:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .union-hours-table .table-total strong:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .union-hours-table .table-total strong:nth-of-type(2)::before,
  .union-hours-table .table-total strong:nth-of-type(3)::before { content: none; display: none; }
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .field-grid .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: center;
    gap: 10px;
  }

  .field-grid .field > span:first-child {
    margin-bottom: 0;
  }

  .field-grid .input-wrap {
    min-height: 40px;
  }

  .field-grid .input-wrap input {
    height: 36px;
  }

  .help-dialog {
    max-height: calc(100dvh - 16px);
    margin-top: 8px;
  }

  .orange-field.field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 10px;
  }

  .orange-field.field > span:first-child {
    margin-bottom: 0;
    line-height: 1.2;
  }

  .orange-field .input-wrap {
    min-height: 40px;
  }

  .orange-field .input-wrap input {
    height: 36px;
  }
}

.comparison {
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid #dbe2ea;
  background: #ffffff;
}

.comparison.neutral {
  background: #ffffff;
}

/* Keep all four paystub extras on one row on wider screens. */
.field-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 680px) {
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.orange-field,
.orange-field.field {
  padding: 0;
  border: 0;
  background: transparent;
}