/* FMySchool salary tax calculator: page styles. Loaded only on this page. */

.tx-zh { font-size: .55em; color: var(--slate); font-weight: 700; margin-left: .3em; }
.tx-remember { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; }
.btn-copy-snip { font: inherit; font-size: .85rem; font-weight: 700; color: var(--navy); background: var(--white); border: 1.5px solid var(--navy); border-radius: 999px; padding: .15rem .7rem; cursor: pointer; }

/* Tabs */
.tx-tabs { display: flex; gap: .5rem; border-bottom: 2px solid var(--line); margin: 0 0 1.25rem; }
.tx-tabs [role="tab"] { font: inherit; font-weight: 800; color: var(--navy); background: transparent; border: 0; border-bottom: 4px solid transparent; padding: .8rem 1rem; cursor: pointer; margin-bottom: -2px; min-height: 48px; }
.tx-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--lime); background: var(--white); border-radius: 8px 8px 0 0; }

/* Form */
.tx-app { padding-bottom: 3rem; }
/* padding: 0 overrides the site-wide section padding (the panels are <section>s). */
.tx-panel { display: grid; gap: 1.5rem; padding: 0; }
/* display: grid above would otherwise override the hidden attribute and show both tabs at once. */
.tx-panel[hidden] { display: none; }
@media (min-width: 1100px) { .tx-panel { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: start; } }
.tx-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; min-width: 0; }
.tx-output { min-width: 0; }
.req { color: #B42318; font-weight: 800; }
/* Labels that wrap their box: the text and any asterisk stay on one line, the box goes underneath. */
.tax-page .field > label { display: block; }
.tax-page .field > label > input, .tax-page .field > label > select { display: block; margin-top: .3rem; }
.tax-page .field input[type="number"], .tax-page .field input[type="month"], .tax-page .field input[type="email"] {
  width: 100%; font: inherit; color: var(--charcoal); background: var(--white);
  border: 1.5px solid var(--slate); border-radius: 6px; padding: .6rem .7rem; min-height: 44px;
}
.field--inline { display: flex; align-items: center; gap: .75rem; }
.field--inline select { width: auto !important; }
.tx-row3 { grid-template-columns: 1fr; }
@media (min-width: 480px) { .tx-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tx-block { border: 1px solid var(--line); border-radius: 8px; padding: .8rem; margin: .6rem 0; background: #FBFCFE; }
.tx-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; color: var(--navy); }
.tx-mini { border-left: 3px solid var(--blue); padding: .2rem 0 .4rem .7rem; margin: .5rem 0; }
.tx-remove, .tx-link { font: inherit; font-size: .9rem; font-weight: 700; background: none; border: 0; padding: .35rem 0; cursor: pointer; color: var(--blue-text); text-decoration: underline; text-underline-offset: .15em; }
.tx-remove { color: #8A1C12; }
.tx-block:only-child > .tx-block__head .tx-remove { display: none; }
.btn--small { min-height: 40px; padding: .5rem 1rem; font-size: .95rem; margin-top: .4rem; }
.tx-sub { border-left: 3px solid var(--lime); padding-left: .8rem; margin: .6rem 0; }
.tx-years { display: grid; gap: .6rem; margin-top: .6rem; }
.tx-yearrow { display: grid; gap: .4rem; background: var(--tint); border-radius: 8px; padding: .7rem .8rem; }
.tx-yearrow label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; font-weight: 700; color: var(--navy); }
.tx-yearrow input, .tx-yearrow select { font: inherit; font-weight: 400; border: 1.5px solid var(--slate); border-radius: 6px; padding: .45rem .6rem; min-height: 40px; background: var(--white); width: 100%; }
.tx-yearrow__y { font-size: 1.1rem; color: var(--navy); }
.tx-yearrow__est { font-weight: 700; color: var(--charcoal); }

/* Actions and checker */
.tx-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.tx-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.checker { margin: .6rem 0; font-size: .95rem; }
.checker p { margin: .5rem 0 .25rem; }
.checker__title { font-weight: 800; color: var(--navy); }
.checker ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.checker__errors li { color: #8A1C12; margin-bottom: .2rem; }
.checker__warnings li { margin-bottom: .2rem; }

/* Results */
/* Year blocks are <section>s: drop the site-wide section padding, which left a big gap above the results. */
.tx-year { margin: .5rem 0 2rem; padding: 0; }
.tx-year__title { font-size: 1.5rem; margin: 0 0 .2rem; }
.tx-year__res { font-weight: 700; color: var(--navy); margin-bottom: .6rem; }
.tx-emp { margin: 1rem 0 .4rem; font-size: 1.05rem; }
.tx-note { background: var(--tint); border-left: 4px solid var(--blue); padding: .6rem .8rem; border-radius: 0 6px 6px 0; }
.tx-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.tx-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tx-table th, .tx-table td { padding: .45rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tx-table thead th { background: var(--tint); color: var(--navy); font-size: .8rem; white-space: nowrap; }
.tx-table td:first-child { white-space: nowrap; }
.tx-note--warn { background: #FFF1D6; border-left-color: #B26A00; font-weight: 700; }
.tx-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-table .strong { font-weight: 800; color: var(--navy); }
.tx-total td { font-weight: 700; background: #F6F8FB; }
.tx-table .payslip { min-width: 9rem; }
.tx-table .payslip input { width: 7.5rem; font: inherit; font-size: .9rem; border: 1.5px solid var(--slate); border-radius: 6px; padding: .3rem .4rem; }
.tx-diff { display: block; font-size: .78rem; color: var(--slate); margin-top: .2rem; white-space: normal; }
.payslip.is-diff { background: #FFF1D6; }
.payslip.is-diff .tx-diff { color: #8A4B00; font-weight: 700; }
.tx-card { background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius); padding: 1rem 1.15rem; margin-top: 1rem; }
.tx-card h4 { margin: 0 0 .5rem; }
.tx-card dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0 0 .6rem; }
.tx-card dt { font-weight: 700; color: var(--slate); }
.tx-card dd { margin: 0; font-weight: 700; }
.tx-card__label { font-weight: 800; color: var(--navy); margin: .6rem 0 .3rem; }
.tx-recon { margin-bottom: .8rem; }
.tx-table--kv th { width: 60%; font-weight: 600; color: var(--charcoal); background: none; }
.tx-outcome { font-size: 1.15rem; font-weight: 800; padding: .6rem .8rem; border-radius: 8px; margin: .2rem 0 .7rem; }
.tx-outcome--refund { background: #E3F4E8; color: #1E6B3A; }
.tx-outcome--owe { background: #FDE8E5; color: #8A1C12; }
.tx-outcome--none, .tx-outcome--na { background: var(--tint); color: var(--navy); }
.tx-why { margin: .5rem 0 0; }
.tx-strong { font-weight: 800; }
.tx-warn { color: #8A1C12; font-weight: 700; }
.tx-notcovered { margin-top: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; }
.tx-disclaimer { margin-top: 1.25rem; max-width: none; }

/* Print: only the results of the tab being printed, plus the title and disclaimer. */
@media print {
  @page {
    size: A4; margin: 15mm;
    @bottom-center { content: "Page " counter(page) " of " counter(pages); font-size: 9pt; }
    @top-center { content: "\00a0"; }
  }
  .tax-page .no-print { display: none !important; }
  .tax-page .tx-intro { padding: 0 0 6mm; }
  .tax-page[data-printing="plan"] #panel-year, .tax-page[data-printing="year"] #panel-plan { display: none !important; }
  .tax-page .tx-panel:not([hidden]) { display: block !important; }
  .tax-page .tx-panel[hidden] { display: none !important; }
  .tx-scroll { overflow: visible; border: 0; }
  .tx-table { font-size: 8.5pt; }
  .tx-table .payslip input { border: 0; padding: 0; width: auto; }
  .tx-year, .tx-card { break-inside: avoid-page; }
  .tx-card { border-width: 1px; }
}
.tx-employers { margin: 1.25rem 0 .5rem; }
.tx-employers h4 { margin: 0 0 .45rem; }