/* Transfer Allowance Estimator · brand pass (Spruce & Gold, after the Salary Calculator).
   CSS only. Loaded after the tool's own <style> and /tools/_shared/mfp-tools.css. Delete the <link> to revert. */
:root {
  --forest: var(--mfp-ink); --forest-mid: var(--mfp-ink-2); --forest-lt: #4e7a72;
  --sage: var(--mfp-surface-2); --sage-mid: var(--mfp-sage-300); --sage-lt: var(--mfp-paper); --cream: var(--mfp-paper);
  --rule: var(--mfp-line); --rule-lt: var(--mfp-line);
  --text: var(--mfp-text); --text-m: var(--mfp-muted); --text-h: var(--mfp-hint);
  --success: var(--mfp-ok); --suc-bg: var(--mfp-ok-bg); --suc-rule: #95c9ad;
  --danger: var(--mfp-danger); --dan-bg: var(--mfp-danger-bg); --dan-rule: #f0b8b4;
  --warn: var(--mfp-warn); --warn-bg: var(--mfp-warn-bg); --warn-rule: #e9c46a;
  --info-bg: var(--mfp-surface-2);
  --teal: var(--mfp-ink); --teal-dark: var(--mfp-ink); --teal-light: var(--mfp-surface-2); --teal-mid: var(--mfp-ink-2);
  --navy: var(--mfp-ink); --navy-lt: var(--mfp-ink-2); --slate: var(--mfp-muted); --slate-lt: var(--mfp-hint);
  --bg: var(--mfp-paper); --bg-dk: var(--mfp-surface-2); --border: var(--mfp-line);
  --gold: var(--mfp-warn); --gold-lt: var(--mfp-warn-bg); --green: var(--mfp-ok); --green-lt: var(--mfp-ok-bg);
  --red: var(--mfp-danger); --red-lt: var(--mfp-danger-bg); --accent: var(--mfp-signal);
  --occ: var(--mfp-signal-deep); --occ-bg: rgba(var(--mfp-signal-rgb), 0.14); --muted: var(--mfp-hint);
  /* transfer zones: three tints that stay apart without blue/green/yellow (the badge also prints the zone number) */
  --z1-bg: #dbe7e6; --z1-line: #9dbab8; --z1-tx: #203a3d;
  --z2-bg: #dcefe2; --z2-line: #95c9ad; --z2-tx: #1f5a40;
  --z3-bg: #fff3cd; --z3-line: #e9c46a; --z3-tx: #7a5200;
  --shadow: var(--mfp-shadow); --shadow-md: var(--mfp-lift);
}
body { font-family: var(--mfp-body); font-size: 15px; background-attachment: fixed; }

/* hero: flat ink block with the gold hairline; no gradient */
.hero { background: var(--mfp-ink); padding: 1.6rem clamp(16px, 3vw, 32px) 0; text-align: left; position: relative; }
.hero::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 44%; background: var(--mfp-signal); border-radius: 0 3px 0 0; }
.hero h1 { font-family: var(--mfp-display); font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; color: var(--mfp-on-ink); max-width: 980px; margin: 0 auto 0.3rem; }
.hero h1 em { color: var(--mfp-signal); }
.hero p { color: var(--mfp-on-ink-dim); font-size: 0.9rem; max-width: 980px; margin: 0 auto 1.4rem; }

