:root {
  color-scheme: light;
  --color_background: #faf8f5;
  --color_surface: #ffffff;
  --color_text: #27232e;
  --color_muted: #6b6474;
  --color_primary: #6b21a8;
  --color_primary_hover: #581c87;
  --color_border: #e5dfeb;
  --color_subtle: #f3eafa;
  --color_accent: #d4a437;
  --color_backdrop: #27232e80;
  --color_error: #ab3034;
  --color_scroll_thumb: #ada0b8;
  --color_scroll_hover: #80718f;
  --font_body: "Aptos", "Segoe UI", Arial, sans-serif;
  --font_numbers: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius_control: 8px;
  --radius_panel: 12px;
  --space_xs: 4px;
  --space_sm: 8px;
  --space_md: 16px;
  --space_lg: 24px;
  --space_xl: 32px;
  --space_2xl: 48px;
  --page_width: 680px;
  --motion_duration: 220ms;
  scrollbar-color: var(--color_scroll_thumb) var(--color_background);
  scrollbar-width: auto;
}

* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--color_background); }
*::-webkit-scrollbar-thumb { background: var(--color_scroll_thumb); border: 3px solid var(--color_background); border-radius: var(--radius_control); }
*::-webkit-scrollbar-thumb:hover { background: var(--color_scroll_hover); }
*::-webkit-scrollbar-thumb:active { background: var(--color_text); }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--color_background); color: var(--color_text); font: 16px/1.55 var(--font_body); }
a { color: var(--color_primary); text-underline-offset: 3px; cursor: pointer; }
a:hover { color: var(--color_primary_hover); }
a:active { opacity: 0.8; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--color_primary); outline-offset: 4px; }
[hidden] { display: none; }
.skip_link { position: absolute; top: var(--space_md); left: var(--space_md); padding: var(--space_sm); background: var(--color_surface); transform: translateY(-160px); z-index: 2; }
.skip_link:focus { transform: none; }
.site_header, .calculator_page, .site_footer { width: min(var(--page_width), calc(100% - 32px)); }
.site_header { margin: auto; padding: var(--space_lg) 0 var(--space_sm); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space_xs); }
.site_brand { display: flex; align-items: center; gap: var(--space_sm); white-space: nowrap; }
.beta_label { padding: 2px var(--space_xs); border-radius: var(--radius_control); background: var(--color_accent); color: var(--color_text); font-size: 10px; font-weight: 650; }
.wordmark { font-size: 32px; letter-spacing: -1px; color: var(--color_text); font-weight: 500; text-decoration: none; }
.wordmark span:first-child { font-weight: 750; }
.wordmark_dot { color: var(--color_accent); }
.site_caption { font-size: 16px; color: var(--color_muted); white-space: nowrap; }
.calculator_page { margin: var(--space_sm) auto var(--space_2xl); }
.calculator_tabs { display: flex; align-items: stretch; gap: var(--space_xl); border-bottom: 1px solid var(--color_border); margin-bottom: var(--space_xl); }
.calculator_tab { display: flex; align-items: center; gap: var(--space_sm); min-height: 52px; padding: var(--space_sm) 0; border: 0; border-bottom: 3px solid transparent; color: var(--color_muted); background: transparent; text-decoration: none; font-size: 15px; }
.calculator_tab.is_active { border-bottom-color: var(--color_primary); color: var(--color_primary); font-weight: 700; }
.calculator_tab:disabled { color: var(--color_muted); }
.coming_soon { background: var(--color_border); color: var(--color_muted); padding: 2px 7px; border-radius: var(--radius_control); font-size: 10px; white-space: nowrap; }
.calculator { padding: var(--space_lg); background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius_panel); }
.section_intro { display: flex; justify-content: space-between; align-items: center; gap: var(--space_md); margin-bottom: var(--space_md); }
.eyebrow { margin: 0; font-size: 12px; color: var(--color_muted); }
.rates_label { font-size: 11px; color: var(--color_primary); background: var(--color_subtle); padding: var(--space_xs) var(--space_sm); border-radius: var(--radius_control); white-space: nowrap; }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.2; font-weight: 650; letter-spacing: -1px; margin: 0 0 var(--space_sm); }
.intro_copy { margin: 0 0 var(--space_xl); color: var(--color_muted); font-size: 15px; }
.field_label { display: flex; align-items: baseline; gap: var(--space_sm); margin-bottom: var(--space_sm); font-size: 15px; font-weight: 650; }
.field_label span { font-size: 12px; font-weight: 400; color: var(--color_muted); }
.salary_input_wrap { position: relative; }
.currency_prefix { position: absolute; top: 50%; left: var(--space_md); transform: translateY(-50%); color: var(--color_muted); font-size: 24px; pointer-events: none; }
:is(#basic_pay, #target_net) { width: 100%; min-height: 72px; border: 1px solid var(--color_border); border-radius: var(--radius_control); padding: var(--space_md) var(--space_md) var(--space_md) var(--space_2xl); font: 24px/1.25 var(--font_numbers); font-variant-numeric: tabular-nums; color: var(--color_text); background: var(--color_surface); }
:is(#basic_pay, #target_net)::placeholder { font-family: var(--font_body); font-size: 22px; color: var(--color_muted); opacity: 0.8; }
:is(#basic_pay, #target_net):hover { border-color: var(--color_scroll_thumb); }
:is(#basic_pay, #target_net):focus { border-color: var(--color_primary); }
:is(#basic_pay, #target_net)[aria-invalid="true"] { border-color: var(--color_error); }
.field_help { margin: var(--space_sm) 0 0; color: var(--color_muted); font-size: 12px; line-height: 1.6; }
.field_feedback { min-height: 48px; padding: var(--space_sm) 0; }
.field_error, .calculation_status { margin: 0; font-size: 12px; line-height: 1.5; }
.field_error { color: var(--color_error); }
.field_error:empty { display: none; }
.calculation_status { color: var(--color_muted); }
.calculate_button { width: 100%; min-height: 46px; border: 1px solid var(--color_primary); border-radius: var(--radius_control); background: var(--color_primary); color: var(--color_surface); padding: var(--space_sm) var(--space_md); display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.calculate_button:hover { background: var(--color_primary_hover); border-color: var(--color_primary_hover); }
.calculate_button:active { transform: translateY(1px); }
.calculate_button:disabled { background: var(--color_primary); opacity: 0.6; }
.results_container.is_visible { animation: reveal_results var(--motion_duration) ease-out; }
.results { padding-top: var(--space_xl); margin-top: var(--space_xl); border-top: 1px solid var(--color_border); }
.results_heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space_md); margin-bottom: var(--space_md); }
.results_heading h2 { font-size: 16px; font-weight: 650; margin: 0; }
.breakdown { margin: 0; }
.breakdown_row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space_sm) var(--space_md); padding: 11px 0; font-size: 14px; }
.breakdown_row dt { color: var(--color_muted); }
.breakdown_row dd { margin: 0 0 0 auto; text-align: right; white-space: nowrap; font: 13px/1.6 var(--font_numbers); font-variant-numeric: tabular-nums; }
.gross_row { border-bottom: 1px solid var(--color_border); padding-bottom: var(--space_md); margin-bottom: var(--space_sm); }
.gross_row dt, .gross_row dd { color: var(--color_text); font-weight: 650; }
.total_row { border-top: 1px solid var(--color_border); margin-top: var(--space_sm); padding-top: var(--space_md); }
.total_row dt, .total_row dd { color: var(--color_text); }
.net_row, .employer_summary_row { margin-top: var(--space_lg); padding: var(--space_md); border-left: 3px solid var(--color_primary); border-radius: 0 var(--radius_control) var(--radius_control) 0; background: var(--color_subtle); align-items: center; }
.net_row dt, .employer_summary_row dt { color: var(--color_text); font-size: 17px; font-weight: 700; }
.net_row dt span, .employer_summary_row dt span { display: block; color: var(--color_muted); font-size: 10px; font-weight: 400; margin-top: var(--space_xs); }
.net_row dd, .employer_summary_row dd { color: var(--color_primary_hover); font-size: clamp(20px, 4vw, 29px); font-weight: 650; letter-spacing: -0.6px; }
.estimate_note { padding: var(--space_lg) var(--space_xs) 0; color: var(--color_muted); font-size: 12px; line-height: 1.7; }
.estimate_note h2 { font-size: 13px; font-weight: 650; color: var(--color_text); margin: 0 0 var(--space_sm); }
.estimate_note p { margin: 0 0 var(--space_md); }
.source_links a { white-space: nowrap; }
.site_footer { margin: 0 auto; padding: var(--space_lg) 0; border-top: 1px solid var(--color_border); color: var(--color_muted); font-size: 11px; display: flex; justify-content: space-between; gap: var(--space_md); }
.footer_brand, .footer_contact { display: flex; flex-direction: column; gap: var(--space_xs); }
.footer_brand strong { color: var(--color_text); font-size: 14px; }
.footer_contact { min-width: 0; text-align: right; }
.footer_contact p { margin: 0; }
.footer_contact a { overflow-wrap: anywhere; }
.beta_notice { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--space_lg); border: 1px solid var(--color_border); border-radius: var(--radius_panel); background: var(--color_surface); color: var(--color_text); }
.beta_notice::backdrop { background: var(--color_backdrop); }
html:has(.beta_notice[open]) { overflow: hidden; }
.beta_notice_top { display: flex; align-items: center; justify-content: space-between; gap: var(--space_md); }
.beta_notice h2 { margin: var(--space_sm) 0 var(--space_md); font-size: 24px; line-height: 1.25; }
.beta_notice p, .beta_notice li { font-size: 14px; }
.beta_notice ul { padding-left: var(--space_lg); }
.beta_notice li + li { margin-top: var(--space_sm); }
.beta_notice a { overflow-wrap: anywhere; }
.beta_notice .calculate_button { margin-top: var(--space_lg); justify-content: center; }
.notice_close { width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius_control); background: transparent; color: var(--color_muted); font-size: 24px; line-height: 1; }
.notice_close:hover, .notice_close:active { background: var(--color_subtle); color: var(--color_primary); }
.error_page h1 { margin-top: var(--space_2xl); }
.return_link { display: inline-block; padding: var(--space_md) 0; }

