/* Tax calculator (tax-calculator.php). The header, tabs and footer repeat the homepage's. */
:root {
    --gnsw-head: #0D2B63; --gnsw-head-dark: #071B33; --gnsw-page: #eef2f8; --gnsw-card: #fff;
    --gnsw-ink: #0F2747; --gnsw-muted: #64748b; --gnsw-line: #e2e8f0; --gnsw-accent: #2563eb;
    --tc-soft: #f4f7fc; --tc-ok: #16a34a; --tc-bad: #dc2626;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Phones and tablets: keep the page at its own scale — no text inflation when turned sideways, no double-tap zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--gnsw-page); color: var(--gnsw-ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.gnsw-wrap { max-width: 1340px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1600px) { .gnsw-wrap { max-width: 1520px; } }

/* Header, tabs, footer — as the homepage */
.gnsw-topbar { background: var(--gnsw-card); border-bottom: 2px solid var(--gnsw-head); padding-top: env(safe-area-inset-top, 0px); }
.gnsw-topbar-inner { display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; align-items: center; gap: 16px; height: 52px; }
.gnsw-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; justify-self: start; }
.gnsw-logo img { height: 34px; width: auto; }
.gnsw-logo b { font-size: 19px; font-weight: 800; color: var(--gnsw-ink); letter-spacing: -0.5px; }
.gnsw-search { justify-self: stretch; width: 100%; display: flex; align-items: stretch; max-width: 620px; border: 1.5px solid var(--gnsw-head); overflow: hidden; background: #fff; height: 38px; }
.gnsw-search input[type=text] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0 14px; font-size: 13px; font-family: inherit; color: var(--gnsw-ink); background: transparent; }
.gnsw-search select { flex: 0 0 auto; max-width: 40%; border: 0; border-left: 1px solid var(--gnsw-line); outline: 0; padding: 0 10px; font-size: 12.5px; font-family: inherit; color: var(--gnsw-muted); background: #fff; cursor: pointer; }
.gnsw-search button { flex: 0 0 auto; white-space: nowrap; border: 0; background: var(--gnsw-head); color: #fff; padding: 0 22px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; font-family: inherit; }
.gnsw-search button:hover { background: var(--gnsw-head-dark); }
.gnsw-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
.gnsw-account { display: flex; align-items: center; gap: 9px; }
.gnsw-account .ico { font-size: 22px; color: var(--gnsw-muted); }
.gnsw-account .lines { line-height: 1.2; }
.gnsw-account .lines small { font-size: 11px; color: var(--gnsw-muted); display: block; }
.gnsw-account .lines a { font-size: 13px; font-weight: 700; color: var(--gnsw-accent); text-decoration: none; }
.gnsw-account .lines a:hover { text-decoration: underline; }
.gnsw-account .sep { color: var(--gnsw-muted); }
.gnsw-tabs { background: var(--gnsw-head); }
.gnsw-tabs-inner { display: flex; align-items: stretch; }
.gnsw-tabs a { color: #fff; text-decoration: none; padding: 8px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 8px; transition: background .15s; white-space: nowrap; }
.gnsw-tabs a:hover { background: rgba(255,255,255,0.12); }
.gnsw-tabs a.active { background: var(--gnsw-head-dark); }
.gnsw-footer { background: var(--gnsw-head-dark); color: #fff; padding: 9px 0; margin-top: auto; }
.gnsw-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.gnsw-footer a { color: #cdd9f0; text-decoration: none; }
.gnsw-footer a:hover { color: #fff; }

/* Page */
.tc-main { padding: 16px 0 28px; flex: 1 0 auto; }
@keyframes tcUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tc-hero, .tc-grid, .tc-how { animation: tcUp .5s cubic-bezier(.22,.61,.36,1) both; }
.tc-grid { animation-delay: .06s; } .tc-how { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .tc-hero, .tc-grid, .tc-how { animation: none; } }

.tc-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--gnsw-head-dark) 0%, var(--gnsw-head) 55%, #1d4ed8 100%); color: #fff; padding: 26px 28px; margin-bottom: 14px; }
.tc-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border: 46px solid rgba(255,255,255,.06); border-radius: 50%; pointer-events: none; }
.tc-hero-text { max-width: 640px; position: relative; z-index: 1; }
.tc-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #bfdbfe; }
.tc-hero h1 { margin: 6px 0 6px; font-size: 30px; font-weight: 900; letter-spacing: -0.8px; line-height: 1.1; }
.tc-hero p { margin: 0; color: #dbe7fb; font-size: 14.5px; }
.tc-hero-facts { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; position: relative; z-index: 1; }
.tc-hero-facts div { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); padding: 9px 14px; min-width: 120px; }
.tc-hero-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #bfdbfe; }
.tc-hero-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; }

.tc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; align-items: start; }
.tc-card { background: var(--gnsw-card); box-shadow: 0 4px 12px rgba(13,43,99,0.06); border: 1px solid #e3e9f3; padding: 20px 22px; }
.tc-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; font-weight: 800; color: var(--gnsw-ink); }
.tc-card-title > i { color: var(--gnsw-accent); }
.tc-step { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--gnsw-head); color: #fff; font-size: 12px; font-weight: 800; }

/* Form */
.tc-field { margin-bottom: 16px; }
.tc-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.tc-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--gnsw-ink); margin-bottom: 7px; }
.tc-field-head .tc-label { margin: 0; }
.tc-cur-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gnsw-muted); }
/* The currency box shows the choice as ordinary text; the real picker lies invisibly on top at 16px
   (phones open their own list and iPhones don't zoom in) — as the year box. */