/* top tabs: tabs sit on the ink block; active tab lifts onto the paper below */
.tab-nav { background: rgba(255, 255, 255, 0.08); border-radius: 14px 14px 0 0; gap: 2px; padding: 4px 4px 0; }
.tab-btn { color: var(--mfp-on-ink-dim); font-family: var(--mfp-body); font-size: 0.85rem; font-weight: 600; padding: 0.85rem 0.5rem; border-radius: 10px 10px 0 0; min-height: 48px; }
.tab-btn.active { background: var(--mfp-paper); color: var(--mfp-ink); font-weight: 700; }
.tab-btn:not(.active):hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.subhead { background: var(--mfp-paper); border-bottom: 1px solid var(--mfp-line); }
.tab-desc { color: var(--mfp-muted); font-size: 0.9rem; line-height: 1.55; padding: 1rem 1.4rem 0.4rem; }
.tab-desc strong { color: var(--mfp-ink); }
.sub-btn { font-family: var(--mfp-body); font-size: 0.88rem; font-weight: 600; min-height: 44px; padding: 0.55rem 1.1rem; border: 1px solid var(--mfp-line); background: var(--mfp-card); color: var(--mfp-muted); transition: background-color .25s var(--mfp-ease), color .25s, border-color .25s; }
.sub-btn:hover { border-color: var(--mfp-line-strong); color: var(--mfp-ink); background: var(--mfp-surface-2); }
.sub-btn.active { background: var(--mfp-ink); border-color: transparent; color: var(--mfp-on-ink); box-shadow: 0 2px 8px -2px rgba(var(--mfp-ink-rgb), 0.45); }
.sub-btn:focus-visible { outline: 2px solid var(--mfp-signal); }

main { max-width: 980px; }

/* cards */
.card { background: var(--mfp-card); border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-lg); padding: 1.75rem; box-shadow: var(--mfp-shadow); }
.card-title { font-family: var(--mfp-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--mfp-text); }
.card-sub { font-size: 0.9rem; color: var(--mfp-muted); border-bottom: 1px solid var(--mfp-line); }
.dssr { font-family: var(--mfp-mono); font-size: 0.7rem; background: var(--mfp-surface-2); color: var(--mfp-ink); border: 0; border-radius: 9999px; padding: 0.15rem 0.6rem; }

/* form */
label { font: 600 0.7rem var(--mfp-body); letter-spacing: 0.09em; color: var(--mfp-muted); }
label .hint { font-size: 0.72rem; color: var(--mfp-muted); }
input[type=text], input[type=number], input[type=date], select {
  min-height: 3rem; border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-sm); padding: 0.7rem 0.95rem; font-size: 1rem;
  font-family: var(--mfp-body); color: var(--mfp-text); background-color: #fff; transition: border-color .25s var(--mfp-ease), box-shadow .25s var(--mfp-ease);
}
input[type=number] { font-family: var(--mfp-mono); font-size: 0.95rem; }
select { appearance: none; -webkit-appearance: none; background-image: var(--mfp-chev); background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.5rem; }
input:hover, select:hover { border-color: var(--mfp-line-strong); }
input:focus, select:focus { border-color: var(--mfp-signal); box-shadow: 0 0 0 4px rgba(var(--mfp-signal-rgb), 0.28); outline: none; }
.pfx-wrap { border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-sm); background: #fff; min-height: 3rem; }
.pfx-wrap:focus-within { border-color: var(--mfp-signal); box-shadow: 0 0 0 4px rgba(var(--mfp-signal-rgb), 0.28); }
.pfx { background: var(--mfp-surface-2); font-family: var(--mfp-mono); color: var(--mfp-muted); align-self: stretch; display: flex; align-items: center; padding: 0 0.8rem; border-right: 1px solid var(--mfp-line); }
.pfx-wrap input { min-height: 0; height: 100%; }
.fgrid { gap: 1.1rem; }

