/* ==========================================================================
   tools.css  -  the three free calculator pages  (added 2026-10-02)
   --------------------------------------------------------------------------
   Loaded ONLY by the pages generate-tool-pages.ps1 writes. Everything else
   on those pages is the ordinary tt-hp-* kit from hrms-page.css; this file
   holds just the two things the kit has no component for - a calculator card
   and a rate table outside an article body.

   Inputs reuse .tt-contact-input from style.css rather than restyling a field
   a third time. Flat fills only (hard rule 3); colours are tokens.
   ========================================================================== */

/* ---- the card --------------------------------------------------------- */
.tt-calc {
  background: #FFFFFF;
  border: 1px solid var(--tt-border);
  border-radius: 20px;
  box-shadow: var(--tt-shadow-xl);
  color: var(--tt-dark);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  text-align: left;
}

.tt-calc-title {
  font-family: var(--tt-font-secondary);
  font-size: var(--tt-fs-h4);
  font-weight: 700;
  margin: 0 0 1.1rem;
}

.tt-calc-grid {
  display: grid;
  gap: 0.9rem 1rem;
  grid-template-columns: 1fr 1fr;
}
.tt-calc-field-full { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
  .tt-calc-grid { grid-template-columns: 1fr; }
}

.tt-calc-label {
  color: var(--tt-dark);
  display: block;
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.tt-calc-hint {
  color: var(--tt-muted);
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 0.3rem;
}

/* A hint shared by the two fields above it (KSA basic + allowances), pulled
   up against them so it reads as belonging to the pair. */
.tt-calc-hint-shared { margin-top: -0.4rem; }

/* Currency prefix inside the field. Padding, not a positioned label, so a
   long number can never run underneath it. */
.tt-calc-money { position: relative; }
.tt-calc-money .tt-contact-input { padding-left: 3.4rem; }
.tt-calc-money-unit {
  color: var(--tt-muted);
  font-size: 0.85rem;
  font-weight: 600;
  left: 1rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* How the employment ended (KSA). Real radio buttons, laid out as a list -
   the three choices are sentences, not pills. */
.tt-calc-choices {
  border: 0;
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}
.tt-calc-choice {
  align-items: flex-start;
  border: 1px solid var(--tt-border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: var(--tt-fs-body-sm);
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
}
.tt-calc-choice input { accent-color: var(--tt-primary); margin-top: 0.2rem; }
.tt-calc-choice:has(input:checked) {
  background: rgba(var(--tt-primary-rgb), 0.06);
  border-color: rgba(var(--tt-primary-rgb), 0.45);
}

/* ---- results ---------------------------------------------------------- */
.tt-calc-results {
  background: var(--tt-light);
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
}

/* Until there is a valid input the panel shows the prompt instead of a row
   of zeros that would read as an answer. */
.tt-calc-results-body { display: none; }
.tt-calc.is-ready .tt-calc-results-body { display: block; }
.tt-calc.is-ready .tt-calc-prompt { display: none; }
.tt-calc-prompt { color: var(--tt-muted); font-size: var(--tt-fs-body-sm); margin: 0; }

.tt-calc-headline {
  border-bottom: 1px solid var(--tt-border);
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
}
.tt-calc-headline-label { color: var(--tt-muted); font-size: var(--tt-fs-body-sm); }
.tt-calc-headline-value {
  color: var(--tt-primary);
  display: block;
  font-family: var(--tt-font-secondary);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
}

.tt-calc-rows { margin: 0; }
.tt-calc-row {
  display: flex;
  font-size: var(--tt-fs-body-sm);
  gap: 1rem;
  justify-content: space-between;
  padding: 0.28rem 0;
}
.tt-calc-row dt { color: var(--tt-muted); font-weight: 400; }
.tt-calc-row dd { font-weight: 700; margin: 0; text-align: right; }

.tt-calc-note {
  color: var(--tt-accent-deep);
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  margin: 0.6rem 0 0;
}
.tt-calc-note:empty { display: none; }

.tt-calc-fine {
  color: var(--tt-muted);
  font-size: 0.78rem;
  margin: 0.9rem 0 0;
}

/* ---- rate table ------------------------------------------------------- */
/* Same treatment as .tt-ar-body tables in blog.css, which is the site's one
   existing table style; repeated here because blog.css scopes it to article
   bodies and these pages do not load blog.css. */
.tt-tool-table-wrap {
  background: #FFFFFF;
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  margin-inline: auto;
  max-width: 56rem;
  overflow-x: auto;
}
.tt-tool-table {
  border-collapse: collapse;
  font-size: var(--tt-fs-body-sm);
  min-width: 32rem;
  width: 100%;
}
.tt-tool-table th,
.tt-tool-table td {
  border-bottom: 1px solid var(--tt-border);
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
}
.tt-tool-table thead th {
  background: rgba(var(--tt-primary-rgb), 0.07);
  color: var(--tt-dark);
  font-weight: 700;
}
.tt-tool-table tbody tr:last-child td { border-bottom: 0; }

.tt-tool-source {
  color: var(--tt-muted);
  font-size: var(--tt-fs-body-sm);
  margin: 1rem auto 0;
  max-width: 56rem;
}

/* ---- workforce end-of-service liability tool (eosb-report.js) ---------- */
.tt-eosb {
  background: #FFFFFF;
  border: 1px solid var(--tt-border);
  border-radius: 20px;
  box-shadow: var(--tt-shadow-xl);
  margin-inline: auto;
  max-width: 64rem;
  padding: clamp(1.1rem, 2.6vw, 2rem);
}
.tt-eosb-settings {
  align-items: end;
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: auto 14rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 575.98px) { .tt-eosb-settings { grid-template-columns: 1fr; } }
.tt-eosb-countries { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The staff table scrolls inside its own box on a phone, like the rate
   tables, rather than pushing the page sideways. */
.tt-eosb-table-wrap { overflow-x: auto; }
.tt-eosb-table {
  border-collapse: collapse;
  font-size: var(--tt-fs-body-sm);
  min-width: 40rem;
  width: 100%;
}
.tt-eosb-table th {
  border-bottom: 2px solid rgba(var(--tt-primary-rgb), 0.35);
  color: var(--tt-dark);
  font-weight: 700;
  padding: 0.55rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}
.tt-eosb-table td {
  border-bottom: 1px solid var(--tt-border);
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
}
.tt-eosb-n { color: var(--tt-muted); width: 2.2rem; }
.tt-eosb-in.tt-contact-input { font-size: 0.92rem; min-height: 42px; padding: 0.45rem 0.7rem; }
.tt-eosb-out { font-weight: 600; white-space: nowrap; }
.tt-eosb-table tr.is-invalid .tt-eosb-in { border-color: var(--tt-accent-deep); }

/* The resignation column exists only under Saudi law. Hidden, not removed,
   so switching country is a class toggle with no re-render. */
.tt-eosb-ksa-only { display: none; }
.tt-eosb.is-ksa .tt-eosb-ksa-only { display: table-cell; }
.tt-eosb-uae-only { display: block; }
.tt-eosb.is-ksa .tt-eosb-uae-only { display: none; }
.tt-eosb-ksa-block { display: none; }
.tt-eosb.is-ksa .tt-eosb-ksa-block { display: block; }

.tt-eosb-remove {
  background: none;
  border: 1px solid var(--tt-border);
  border-radius: 8px;
  color: var(--tt-muted);
  font-size: 1.1rem;
  height: 34px;
  line-height: 1;
  width: 34px;
}
.tt-eosb-remove:hover,
.tt-eosb-remove:focus-visible { border-color: var(--tt-accent-deep); color: var(--tt-accent-deep); }

.tt-eosb-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 0.9rem; }
.tt-eosb-link-btn {
  background: none;
  border: 0;
  color: var(--tt-primary);
  font-weight: 600;
  padding: 0;
}
.tt-eosb-link-btn:disabled { color: var(--tt-muted); }
.tt-eosb-bad { color: var(--tt-accent-deep); font-size: var(--tt-fs-body-sm); font-weight: 600; margin: 0.6rem 0 0; }
.tt-eosb-bad:empty { display: none; }

.tt-eosb-paste summary { color: var(--tt-primary); cursor: pointer; font-weight: 600; }
.tt-eosb-paste textarea { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; margin-top: 0.6rem; min-height: 8rem; }
.tt-eosb-paste-msg { color: var(--tt-muted); font-size: var(--tt-fs-body-sm); }

/* Totals: hidden until at least one valid row exists, so the visitor never
   sees a zero that reads like an answer. */
.tt-eosb-summary {
  background: var(--tt-light);
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  display: none;
  gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
}
.tt-eosb.has-result .tt-eosb-summary { display: grid; }
.tt-eosb-stat-label { color: var(--tt-muted); display: block; font-size: var(--tt-fs-body-sm); }
.tt-eosb-stat-value { color: var(--tt-dark); display: block; font-family: var(--tt-font-secondary); font-size: 1.3rem; font-weight: 800; }
.tt-eosb-stat-value.is-main { color: var(--tt-primary); font-size: clamp(1.5rem, 3vw, 2rem); }

/* Email form */
.tt-eosb-email {
  border-top: 1px solid var(--tt-border);
  margin-top: 1.5rem;
  padding-top: 1.4rem;
}
.tt-eosb-email-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr auto; align-items: start; }
@media (max-width: 575.98px) { .tt-eosb-email-row { grid-template-columns: 1fr; } }
.tt-eosb-consent { align-items: flex-start; display: flex; font-size: var(--tt-fs-body-sm); gap: 0.55rem; margin: 0.85rem 0; }
.tt-eosb-consent input { accent-color: var(--tt-primary); margin-top: 0.25rem; }
/* Turnstile renders a 300x65 iframe; reserve it so nothing jumps when it
   arrives (the script loads async). */
.tt-eosb-turnstile { min-height: 65px; }
.tt-eosb-status { font-size: var(--tt-fs-body-sm); font-weight: 600; margin: 0.75rem 0 0; min-height: 1.4em; }
/* Dark text with a success-token edge: --tt-success as TEXT is ~2.5:1 on
   white, below the contrast a confirmation message needs. */
.tt-eosb-status.is-ok { border-left: 3px solid var(--tt-success); color: var(--tt-dark); padding-left: 0.6rem; }
.tt-eosb-status.is-error { color: var(--tt-accent-deep); }

/* Prose blocks on these pages are single-column and centred on the same
   measure as the table, so the page reads as one column. */
.tt-tool-prose {
  margin-inline: auto;
  max-width: 56rem;
}
.tt-tool-prose ul { padding-left: 1.2rem; }
.tt-tool-prose li { margin-bottom: 0.45rem; }