@keyframes reveal_results {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .calculator { padding: var(--space_xl); }
  :is(#basic_pay, #target_net) { font-size: 30px; }
  .breakdown_row { font-size: 15px; }
  .breakdown_row dd { font-size: 14px; }
  .net_row dd, .employer_summary_row dd { font-size: 29px; }
}

@media (max-width: 479px) {
  .calculator_tabs { gap: var(--space_lg); }
  .calculator { padding: var(--space_md); }
  .net_row, .employer_summary_row { flex-wrap: wrap; gap: var(--space_sm); }
  .net_row dd, .employer_summary_row dd { margin-left: auto; }
  .site_footer { flex-direction: column; }
  .footer_contact { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .results_container.is_visible { animation: none; }
  .calculate_button:active { transform: none; }
}

@media (forced-colors: active) {
  :root { scrollbar-color: auto; }
  .net_row, .employer_summary_row { border: 1px solid; }
  .calculator_tab.is_active { border-bottom-color: Highlight; }
}

.field_grid { display: grid; gap: var(--space_md); margin-bottom: var(--space_lg); }
.monthly_basic_help { margin: 0 0 var(--space_md); }
.monthly_basic_grid { margin-bottom: 0; }
.monthly_basic_grid > div { min-width: 0; }
.breakdown_row dt .field_help { display: block; }
.allowance_grid { margin-top: var(--space_lg); margin-bottom: 0; }
input[type="text"], select { width: 100%; min-height: 46px; border: 1px solid var(--color_border); border-radius: var(--radius_control); padding: 10px 12px; font: inherit; background: var(--color_surface); color: var(--color_text); }
.monthly_basic_grid input { font-family: var(--font_numbers); }
select { cursor: pointer; }
select:hover, input[type="text"]:hover { border-color: var(--color_scroll_thumb); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color_error); }
input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: var(--color_primary); cursor: pointer; }
.check_label { display: flex; align-items: flex-start; gap: var(--space_sm); font-size: 13px; line-height: 1.6; cursor: pointer; }
.option_section { padding: var(--space_md) 0; border-bottom: 1px solid var(--color_border); }
.option_fields, .overlap_fields, .pay_basis_fields, .mwe_fields { display: none; }
.option_section:has(.option_toggle:checked) .option_fields { display: block; padding: var(--space_md) 0 0; }
#salary_form:has(#include_night:checked):has(#include_overtime:checked) .overlap_fields { display: block; padding-top: var(--space_md); }
#salary_form:has(.option_toggle:checked) .pay_basis_fields,
#salary_form:has(#employment_minimum_wage:checked) .pay_basis_fields,
#salary_form:has(#employment_minimum_wage:checked) .mwe_fields { display: block; padding-top: var(--space_lg); }
.coverage_field { display: none; }
#salary_form:has(.option_toggle:checked) .coverage_field { display: flex; margin-top: var(--space_md); }
.detail_fields .field_label, .option_fields .field_label, .mwe_fields .field_label { margin-top: var(--space_md); }
.mwe_fields h2 { font-size: 16px; margin: 0; }
.allowance_details { margin: var(--space_md) 0; }
summary { cursor: pointer; color: var(--color_primary); font-size: 13px; }
summary:hover { color: var(--color_primary_hover); }
.detail_fields { padding: 0 0 var(--space_md); }
.detail_fields .check_label { margin-top: var(--space_md); }
.result_assumptions { color: var(--color_muted); margin-top: var(--space_md); font-size: 12px; }
.result_assumptions ul { padding-left: var(--space_md); }
.result_assumptions li { margin-bottom: var(--space_sm); }
@media (min-width: 768px) { .field_grid { grid-template-columns: 1fr 1fr; } }