.tc-cur-box { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #cdd7e6; background: #fff; padding: 6px 10px; }
.tc-cur-shown { font-size: 13px; font-weight: 600; color: var(--gnsw-ink); white-space: nowrap; }
.tc-cur-box > i { font-size: 10px; color: var(--gnsw-muted); }
.tc-cur-box select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; margin: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tc-cur-box:focus-within { border-color: var(--gnsw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tc-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--gnsw-head); }
.tc-seg label { position: relative; cursor: pointer; }
.tc-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tc-seg span { display: block; text-align: center; padding: 9px 8px; line-height: 1.25; font-size: 12.5px; font-weight: 700; color: var(--gnsw-head); transition: background .15s, color .15s; }
.tc-seg input:checked + span { background: var(--gnsw-head); color: #fff; }
.tc-seg input:focus-visible + span { outline: 2px solid var(--gnsw-accent); outline-offset: -4px; }
.tc-seg label:hover input:not(:checked) + span { background: var(--tc-soft); }

.tc-money { display: flex; align-items: stretch; border: 1.5px solid #cdd7e6; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tc-money:focus-within { border-color: var(--gnsw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tc-money input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 11px 13px; font-family: inherit; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--gnsw-ink); background: transparent; font-variant-numeric: tabular-nums; }
.tc-money input::placeholder { color: #a8b4c6; font-weight: 600; }
.tc-cur { display: grid; place-items: center; padding: 0 13px; font-style: normal; font-weight: 800; font-size: 12.5px; color: var(--gnsw-head); background: var(--tc-soft); border-left: 1px solid var(--gnsw-line); letter-spacing: .4px; }
.tc-money.bad { border-color: var(--tc-bad); box-shadow: 0 0 0 3px rgba(220,38,38,.10); }
.tc-hint { display: block; margin-top: 6px; color: var(--gnsw-muted); font-size: 12px; }
.tc-tip { border: 0; background: none; color: var(--gnsw-muted); cursor: help; padding: 0; font-size: 12.5px; position: relative; }
.tc-tip:hover, .tc-tip:focus-visible { color: var(--gnsw-accent); }
.tc-tip[aria-expanded="true"]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 260px; background: var(--gnsw-head-dark); color: #fff; font: 500 12px/1.45 'Inter', system-ui, sans-serif; text-align: left; padding: 9px 11px; z-index: 20; box-shadow: 0 10px 24px rgba(7,27,51,.25); }

.tc-parts { display: grid; gap: 9px; }
.tc-part { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; }
.tc-part > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--gnsw-ink); }
.tc-part .tc-money input { font-size: 15px; padding: 9px 11px; }
.tc-part-sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--gnsw-head); padding-top: 8px; margin-top: 2px; }
.tc-part-sum span { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--gnsw-muted); }
.tc-part-sum b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }

.tc-rate { background: var(--tc-soft); border: 1px dashed #c5d3ea; padding: 10px 12px; }
.tc-rate-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.tc-rate-line > i { color: var(--gnsw-accent); }
.tc-rate-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; background: #dcfce7; color: #166534; }
.tc-rate-tag.own { background: #fef3c7; color: #92400e; }
.tc-rate-line .tc-link { margin-left: auto; }
.tc-rate-own { margin-top: 9px; display: grid; gap: 5px; }
.tc-rate-own label { font-size: 12px; font-weight: 700; color: var(--gnsw-muted); }
.tc-rate-own input { border: 1.5px solid #cdd7e6; padding: 8px 11px; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--gnsw-ink); max-width: 220px; outline: 0; }
.tc-rate-own input:focus { border-color: var(--gnsw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.tc-year { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The year box shows the year as ordinary text (14px); the real picker lies invisibly on top at 16px,
   so tapping it opens the phone's own year wheel and iPhones don't zoom in. */
.tc-year-pick { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 170px;
    border: 1.5px solid #cdd7e6; background: #fff; padding: 9px 12px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--gnsw-ink); }
.tc-year-pick.empty .tc-year-shown { color: #94a3b8; font-weight: 500; }
.tc-year-pick > i { font-size: 11px; color: var(--gnsw-muted); }
.tc-year-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; margin: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tc-year-pick:focus-within { border-color: var(--gnsw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tc-year-pick.tc-filled, .tc-year-pick:has(select.tc-filled) { animation: tcFilled 4s ease both; }
.tc-age { font-size: 13px; color: var(--gnsw-muted); font-weight: 600; }
.tc-age b { color: var(--gnsw-ink); }

.tc-bands { margin: 4px 0 18px; }
.tc-bands-title { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--gnsw-muted); margin-bottom: 7px; }
.tc-bands ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.tc-bands li { background: var(--tc-soft); border-top: 3px solid #cbd5e1; padding: 7px 8px; transition: background .2s, border-color .2s, transform .2s; }
.tc-bands li b { display: block; font-size: 16px; font-weight: 900; color: var(--gnsw-ink); }
.tc-bands li span { display: block; font-size: 11px; color: var(--gnsw-muted); line-height: 1.3; }
.tc-bands li.on { background: var(--gnsw-head); border-top-color: #60a5fa; transform: translateY(-2px); }
.tc-bands li.on b, .tc-bands li.on span { color: #fff; }

.tc-form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--gnsw-line); padding-top: 14px; }
.tc-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--gnsw-head); color: #fff; padding: 11px 20px; font-family: inherit; font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: .3px; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s; }
.tc-btn:hover { background: var(--gnsw-head-dark); transform: translateY(-1px); }
.tc-btn.ghost { background: #fff; color: var(--gnsw-head); border: 1.5px solid var(--gnsw-head); padding: 9.5px 16px; }
.tc-btn.ghost:hover { background: var(--tc-soft); }
.tc-link { border: 0; background: none; padding: 0; color: var(--gnsw-accent); font-family: inherit; font-weight: 700; font-size: 12.5px; line-height: 1.2; cursor: pointer; text-decoration: none; }
.tc-link:hover { text-decoration: underline; }

/* Estimate */
/* Wide, tall screens: the form stays in view while the longer estimate scrolls past (sliders stay in reach). */
.tc-empty { text-align: center; color: var(--gnsw-muted); padding: 34px 20px 38px; background: repeating-linear-gradient(135deg, #f8fafd 0 12px, #f3f6fb 12px 24px); border: 1px dashed #d3ddeb; }
.tc-empty i { font-size: 38px; color: #9fb3d1; margin-bottom: 10px; }
.tc-empty p { margin: 0 auto; max-width: 340px; }
.tc-empty ul { list-style: none; padding: 0; margin: 12px 0 0; display: inline-grid; gap: 5px; text-align: left; }
.tc-empty li { font-size: 13px; color: var(--gnsw-ink); }
.tc-empty li i { font-size: 12px; color: var(--gnsw-accent); margin: 0 6px 0 0; }

.tc-total-box { background: linear-gradient(135deg, var(--gnsw-head-dark), var(--gnsw-head)); color: #fff; padding: 18px 20px; position: relative; overflow: hidden; }
.tc-total-box::after { content: "\f1b9"; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 16px; bottom: -14px; font-size: 92px; color: rgba(255,255,255,.07); }
.tc-total-box > span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #bfdbfe; }
.tc-total-box > b { display: block; font-size: 38px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tc-total-box > b small { font-size: 17px; font-weight: 800; color: #bfdbfe; margin-right: 6px; letter-spacing: 0; }
.tc-total-sub { margin-top: 6px; font-size: 12.5px; color: #dbe7fb; position: relative; z-index: 1; }
.tc-total-sub b, .tc-total-sub .nw { color: #fff; white-space: nowrap; }
.tc-total-sub .nw { color: inherit; }

.tc-bar { display: flex; height: 12px; margin: 14px 0 6px; background: var(--tc-soft); overflow: hidden; }
.tc-bar i { display: block; height: 100%; transition: width .45s cubic-bezier(.22,.61,.36,1); min-width: 2px; }
.tc-bar i + i { box-shadow: -1px 0 0 #fff; }

.tc-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.tc-lines th, .tc-lines td { padding: 9px 4px; border-bottom: 1px solid var(--gnsw-line); text-align: left; vertical-align: top; }
.tc-lines thead th { font-size: 10.5px; font-weight: 800; color: var(--gnsw-muted); text-transform: uppercase; letter-spacing: .5px; padding-top: 4px; }
.tc-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.tc-lines tbody tr { transition: background .15s; }
.tc-lines tbody tr:hover, .tc-lines tbody tr.hl { background: #f5f8fe; }
.tc-lines .nm { font-weight: 700; display: flex; align-items: flex-start; gap: 8px; }
.tc-lines .nm small { display: block; font-weight: 500; color: var(--gnsw-muted); font-size: 11.5px; margin-top: 1px; }
.tc-lines .dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 4px; }
.tc-lines .how { color: var(--gnsw-muted); font-size: 12px; }
.tc-lines .how b { color: var(--gnsw-ink); font-weight: 700; }
.tc-lines .sh { display: block; font-size: 11px; color: #94a3b8; font-weight: 600; }
.tc-lines tfoot th, .tc-lines tfoot td { border-bottom: 0; }
.tc-lines tfoot .tot th, .tc-lines tfoot .tot td { border-top: 2px solid var(--gnsw-head); font-size: 15px; font-weight: 900; padding-top: 11px; }
.tc-lines tfoot .grand td, .tc-lines tfoot .grand th { color: var(--gnsw-muted); font-size: 12.5px; font-weight: 700; padding-top: 2px; }

/* New rates coming (approved in Gang Leader, not yet in force) */
.tc-upcoming { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; padding: 11px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid var(--gnsw-accent); color: #1e3a8a; font-size: 13px; }
.tc-upcoming i { color: var(--gnsw-accent); }
.tc-then { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 12.5px; line-height: 1.45; }
.tc-then > i { margin-top: 2px; color: var(--gnsw-accent); }
.tc-then .up { color: var(--tc-bad); } .tc-then .down { color: var(--tc-ok); }
.tc-then .sh { color: #475569; }

/* "Read my document" */
.tc-read { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; margin-bottom: 18px;
    background: linear-gradient(135deg, #f5f8ff, #eef4ff); border: 1px dashed #9db8ee; }
.tc-read-text b { display: block; font-size: 13px; color: var(--gnsw-ink); }
.tc-read-text b i { color: #7c3aed; margin-right: 4px; }
.tc-read-text span { display: block; font-size: 12px; color: var(--gnsw-muted); margin-top: 2px; }
.tc-read-btn { cursor: pointer; white-space: nowrap; }
.tc-read.busy .tc-read-btn { opacity: .55; pointer-events: none; }
.tc-read-status { grid-column: 1 / -1; font-size: 12.5px; padding: 9px 11px; background: #fff; border: 1px solid #dbe4f3; color: var(--gnsw-ink); }
.tc-read-status.ok { border-color: #bbf7d0; background: #f0fdf4; }
.tc-read-status.ok b i { color: var(--tc-ok); }
.tc-read-status.warn { border-color: #fde68a; background: #fffbeb; }
.tc-read-status.bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.tc-read-status ul { margin: 6px 0 0; padding-left: 18px; color: #475569; }
.tc-filled { animation: tcFilled 4s ease both; }
@keyframes tcFilled { 0%, 60% { background: #fef9c3; } 100% { background: transparent; } }

/* Vehicle details (optional) */
.tc-more { margin: 2px 0 16px; border: 1px solid var(--gnsw-line); background: #fbfcfe; }
.tc-more summary { cursor: pointer; padding: 10px 12px; font-size: 12.5px; font-weight: 800; color: var(--gnsw-ink); list-style: none; }
.tc-more summary::-webkit-details-marker { display: none; }
.tc-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 7px; background: var(--gnsw-head); color: #fff; font-size: 12px; line-height: 1; }
.tc-more[open] summary::before { content: "−"; }
.tc-more summary span { font-weight: 500; color: var(--gnsw-muted); }
.tc-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
.tc-more-grid label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gnsw-muted); }
.tc-text { border: 1.5px solid #cdd7e6; padding: 9px 11px; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--gnsw-ink); outline: 0; min-width: 0; }
.tc-text:focus { border-color: var(--gnsw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Port and clearance charges, and the grand totals */
.tc-port { margin-top: 14px; border: 1px solid #e3e9f3; }
.tc-port-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 12px; background: var(--tc-soft); font-size: 13px; font-weight: 800; color: var(--gnsw-ink); border-bottom: 1px solid #e3e9f3; }
.tc-port-h i { color: var(--gnsw-accent); }
.tc-port-h small { font-weight: 600; color: var(--gnsw-muted); font-size: 11.5px; white-space: nowrap; }
.tc-port ul { list-style: none; margin: 0; padding: 0; }
.tc-port li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--gnsw-line); font-size: 13px; }
.tc-port li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-port li.off .n, .tc-port li.off b { color: #94a3b8; text-decoration: line-through; }
.tc-port-pick { display: flex; align-items: center; gap: 9px; cursor: default; }
label.tc-port-pick { cursor: pointer; }
.tc-port-pick input { width: 16px; height: 16px; accent-color: var(--gnsw-head); margin: 0; }
.tc-port .n { font-weight: 700; }
.tc-port .n small { display: block; font-weight: 500; font-size: 11.5px; color: var(--gnsw-muted); }
.tc-port-tot { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 13px; font-weight: 800; }
.tc-grand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tc-grand > div { padding: 12px 14px; background: var(--tc-soft); border: 1px solid #e3e9f3; }
.tc-grand > div:first-child { background: var(--gnsw-head); border-color: var(--gnsw-head); color: #fff; }
.tc-grand span { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .8; }
.tc-grand b { display: block; font-size: 20px; font-weight: 900; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tc-grand small { display: block; font-size: 11.5px; opacity: .75; margin-top: 1px; }

/* Saved estimate: reference + QR */
.tc-savedbox { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1.5px solid #bbf7d0; background: #f0fdf4; }
.tc-savedbox img { width: 96px; height: 96px; image-rendering: pixelated; background: #fff; flex: 0 0 auto; }
.tc-savedbox .k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #166534; }
.tc-savedbox b { display: block; font-size: 19px; font-weight: 900; color: var(--gnsw-ink); letter-spacing: .3px; }
.tc-savedbox p { margin: 3px 0 6px; font-size: 12px; color: #475569; }
.tc-saved-acts { display: flex; gap: 14px; flex-wrap: wrap; }
.tc-wa i { color: #16a34a; }
.tc-btn[disabled] { opacity: .7; cursor: progress; }

/* The saved-estimate page */
.tc-est { max-width: 920px; margin: 0 auto; }
.tc-est-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.tc-kicker.dark { color: var(--gnsw-accent); }
.tc-est h1 { margin: 4px 0 6px; font-size: 28px; font-weight: 900; letter-spacing: -.5px; color: var(--gnsw-ink); }
.tc-genuine { margin: 0; font-size: 13px; color: #166534; }
.tc-genuine i { margin-right: 4px; }
.tc-est-qr { margin: 0; text-align: center; flex: 0 0 auto; }
.tc-est-qr img { width: 120px; height: 120px; image-rendering: pixelated; border: 1px solid var(--gnsw-line); }
.tc-est-qr figcaption { font-size: 11px; color: var(--gnsw-muted); margin-top: 3px; }
.tc-est-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 14px; }
.tc-est-facts div { background: var(--tc-soft); border: 1px solid #e3e9f3; padding: 8px 11px; }
.tc-est-facts dt { font-size: 10.5px; font-weight: 800; color: var(--gnsw-muted); text-transform: uppercase; letter-spacing: .5px; }
.tc-est-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 13.5px; word-break: break-word; }
.tc-missing { max-width: 520px; margin: 30px auto; text-align: center; padding: 34px 24px; }
.tc-missing > i { font-size: 40px; color: #9fb3d1; }
.tc-missing h1 { font-size: 22px; margin: 10px 0 6px; }
.tc-missing p { color: var(--gnsw-muted); margin: 0 0 16px; }

/* ---------- Interactive and alive ---------- */
/* The value slider */
.tc-slide { margin-top: 10px; }
.tc-slide input[type=range] { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; touch-action: pan-y; }
.tc-slide input[type=range]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--gnsw-accent) var(--p), #dbe3ef var(--p)); }
.tc-slide input[type=range]::-moz-range-track { height: 6px; background: #dbe3ef; }
.tc-slide input[type=range]::-moz-range-progress { height: 6px; background: var(--gnsw-accent); }
.tc-slide input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--gnsw-head); box-shadow: 0 3px 10px rgba(13,43,99,.3); transition: transform .12s; }
.tc-slide input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--gnsw-head); box-shadow: 0 3px 10px rgba(13,43,99,.3); }
.tc-slide input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.tc-slide input[type=range]:focus-visible { outline: 2px solid var(--gnsw-accent); outline-offset: 2px; }
.tc-slide-x { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--gnsw-muted); font-weight: 600; margin-top: 2px; }
.tc-slide-x .mid { color: var(--gnsw-accent); }

/* Popular right now */
.tc-pop { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: -2px 0 14px; padding: 10px 14px; background: #fff; border: 1px solid #e3e9f3; box-shadow: 0 2px 8px rgba(13,43,99,.04); animation: tcUp .4s ease both; }
.tc-pop-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gnsw-ink); }
.tc-pop-live i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: tcPulse 1.8s infinite; }
@keyframes tcPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.tc-pop-k { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gnsw-muted); }
.tc-pop-k i { color: #ea580c; margin-right: 3px; }
.tc-pop-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-chip { border: 1.5px solid #cdd7e6; background: var(--tc-soft); color: var(--gnsw-head); font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 11px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; font-variant-numeric: tabular-nums; }
.tc-chip:hover { border-color: var(--gnsw-accent); background: #fff; transform: translateY(-1px); }

/* What the last change did */
.tc-total-box { position: relative; }
.tc-delta { position: absolute; right: 18px; top: 16px; font-style: normal; font-weight: 800; font-size: 14px; padding: 4px 9px; color: #fff; pointer-events: none; animation: tcDelta 1.8s ease forwards; font-variant-numeric: tabular-nums; z-index: 2; }
.tc-delta.up { background: #dc2626; } .tc-delta.down { background: #16a34a; }
@keyframes tcDelta { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.tc-lines tr.tc-moved td { animation: tcRow 1.6s ease; }
@keyframes tcRow { 0%, 40% { background: #fef9c3; } 100% { background: transparent; } }
.tc-ld { display: block; font-style: normal; font-size: 11px; font-weight: 800; animation: tcFade 1.8s ease forwards; }
.tc-ld.up { color: var(--tc-bad); } .tc-ld.down { color: var(--tc-ok); }
@keyframes tcFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.tc-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* How it adds up (waterfall.js) */
#tc-flow { margin-top: 14px; }
.tc-wf { border: 1px solid #e3e9f3; background: #fbfcfe; padding: 12px 14px 10px; }
.tc-wf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tc-wf-head > span { font-size: 13px; font-weight: 800; color: var(--gnsw-ink); }
.tc-wf-head > span i { color: var(--gnsw-accent); margin-right: 4px; }
.tc-wf-plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; }
.tc-wf-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; min-width: 0; }
.tc-wf-amt { font-size: 11px; font-weight: 800; color: var(--gnsw-ink); text-align: center; white-space: nowrap; opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.tc-wf-col.shown .tc-wf-amt { opacity: 1; }
.tc-wf-track { position: relative; height: 130px; background: repeating-linear-gradient(0deg, transparent 0 25%, rgba(148,163,184,.12) 25% calc(25% + 1px)); }
.tc-wf-bar { position: absolute; left: 12%; right: 12%; bottom: 0; height: 0; transition: height .4s cubic-bezier(.22,.61,.36,1), bottom .4s cubic-bezier(.22,.61,.36,1); }
.tc-wf-col.total .tc-wf-bar { left: 4%; right: 4%; }
.tc-wf-lbl { font-size: 11px; font-weight: 700; color: var(--gnsw-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px; border-top: 2px solid #cbd5e1; }
.tc-wf-col:hover .tc-wf-bar, .tc-wf-col.on .tc-wf-bar { filter: brightness(1.12); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37,99,235,.35); }
.tc-wf-col.on .tc-wf-lbl { color: var(--gnsw-ink); border-top-color: var(--gnsw-accent); }
.tc-wf-col:focus-visible { outline: 2px solid var(--gnsw-accent); outline-offset: 2px; }
.tc-wf-cap { margin-top: 8px; min-height: 18px; font-size: 12.5px; line-height: 1.45; color: #334155; }
.tc-wf-cap .hint { color: #94a3b8; }
.tc-wf-replay { font-size: 12px; }

/* Smart tips */
.tc-insights { display: grid; gap: 6px; margin: 14px 0 12px; }
.tc-ins { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; background: #f8fafc; border-left: 3px solid var(--gnsw-accent); font-size: 12.5px; line-height: 1.45; color: #334155; animation: tcUp .35s ease both; }
.tc-ins:nth-child(2) { animation-delay: .06s; } .tc-ins:nth-child(3) { animation-delay: .12s; }
.tc-ins > i { color: var(--gnsw-accent); margin-top: 2px; width: 14px; text-align: center; }
.tc-ins.warn { background: #fffbeb; border-left-color: #d97706; }
.tc-ins.warn > i { color: #d97706; }

/* Pin & compare */
.tc-pin { margin-top: 14px; border: 1.5px solid #c7d7f5; background: #f5f8ff; padding: 12px 14px; animation: tcUp .35s ease both; }
.tc-pin-h { font-size: 13px; font-weight: 800; color: var(--gnsw-ink); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tc-pin-h i { color: var(--gnsw-accent); }
.tc-pin-h small { font-weight: 600; color: var(--gnsw-muted); }
.tc-pin-note { margin: 6px 0 0; font-size: 12.5px; color: #475569; }
.tc-pin-t { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tc-pin-t th, .tc-pin-t td { padding: 6px 4px; border-bottom: 1px solid #dbe5f6; text-align: right; }
.tc-pin-t th:first-child { text-align: left; font-weight: 600; color: #334155; }
.tc-pin-t thead th { font-size: 11px; font-weight: 700; color: var(--gnsw-muted); vertical-align: bottom; line-height: 1.3; }
.tc-pin-t .tag { display: block; width: max-content; margin-left: auto; margin-bottom: 2px; padding: 1px 6px; background: #94a3b8; color: #fff; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
.tc-pin-t .tag.now { background: var(--gnsw-head); }
.tc-pin-t tr.strong th, .tc-pin-t tr.strong td { font-weight: 900; color: var(--gnsw-ink); font-size: 13.5px; }
.tc-pin-t td.up { color: var(--tc-bad); font-weight: 800; } .tc-pin-t td.down { color: var(--tc-ok); font-weight: 800; }
.tc-pin-acts { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 9px; }

/* Drag along the age chart */
.tc-chart svg { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
body.tc-scrubbing, body.tc-scrubbing * { user-select: none !important; -webkit-user-select: none !important; cursor: ew-resize !important; }

/* First-visit tour (tour.js) */
.tc-tour { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.tc-tour-spot { position: fixed; box-shadow: 0 0 0 9999px rgba(7,27,51,.62); border: 2px solid #60a5fa; transition: left .3s, top .3s, width .3s, height .3s; pointer-events: none; }
.tc-tour-tip { position: fixed; background: #fff; padding: 14px 16px 12px; box-shadow: 0 18px 44px rgba(7,27,51,.35); pointer-events: auto; animation: tcUp .3s ease both; }
.tc-tour-n { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--gnsw-accent); margin-bottom: 3px; }
.tc-tour-tip b { display: block; font-size: 15px; color: var(--gnsw-ink); }
.tc-tour-tip p { margin: 5px 0 10px; font-size: 13px; line-height: 1.45; color: #475569; }
.tc-tour-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-tour-acts .tc-btn { padding: 9px 14px; }

@media (prefers-reduced-motion: reduce) {
    .tc-delta, .tc-ld, .tc-lines tr.tc-moved td, .tc-ins, .tc-pin, .tc-pop, .tc-tour-tip, .tc-pop-live i { animation: none !important; }
    .tc-wf-bar, .tc-tour-spot { transition: none !important; }
}

/* How age changes the taxes */
.tc-agebox { margin-top: 16px; border: 1px solid #e3e9f3; background: #fbfcfe; padding: 14px 14px 10px; }
.tc-agebox-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: var(--gnsw-ink); margin-bottom: 10px; }
.tc-agebox-h i { color: var(--gnsw-accent); }
.tc-agebox-h small { font-size: 11.5px; font-weight: 600; color: var(--gnsw-muted); }
.tc-alert { display: flex; gap: 10px; align-items: flex-start; background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #ea580c; color: #7c2d12; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; }
.tc-alert > i { color: #ea580c; margin-top: 2px; }
.tc-cmp { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.tc-cmp button { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "y b" "x e"; gap: 1px 10px; text-align: left; border: 1px solid #e3e9f3; background: #fff; padding: 9px 11px; cursor: pointer; font-family: inherit; color: var(--gnsw-ink); transition: border-color .15s, transform .15s; }
.tc-cmp button:hover { border-color: var(--gnsw-accent); transform: translateY(-1px); }
.tc-cmp .y { grid-area: y; font-size: 12.5px; font-weight: 700; }
.tc-cmp .x { grid-area: x; font-size: 11.5px; color: var(--gnsw-muted); }
.tc-cmp b { grid-area: b; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.tc-cmp em { grid-area: e; font-style: normal; font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tc-cmp .less em { color: var(--tc-ok); }
.tc-cmp .more em { color: var(--tc-bad); }
.tc-chart svg { display: block; width: 100%; height: 110px; }
.tc-chart rect { cursor: pointer; transition: fill-opacity .15s; }
.tc-chart rect:hover { fill-opacity: 1; }
.tc-chart-x { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--gnsw-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tc-chart-x .me { font-weight: 800; color: var(--gnsw-ink); text-align: center; }
.tc-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: var(--gnsw-muted); }
.tc-chart-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; opacity: .75; }
.tc-chart-hint { margin: 6px 0 0; font-size: 11px; color: #94a3b8; }

.tc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tc-actions .tc-btn { justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 1.25; }
.tc-errors { margin: 0; padding: 12px 14px 12px 32px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.tc-how { margin-top: 14px; }
.tc-how-list { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 22px; }
.tc-how-list li { counter-increment: s; position: relative; padding: 6px 0 6px 34px; font-size: 13px; color: #334155; }
.tc-how-list li::before { content: counter(s); position: absolute; left: 0; top: 5px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--tc-soft); border: 1px solid #d5e0f0; color: var(--gnsw-head); font-size: 11.5px; font-weight: 800; }
.tc-how-list b { color: var(--gnsw-ink); }

.tc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--gnsw-head-dark); color: #fff; padding: 10px 16px; font-size: 13px; font-weight: 700; box-shadow: 0 14px 30px rgba(7,27,51,.3); transition: opacity .2s, transform .2s; z-index: 50; pointer-events: none; }
.tc-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Phones: the total follows you until the estimate is on screen */
.tc-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--gnsw-head-dark); color: #fff; box-shadow: 0 -8px 24px rgba(7,27,51,.25); }
.tc-dock span { font-size: 11.5px; font-weight: 700; color: #bfdbfe; text-transform: uppercase; letter-spacing: .6px; }
.tc-dock b { font-size: 18px; font-weight: 900; margin-left: auto; font-variant-numeric: tabular-nums; }
.tc-dock-go { color: #fff; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255,255,255,.12); }

/* The print-only header of the estimate */
.tc-print-head { display: none; }

@media (max-width: 1024px) {
    .tc-grid { grid-template-columns: minmax(0, 1fr); }   /* never wider than the screen */
    .tc-result { position: static; }
}
@media (max-width: 860px) {
    .gnsw-topbar-inner { grid-template-columns: auto 1fr; height: auto; padding: 9px 0; gap: 10px; }
    .gnsw-logo { padding-left: 4px; }
    .gnsw-actions { justify-self: end; padding-right: 4px; }
    .gnsw-search { grid-column: 1 / -1; order: 3; max-width: none; }
}
@media (max-width: 680px) {
    .gnsw-wrap { padding: 0 16px; }
    .gnsw-tabs-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .gnsw-tabs a { padding: 8px 16px; }
    .gnsw-account .ico { display: none; }
    .gnsw-footer-inner { justify-content: center; text-align: center; gap: 6px; }
    .tc-main { padding-top: 12px; }
    .tc-hero { padding: 20px 18px; }
    .tc-hero h1 { font-size: 25px; }
    .tc-hero-facts { width: 100%; }
    .tc-hero-facts div { flex: 1 1 0; min-width: 0; }
    .tc-card { padding: 16px 14px; }
    .tc-total-box > b { font-size: 31px; }
    .tc-bands ol { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tc-part { grid-template-columns: 1fr; gap: 4px; }
    .tc-lines .hide-sm { display: none; }
    .tc-read { grid-template-columns: 1fr; }
    .tc-more-grid, .tc-grand { grid-template-columns: 1fr; }
    .tc-est-head { flex-direction: column-reverse; align-items: stretch; }
    .tc-est-qr { align-self: center; }
    .tc-wf { padding: 10px 8px 8px; }
    .tc-wf-plot { gap: 3px; }
    .tc-wf-track { height: 110px; }
    .tc-wf-amt, .tc-wf-lbl { font-size: 10px; }
    .tc-pop { gap: 8px; }
    .tc-pin-t { font-size: 11.5px; }
    .tc-pin-t thead th { font-size: 10px; }
    body.tc-has-dock { padding-bottom: 58px; }
    body.tc-has-dock .sp-launch { bottom: 72px !important; }   /* the chat button sits above the total bar */
}
@media (min-width: 681px) { .tc-dock { display: none !important; } }
/* iPhone and iPad zoom into any box with text under 16px when it's tapped — so on touch screens every box is 16px or more. */
@media (pointer: coarse), (max-width: 1024px) {
    .gnsw-search input[type=text], .gnsw-search select, .tc-cur-pick select, .tc-part .tc-money input,
    .tc-rate-own input, .tc-text, .tc-main input, .tc-main select, .tc-main textarea { font-size: 16px; }
    .tc-money input#tc-value { font-size: 20px; }
}

/* ---------- Minimal page for agents (tax-calculator.php): the banner, a short form, one result table ---------- */
.tc-upcoming { margin: 0 0 12px; }
.tc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tc-form .tc-field { margin-bottom: 14px; }
.tc-how-toggle { display: inline-block; margin-top: 8px; font-weight: 600; }
.tc-rate { padding: 8px 12px; }
.tc-more { margin-bottom: 14px; }
.tc-result .tc-card-title { margin-bottom: 12px; }
.tc-empty { margin: 0; padding: 26px 16px; font-size: 13.5px; }
.tc-total-box { padding: 14px 18px; }
.tc-total-box > b { font-size: 32px; }
.tc-total-box::after { font-size: 72px; bottom: -10px; }
p.tc-then { margin: 10px 0 0; align-items: center; }
.tc-lines.tc-min { margin-top: 12px; font-size: 13.5px; }
.tc-lines.tc-min th, .tc-lines.tc-min td { padding: 7px 4px; vertical-align: baseline; }
.tc-lines.tc-min thead th { padding-top: 0; }
.tc-lines.tc-min .rt { width: 64px; text-align: right; color: var(--gnsw-muted); white-space: nowrap; padding-right: 14px; }
.tc-lines.tc-min td small { display: block; font-size: 11.5px; font-weight: 500; color: var(--gnsw-muted); }
.tc-lines.tc-min tr.tc-val td { color: var(--gnsw-muted); }
.tc-lines.tc-min tr.tc-val td.num { color: var(--gnsw-ink); font-weight: 600; }
.tc-lines.tc-min .tc-sum th, .tc-lines.tc-min .tc-sum td { border-top: 2px solid var(--gnsw-head); font-weight: 800; }
.tc-lines.tc-min .tc-portrows .n { font-weight: 600; }
.tc-lines.tc-min .tc-portrows tr.off td { color: #94a3b8; }
.tc-lines.tc-min .tc-portrows tr.off .num { text-decoration: line-through; }
.tc-lines.tc-min tfoot .pay th, .tc-lines.tc-min tfoot .pay td { border-top: 2px solid var(--gnsw-head); border-bottom: 0; background: var(--tc-soft); font-size: 16px; font-weight: 900; padding-top: 10px; padding-bottom: 10px; }
.tc-lines.tc-min tfoot .pay th { padding-left: 12px; }
.tc-lines.tc-min tfoot .pay td.num { padding-right: 12px; }
.tc-savedbox img { width: 76px; height: 76px; }
.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tc-field > .tc-rate { margin-top: 8px; }
/* Year of manufacture: type it, or open the list (the real picker lies invisibly over the arrow, so phones open their own wheel). */
.tc-year-combo { display: inline-flex; align-items: stretch; border: 1.5px solid #cdd7e6; background: #fff; }
.tc-year-combo:focus-within { border-color: var(--gnsw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tc-year-combo input { width: 9.5em; border: 0; outline: 0; padding: 9px 12px; font: 600 14px/1.3 inherit; font-family: inherit; color: var(--gnsw-ink); background: transparent; font-variant-numeric: tabular-nums; }
.tc-year-combo input::placeholder { color: #94a3b8; font-weight: 500; }
.tc-year-drop { position: relative; display: grid; place-items: center; width: 42px; border-left: 1px solid #cdd7e6; background: var(--tc-soft); color: var(--gnsw-muted); font-size: 11px; cursor: pointer; }
.tc-year-drop:hover { color: var(--gnsw-head); }
.tc-year-drop select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; margin: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* Statistical value (GMD) above the spreadsheet's tax table */
.tc-sv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 0; padding: 9px 12px; background: var(--tc-soft); border: 1px solid #e3e9f3; font-size: 13px; }
.tc-sv span { font-weight: 700; color: var(--gnsw-ink); }
.tc-sv small { font-size: 12px; color: var(--gnsw-muted); }
.tc-sv b { margin-left: auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-table { overflow-x: auto; }
.tc-lines.tc-min td.base { font-weight: 500; color: var(--gnsw-muted); }
.tc-lines td.base { text-align: left; }             /* tax base figures sit directly under their left-aligned heading */
/* The tax table's heading row: a navy strip, in the same shape as the statistical value bar above it.
   The outer columns get the same 12px inset as that bar, so every figure stays under its heading. */
.tc-lines.tc-min thead th, .tc-est .tc-lines thead th { background: var(--gnsw-head); color: #fff; padding-top: 9px; padding-bottom: 9px; border-bottom: 0; letter-spacing: .6px; }
.tc-lines.tc-min th:first-child, .tc-lines.tc-min td:first-child, .tc-est .tc-lines th:first-child, .tc-est .tc-lines td:first-child { padding-left: 12px; }
.tc-lines.tc-min th:last-child, .tc-lines.tc-min td:last-child, .tc-est .tc-lines th:last-child, .tc-est .tc-lines td:last-child { padding-right: 12px; }
.tc-lines.tc-min { margin-top: 10px; }
.tc-lines.tc-min thead th.rt { color: #fff; }          /* the Percent heading too, not the column's grey */
.tc-lines.tc-min tbody td:first-child { font-size: 13px; font-weight: 700; color: var(--gnsw-ink); }   /* tax names: as the "Statistical value (GMD)" label */
.tc-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; }
@media (max-width: 1024px) { .tc-grid { grid-template-columns: minmax(0, 1fr); } }
/* The disclaimer under Calculate: a red notice, always open. */
.tc-disclaimer { margin: 14px 0 0; border: 1px solid #fecaca; border-left: 3px solid #dc2626; background: #fef2f2; }
.tc-disc-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px 6px; font-size: 12.5px; font-weight: 800; color: #b91c1c; }
.tc-disc-h i { width: 14px; flex: none; text-align: center; color: #dc2626; }
.tc-disc-in { padding: 0 14px 14px 34px; color: #7f1d1d; font-size: 12.5px; line-height: 1.55; }
.tc-disc-in p { margin: 0 0 8px; }
.tc-disc-list { list-style: none; margin: 0; padding: 0; counter-reset: disc; display: grid; gap: 6px; }
.tc-disc-list li { counter-increment: disc; position: relative; padding-left: 22px; }
.tc-disc-list li::before { content: counter(disc, lower-alpha) ")"; position: absolute; left: 0; font-weight: 800; color: #b91c1c; }
@media (max-width: 680px) {
    .tc-total-box > b { font-size: 28px; }
    .tc-actions .tc-btn { font-size: 12px; padding-left: 6px; padding-right: 6px; gap: 6px; }
    .tc-lines.tc-min { font-size: 12.5px; }
    .tc-lines.tc-min th, .tc-lines.tc-min td { padding-left: 3px; padding-right: 3px; }
    .tc-lines.tc-min .rt { width: auto; padding-right: 8px; }
}

@media print {
    /* The report keeps its own white border (.tc-main padding, repeated on every page by
       box-decoration-break), so it looks the same whatever "Margins" is set to in the print
       dialog — with "None" it used to run from edge to edge. */
    @page { margin: 0; }
    body { background: #fff; font-size: 12px; display: block; }
    .gnsw-topbar, .gnsw-tabs, .gnsw-footer, .tc-hero, .tc-upcoming, .tc-form, .tc-actions, .tc-dock, .tc-toast, #tc-result-title, .sp-launch, .sp-panel, .sp-peek { display: none !important; }
    .tc-main { padding: 10mm 14mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .gnsw-wrap { max-width: none; padding: 0; }
    .tc-grid { display: block; }
    .tc-card { box-shadow: none; border: 0; padding: 0; }
    .tc-print-head { display: block; border-bottom: 2px solid #0D2B63; padding-bottom: 10px; margin-bottom: 12px; }
    .tc-print-head .ph-top { display: flex; align-items: center; gap: 10px; }
    .tc-print-head img { height: 34px; }
    .tc-print-head h1 { margin: 0; font-size: 19px; }
    .tc-print-head .ph-when { margin-left: auto; font-size: 11px; color: #475569; text-align: right; }
    .tc-print-head dl { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; margin: 10px 0 0; }
    .tc-print-head dt { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .4px; }
    .tc-print-head dd { margin: 0; font-weight: 700; }
    .tc-total-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tc-bar, .tc-lines .dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tc-how { break-inside: avoid; margin-top: 16px; }
    .tc-chart-hint { display: none; }
    .tc-slide, .tc-pop, .tc-insights, .tc-pin, .tc-wf-replay, .tc-wf-cap, .tc-delta, .tc-ld, .tc-tour { display: none !important; }
    .tc-wf, .tc-wf-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tc-wf-amt { opacity: 1 !important; }
    .tc-read, .tc-savedbox, .tc-port-pick input { display: none !important; }
    .tc-print-head .ph-ref { font-size: 15px; font-weight: 800; margin-left: 8px; color: #0D2B63; }
    .tc-print-head .ph-qr { width: 78px; height: 78px; margin-left: 12px; image-rendering: pixelated; }
    .tc-print-head .ph-verify { margin: 8px 0 0; font-size: 10.5px; color: #475569; word-break: break-all; }
    .tc-port li.off { display: none; }
    .tc-grand > div:first-child, .tc-then, .tc-upcoming { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tc-est .tc-actions, .tc-est-qr figcaption { display: none !important; }
    .tc-agebox, .tc-alert, .tc-chart rect, .tc-chart-legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tc-agebox { break-inside: avoid; }
    .tc-lines tbody tr:hover { background: none; }
    .tc-lines thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* A compact report: the facts on one line, no block split across pages, and
       "Total taxes" printed once after the last tax (a <tfoot> repeats on every page). */
    .tc-print-head dl { display: flex; flex-wrap: wrap; gap: 6px 30px; }
    .tc-total-box { padding: 10px 16px; break-inside: avoid; }
    .tc-total-sub { margin-top: 4px; }
    .tc-total-box > b { font-size: 30px; }
    .tc-total-box::after { font-size: 70px; bottom: -10px; }
    .tc-wf { padding: 8px 12px 6px; break-inside: avoid; }
    .tc-wf-head { margin-bottom: 6px; }
    .tc-wf-track { height: 70px; }
    .tc-lines { font-size: 12px; }
    .tc-lines th, .tc-lines td { padding: 4px; }
    .tc-lines .nm small { font-size: 10.5px; }
    .tc-lines tr { break-inside: avoid; }
    .tc-lines tfoot { display: table-row-group; }
    .tc-lines tfoot .tot th, .tc-lines tfoot .tot td { font-size: 14px; padding-top: 8px; }
    .tc-port, .tc-grand, .tc-then { break-inside: avoid; }
    .tc-port { margin-top: 10px; }
    .tc-port-h { padding: 6px 12px; }
    .tc-port li, .tc-port-tot { padding: 5px 12px; }
    .tc-grand { margin-top: 8px; }
    .tc-grand > div { padding: 9px 12px; }
    .tc-grand b { font-size: 17px; }
    .tc-est { max-width: none; }
    .tc-est-head { margin-bottom: 8px; }
    .tc-est h1 { font-size: 24px; margin: 2px 0 4px; }
    .tc-genuine { font-size: 12px; }
    .tc-est-qr img { width: 84px; height: 84px; }
    .tc-est-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .tc-est-facts div { flex: 1 1 auto; padding: 5px 8px; }
    .tc-est-facts dt { font-size: 9.5px; white-space: nowrap; }
    .tc-est-facts dd { font-size: 12px; white-space: nowrap; }
}