/* radios as pills, claim-method choice as two cards */
.ro label { border: 1px solid var(--mfp-line); border-radius: 9999px; min-height: 44px; font-size: 0.88rem; font-weight: 600; color: var(--mfp-muted); background: var(--mfp-card); transition: background-color .25s var(--mfp-ease), color .25s; }
.ro input:checked + label { background: var(--mfp-ink); border-color: transparent; color: var(--mfp-on-ink); }
.ro input:focus-visible + label, .mc-opt input:focus-visible + label { outline: 2px solid var(--mfp-signal); outline-offset: 2px; box-shadow: none; }
.mc-opt label { border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-md); background: var(--mfp-card); padding: 1.1rem 1.2rem; }
.mc-opt label:hover { border-color: var(--mfp-line-strong); background: var(--mfp-surface-2); }
.mc-opt input:checked + label { border-color: var(--mfp-ink); background: var(--mfp-card); box-shadow: inset 0 0 0 1px var(--mfp-ink); }
.mc-h { font-family: var(--mfp-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.mc-d { font-size: 0.85rem; color: var(--mfp-muted); }
.mc-opt input:checked + label .mc-tick { background: var(--mfp-ink); border-color: var(--mfp-ink); color: var(--mfp-signal); }
.mc-tag { border-radius: 9999px; padding: 0.2rem 0.65rem; font-size: 0.68rem; }

/* alerts */
.al { border-radius: var(--mfp-r-md); font-size: 0.88rem; padding: 0.9rem 1.1rem; border-left: 0 !important; }
.al-i { background: var(--mfp-surface-2); box-shadow: inset 3px 0 0 var(--mfp-signal); color: var(--mfp-ink); }
.al-w { background: var(--mfp-warn-bg); box-shadow: inset 3px 0 0 var(--mfp-signal-deep); }
.al-s { background: var(--mfp-ok-bg); box-shadow: inset 3px 0 0 var(--mfp-ok); }
.al-d { background: var(--mfp-danger-bg); box-shadow: inset 3px 0 0 var(--mfp-danger); }

/* result: the one ink block per view, gold figure */
.res-box { background: var(--mfp-ink); border-radius: var(--mfp-r-lg); padding: 1.6rem 1.8rem; position: relative; overflow: hidden; }
.res-box::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 44%; background: var(--mfp-signal); border-radius: 0 3px 0 0; }
.res-box h3 { font: 600 0.7rem var(--mfp-body); letter-spacing: 0.09em; opacity: 1; color: var(--mfp-on-ink-dim); }
.res-total { font-family: var(--mfp-display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; color: var(--mfp-signal); font-variant-numeric: tabular-nums; }
.ri { background: rgba(255, 255, 255, 0.08); border-radius: var(--mfp-r-sm); }
.ri-lbl { opacity: 1; color: var(--mfp-on-ink-dim); font-size: 0.68rem; }
.ri-val { font-family: var(--mfp-mono); color: var(--mfp-on-ink); font-size: 0.95rem; }
.cap-hero { background: var(--mfp-surface-2); border: 0; box-shadow: inset 4px 0 0 var(--mfp-signal); border-radius: var(--mfp-r-md); }
.ch-l { color: var(--mfp-muted); font-size: 0.7rem; letter-spacing: 0.09em; }
.ch-v { font-family: var(--mfp-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--mfp-ink); }
.ch-sub, .ch-basis { font-size: 0.82rem; color: var(--mfp-muted); }
.ch-basis strong { color: var(--mfp-ink); }

/* buttons */
.btn { background: var(--mfp-ink); color: var(--mfp-on-ink); border-radius: 9999px; min-height: 44px; padding: 0.6rem 1.4rem; font-family: var(--mfp-body); font-size: 0.9rem; font-weight: 600; transition: transform .35s var(--mfp-ease), box-shadow .35s var(--mfp-ease); }
.btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(var(--mfp-ink-rgb), 0.5); }
.btn:active { transform: none; box-shadow: none; }
.btn-gh { border: 1.5px dashed var(--mfp-line-strong); border-radius: 9999px; min-height: 44px; font-family: var(--mfp-body); font-size: 0.88rem; font-weight: 600; color: var(--mfp-ink); }
.btn-gh:hover { background: var(--mfp-surface-2); border-color: var(--mfp-ink); color: var(--mfp-ink); }
.btn-rm { color: var(--mfp-muted); min-width: 44px; min-height: 44px; font-size: 1rem; }
.btn-rm:hover { color: var(--mfp-danger); }

/* tables */
.tbl th { background: var(--mfp-surface-2); color: var(--mfp-muted); font: 600 0.68rem var(--mfp-body); letter-spacing: 0.09em; border-bottom: 1px solid var(--mfp-line); padding: 0.7rem 0.8rem; }
.tbl td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--mfp-line); }
.tbl td.r { font-family: var(--mfp-mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tbl tr:nth-child(even) td { background: transparent; }
.tbl tfoot td { background: var(--mfp-ink) !important; color: var(--mfp-on-ink); }
.tbl tfoot td.r { color: var(--mfp-signal); }
.itbl th { background: var(--mfp-surface-2); color: var(--mfp-muted); font: 600 0.68rem var(--mfp-body); letter-spacing: 0.09em; }
.itbl .tr { background: var(--mfp-surface-2); font-family: var(--mfp-mono); }
.inp-sm { min-height: 2.75rem; width: 92px; font-size: 0.9rem; }
.zbadge { font-size: 0.75rem; }
.div { color: var(--mfp-muted); font-size: 0.7rem; letter-spacing: 0.09em; }
.div::before, .div::after { border-top-color: var(--mfp-line); }
.dd { border-radius: var(--mfp-r-md); border: 1px solid var(--mfp-line); box-shadow: var(--mfp-lift); }
.ddi { padding: 0.8rem 1rem; font-size: 0.95rem; border-bottom: 1px solid var(--mfp-line); }
.ddi:hover { background: var(--mfp-surface-2); }

@media (max-width: 600px) {
  .hero { padding-top: 1.25rem; }
  .tab-btn { font-size: 0.78rem; padding: 0.7rem 0.3rem; white-space: normal; }
  .card { padding: 1.25rem; }
  input[type=text], input[type=number], input[type=date], select { font-size: 16px; }
  .res-total { font-size: 2.1rem; }
}

/* the pets itemize table is wider than a phone: scroll inside it instead of pushing the page sideways */
.itbl { display: block; max-width: 100%; overflow-x: auto; }

/* ── make the pills read as buttons ────────────────────────────────────────────
   Top tabs: inactive ones get a visible chip, a pointer and a clear hover.
   Section pills (Predeparture / Misc / Wardrobe / Lease, and TQSA / HSTA): a "Choose one" label, a stronger outline,
   a lift on hover, and a gold dot on the one that is selected. */
.tab-btn { cursor: pointer; }
.tab-btn:not(.active) { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 0; color: rgba(242, 246, 238, 0.92); }
.tab-btn:not(.active):hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.tab-btn:not(.active)::after { content: "  \203A"; color: var(--mfp-signal); font-weight: 700; }  /* small arrow: this opens another section */

.sub-nav { align-items: center; row-gap: 0.6rem; }
.sub-nav::before { content: "Choose one:"; font: 600 0.72rem var(--mfp-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mfp-muted); margin-right: 0.35rem; }
.sub-btn { cursor: pointer; border: 1.5px solid rgba(var(--mfp-ink-rgb), 0.38); box-shadow: 0 1px 2px rgba(20, 32, 31, 0.08); color: var(--mfp-ink); }
.sub-btn:hover { border-color: var(--mfp-ink); background: var(--mfp-surface-2); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(var(--mfp-ink-rgb), 0.5); }
.sub-btn.active { border-color: var(--mfp-ink); }
.sub-btn.active::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--mfp-signal); display: inline-block; margin-right: 0.15rem; }
.sub-btn:active { transform: none; box-shadow: none; }
@media (max-width: 600px) { .sub-nav::before { flex-basis: 100%; margin-bottom: -0.2rem; } }

/* embedded in the website page the frame follows this tool's content height, so the body must not stretch to the frame */
body { min-height: 0; }

/* one content width (1200px, the exemplar's 1240px minus gutters); running text stays readable at about 80 characters */
.tab-nav, .tab-desc, .sub-nav, main, .hero h1, .hero p { max-width: 1200px; }
.tab-desc { max-width: 1200px; }
/* keep the intro text and card subtitles to about 90 characters without narrowing their box or their rules */
.tab-desc, .card-sub { padding-right: max(1.4rem, calc(100% - 90ch)); }
.card-sub { padding-right: max(0px, calc(100% - 90ch)); }