/* Native radio groups preserve keyboard behavior while presenting all profiles. */
.employment_fieldset { border: 0; padding: 0; margin: 0 0 var(--space_lg); min-width: 0; }
.employment_choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space_sm); }
.employment_choice { position: relative; cursor: pointer; }
.employment_choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.employment_choice span { display: flex; justify-content: center; align-items: center; min-height: 48px; padding: var(--space_sm) var(--space_xs); border: 1px solid var(--color_border); border-radius: var(--radius_control); text-align: center; font-size: 12px; background: var(--color_background); }
.employment_choice:hover span { border-color: var(--color_primary); }
.employment_choice input:checked + span { background: var(--color_primary); border-color: var(--color_primary); color: var(--color_surface); }
.employment_choice input:focus-visible + span { outline: 3px solid var(--color_primary); outline-offset: 3px; }
.business_copy, .business_fields, .government_fields, .contract_fields, .conversion_basis_fields { display: none; }
#salary_form:has(#payroll_period option[value="daily"]:checked) .conversion_basis_fields,
#salary_form:has(#employment_minimum_wage:checked) .conversion_basis_fields,
#salary_form:has(#employment_private:checked):has(.option_toggle:checked) .conversion_basis_fields { display: block; margin-top: var(--space_lg); }
#salary_form:has(#employment_self_employed:checked) .employee_fields,
#salary_form:has(#employment_self_employed:checked) .employee_copy { display: none; }
#salary_form:has(#employment_self_employed:checked) .business_copy { display: inline; }
#salary_form:has(#employment_self_employed:checked) .business_fields { display: block; }
.business_fields .field_label { margin-top: var(--space_md); }
.business_fields .check_label { margin-top: var(--space_md); }
#salary_form:has(#employment_government:checked) .government_fields { display: block; margin: var(--space_md) 0; }
#salary_form:has(#employment_government:checked) label.government_fields { display: flex; }
#salary_form:has(#employment_kasambahay:checked) .contract_fields { display: block; }
#salary_form:has(#employment_kasambahay:checked) .hour_fields,
#salary_form:has(#employment_kasambahay:checked) .overlap_fields,
#salary_form:has(#employment_government:checked) .overlap_fields,
#salary_form:has(#employment_government:checked) .day_type_night,
#salary_form:has(#employment_government:checked) #night_help { display: none; }
.field_label .employee_copy, .field_label .business_copy { font-size: inherit; font-weight: inherit; }
@media (max-width: 479px) { .employment_choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#salary_form:has(#employment_government:checked):has(#include_night:checked):has(#include_overtime:checked) .overlap_fields,
#salary_form:has(#employment_kasambahay:checked):has(#include_night:checked):has(#include_overtime:checked) .overlap_fields,
#salary_form:has(#employment_government:checked) #overtime_help { display: none; }
#payroll_period { margin-bottom: var(--space_lg); }

.daily_ph_fields { display: none; margin-top: var(--space_lg); }
#salary_form:has(#employment_minimum_wage:checked) .daily_ph_fields,
#salary_form:has(#employment_private:checked):has(#payroll_period option[value="daily"]:checked) .daily_ph_fields { display: block; }

/* Both directions use the same native choices, amount field and submit flow. */
.calculation_choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reverse_fields, .reverse_copy { display: none; }
#salary_form:has(#mode_net_to_gross:checked) .forward_fields,
#salary_form:has(#mode_net_to_gross:checked) .forward_copy { display: none; }
#salary_form:has(#mode_net_to_gross:checked) .reverse_fields { display: block; }
#salary_form:has(#mode_net_to_gross:checked) .reverse_copy { display: inline; }
.reverse_summary { padding-bottom: var(--space_lg); margin-bottom: var(--space_sm); border-bottom: 1px solid var(--color_border); }
.suggested_basic { margin: var(--space_sm) 0; color: var(--color_text); font: 650 clamp(22px, 5vw, 30px)/1.35 var(--font_numbers); overflow-wrap: anywhere; }

.calculator_workspace > *, .results_panel { min-width: 0; }
.results_placeholder { display: none; }
.results_container { scroll-margin-top: var(--space_lg); }

@media (min-width: 1100px) {
  .site_header, .calculator_page, .site_footer { width: min(1180px, calc(100% - 48px)); }
  .calculator_workspace { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space_xl); align-items: start; }
  .results_panel { border-left: 1px solid var(--color_border); padding-left: var(--space_xl); }
  .results_panel .results { border-top: 0; margin-top: 0; padding-top: 0; }
  .results_placeholder { display: block; margin: 0; padding: var(--space_lg) 0; color: var(--color_muted); font-size: 14px; }
  .results_panel:has(.results_container:not([hidden])) .results_placeholder { display: none; }
}

/* These native radios switch complete server-rendered views, even without JS. */
.result_period_fieldset { border: 0; padding: 0; margin: 0 0 var(--space_md); min-width: 0; }
.result_period_choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space_sm); }
.result_view { display: none; }
.results:has(#view_monthly:checked) .result_view[data-period="monthly"],
.results:has(#view_semi_monthly:checked) .result_view[data-period="semi_monthly"],
.results:has(#view_annual:checked) .result_view[data-period="annual"] { display: block; }
.display_note { margin: 0 0 var(--space_md); }
.employer_section { margin-top: var(--space_xl); padding-top: var(--space_lg); border-top: 1px solid var(--color_border); }
.employer_section h3 { margin: 0; font-size: 16px; font-weight: 650; }
.employer_breakdown { margin: var(--space_md) 0 0; }
.employer_cost_row dt, .employer_cost_row dd { color: var(--color_text); font-weight: 650; }
.month_fill_controls { margin-bottom: var(--space_lg); }
.month_fill_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space_sm); }
.month_fill_row input { font-family: var(--font_numbers); }
.fill_months_button { min-height: 46px; padding: var(--space_sm) var(--space_md); border: 1px solid var(--color_primary); border-radius: var(--radius_control); background: var(--color_surface); color: var(--color_primary); font-size: 14px; font-weight: 600; }
.fill_months_button:hover, .fill_months_button:active { background: var(--color_subtle); }
@media (max-width: 479px) { .month_fill_row { grid-template-columns: 1fr; } }