/* ============================================================
   /tempo Tools — shared styling for the tool pages (/tools and each tool).
   Plain CSS (like site-nav.css), using the site's existing palette + font so
   the pages read as part of cmdtempo.dev, not an embedded widget.
   Calm and plain by design: NO urgency styling — no countdowns, red alert
   banners, or pulsing badges. The result card is the only prominent element.
   Mobile-first (base styles target ~375px; desktop is layered on at min-width).
   ============================================================ */

:root{
  --t-ink:#131b2e;          /* on-background */
  --t-ink-soft:#434655;     /* on-surface-variant */
  --t-muted:#737686;        /* outline */
  --t-bg:#faf8ff;           /* background / surface-bright */
  --t-primary:#004ac6;      /* primary */
  --t-primary-ink:#00174b;  /* on-primary-fixed */
  --t-line:#c3c6d7;         /* outline-variant */
  --t-surface:#ffffff;      /* surface-container-lowest */
  --t-surface-2:#eaedff;    /* surface-container — the subdued accent */
  --t-surface-3:#e2e7ff;    /* surface-container-high */
  --t-inverse:#283044;      /* inverse-surface (footer/credit) */
}

.tool-main{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--t-ink);
  max-width:760px;
  margin:0 auto;
  padding:32px 20px 8px;
}
.tool-main.wide{ max-width:900px; }

/* ── Breadcrumb / back-to-tools at the TOP of a tool page ──────────────── */
.tool-crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13.5px; margin:0 0 18px; color:var(--t-muted); }
.tool-crumbs a{ color:var(--t-primary); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.tool-crumbs a:hover{ text-decoration:underline; }
.tool-crumbs .sep{ color:var(--t-line); }
.tool-crumbs .current{ color:var(--t-ink-soft); font-weight:600; }
/* keep 'Does this affect you?' clear of the sticky nav when the quiz scrolls to it */
#gate-heading{ scroll-margin-top:84px; }

/* ── Hero / opener ─────────────────────────────────────────────────────── */
.tool-hero h1{
  font-size:clamp(28px,7vw,42px); font-weight:800; line-height:1.12;
  letter-spacing:-0.01em; margin:0 0 14px;
}
.tool-hero .lede{ font-size:clamp(16px,4.4vw,19px); line-height:1.55; color:var(--t-ink-soft); margin:0 0 12px; }
.tool-hero .microtrust{ font-size:13.5px; color:var(--t-muted); margin:0; }
/* "Available in <languages>" line under the H1 on translated pages */
.lang-avail{ font-size:13px; color:var(--t-muted); margin:2px 0 12px; }
.lang-avail a{ color:var(--t-primary); font-weight:600; text-decoration:none; }
.lang-avail a:hover{ text-decoration:underline; }
.lang-avail .cur{ color:var(--t-ink-soft); font-weight:700; }
.tool-intro{ font-size:16px; line-height:1.6; color:var(--t-ink-soft); }
.tool-intro a{ color:var(--t-primary); font-weight:600; }
.iras-out{ display:inline-flex; align-items:center; gap:6px; color:var(--t-primary); font-weight:700; text-decoration:none; }
.iras-out:hover{ text-decoration:underline; }

/* ── Entry gate (three self-identify buttons) ──────────────────────────── */
.entry-gate{ display:flex; flex-direction:column; gap:10px; margin:22px 0 8px; }
.entry-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--t-surface); color:var(--t-ink);
  border:1px solid var(--t-line); border-radius:14px;
  padding:16px 18px; font:600 16px/1.35 'Plus Jakarta Sans',sans-serif;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.entry-btn:hover{ border-color:var(--t-primary); background:var(--t-surface-2); }
.entry-btn:active{ transform:translateY(1px); }
.entry-btn .eb-sub{ display:block; font-weight:500; font-size:13.5px; color:var(--t-muted); margin-top:3px; }
.entry-btn .eb-arrow{ color:var(--t-primary); font-weight:800; flex:none; }

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.quiz{ margin:8px 0 4px; }
.q{ margin:0 0 26px; }
.q-title{ font-size:18px; font-weight:700; margin:0 0 4px; }
.q-help{ font-size:13.5px; line-height:1.5; color:var(--t-muted); margin:6px 0 12px; }
.q-help strong{ color:var(--t-ink-soft); font-weight:700; }
.opts{ display:flex; flex-direction:column; gap:8px; }
.opt{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--t-surface); border:1px solid var(--t-line); border-radius:12px;
  padding:14px 16px; font:600 15.5px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--t-ink);
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{ border-color:var(--t-primary); }
.opt .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--t-line); flex:none; transition:border-color .15s, box-shadow .15s; }
.opt.selected{ border-color:var(--t-primary); background:var(--t-surface-2); }
.opt.selected .dot{ border-color:var(--t-primary); box-shadow:inset 0 0 0 4px var(--t-primary); }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.quiz-back{ background:none; border:none; color:var(--t-muted); font:600 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer; padding:8px 4px; }
.quiz-back:hover{ color:var(--t-ink); }
.quiz-progress{ font-size:13px; color:var(--t-muted); }

/* ── Result card — the ONE prominent element; subdued accent from palette ─ */
.result-card{
  background:var(--t-surface-2);
  border:1px solid var(--t-line);
  border-left:5px solid var(--t-primary);
  border-radius:16px;
  padding:24px 22px;
  margin:8px 0 18px;
}
.result-kicker{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-primary); margin:0 0 8px; }
.result-date{ font-size:clamp(30px,9vw,46px); font-weight:800; line-height:1.05; color:var(--t-primary-ink); margin:0 0 6px; }
.result-lead{ font-size:16.5px; line-height:1.55; color:var(--t-ink); margin:8px 0 4px; }
.result-h{ font-size:15px; font-weight:800; margin:20px 0 8px; color:var(--t-ink); }
.result-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.result-list li{ position:relative; padding-left:22px; font-size:15px; line-height:1.5; color:var(--t-ink-soft); }
.result-list li::before{ content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--t-primary); }
.result-next{ margin-top:16px; padding:14px 16px; background:var(--t-surface); border:1px solid var(--t-line); border-radius:12px; font-size:15px; line-height:1.5; }
.result-next strong{ display:block; margin-bottom:3px; }
.result-early{ font-size:13.5px; color:var(--t-muted); margin-top:14px; line-height:1.5; }
/* override notice — required on every result card. Quiet, not alarmist. */
.override-notice{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:16px; padding:12px 14px;
  background:var(--t-surface); border:1px dashed var(--t-line); border-radius:10px;
  font-size:13.5px; line-height:1.5; color:var(--t-ink-soft);
}
.override-notice .oi{ color:var(--t-primary); font-weight:800; flex:none; }
/* "we can't determine this one" card — same calm container, no red */
.cannot-card{ background:var(--t-surface); border:1px solid var(--t-line); border-left:5px solid var(--t-muted); }
.cannot-card .result-kicker{ color:var(--t-ink-soft); }
.result-restart{ background:none; border:none; color:var(--t-primary); font:700 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer; padding:8px 0; margin-top:4px; }
.result-restart:hover{ text-decoration:underline; }

/* ── "What now?" prompt — quiet, plain text link, not a competing CTA ──── */
.what-now{ margin:2px 0 16px; padding:16px 2px 0; border-top:1px solid var(--t-line); }
.what-now h3{ font-size:15px; font-weight:800; margin:0 0 5px; }
.what-now p{ font-size:14px; line-height:1.5; color:var(--t-ink-soft); margin:0 0 8px; }
.what-now a{ color:var(--t-primary); font-weight:700; text-decoration:none; font-size:14.5px; }
.what-now a:hover{ text-decoration:underline; }

/* ── Email capture — below the result, NEVER gates it ──────────────────── */
.email-capture{ margin:0 0 26px; padding:20px 18px; background:var(--t-surface); border:1px solid var(--t-line); border-radius:14px; }
.email-capture h3{ font-size:16px; font-weight:800; margin:0 0 6px; }
.email-capture p{ font-size:14px; line-height:1.5; color:var(--t-ink-soft); margin:0 0 12px; }
.email-row{ display:flex; flex-direction:column; gap:8px; }
.email-row input{ font:500 16px 'Plus Jakarta Sans',sans-serif; padding:13px 14px; border:1px solid var(--t-line); border-radius:10px; background:var(--t-bg); color:var(--t-ink); }
.email-row input:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--t-primary); color:#fff; border:none; border-radius:100px;
  padding:13px 26px; font:700 15px 'Plus Jakarta Sans',sans-serif; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.btn-primary:hover{ transform:translateY(-1px); }
.email-fine{ font-size:12.5px; color:var(--t-muted); margin:10px 0 0; }

/* ── Explainer article (server-rendered; substantive for SEO) ──────────── */
.explainer{ margin:10px 0 8px; }
.explainer h2{ font-size:clamp(20px,5vw,26px); font-weight:800; line-height:1.2; margin:30px 0 10px; }
.explainer h3{ font-size:16px; font-weight:800; color:var(--t-ink); margin:18px 0 6px; }
.explainer p{ font-size:16px; line-height:1.65; color:var(--t-ink-soft); margin:0 0 14px; }
.explainer strong{ color:var(--t-ink); }
.explainer a{ color:var(--t-primary); font-weight:600; }
.phase-table{ width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:14.5px; }
.phase-table th, .phase-table td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--t-line); vertical-align:top; line-height:1.45; }
.phase-table th{ font-weight:800; color:var(--t-ink); background:var(--t-surface-2); }
.phase-table td:first-child{ font-weight:700; color:var(--t-ink); white-space:nowrap; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── /tempo credit — quiet, recedes ────────────────────────────────────── */
.tempo-credit{ margin:26px 0 8px; padding:20px 18px; background:var(--t-inverse); color:#eef0ff; border-radius:16px; }
.tempo-credit h3{ font-size:15px; font-weight:800; margin:0 0 8px; color:#fff; }
.tempo-credit p{ font-size:14px; line-height:1.6; color:rgba(238,240,255,.78); margin:0 0 10px; }
.tempo-credit a{ color:var(--t-bg); font-weight:700; text-decoration:none; }
.tempo-credit a:hover{ text-decoration:underline; }

/* ── Disclaimer + last-checked (small, very bottom) ────────────────────── */
.tool-foot{ margin:18px 0 40px; }
.disclaimer{ font-size:12.5px; line-height:1.6; color:var(--t-muted); margin:0 0 8px; }
.last-checked{ font-size:12.5px; color:var(--t-muted); font-weight:600; }

/* ── /tools index cards ────────────────────────────────────────────────── */
.tools-sections{ margin:22px 0 8px; }
.tools-section + .tools-section{ margin-top:30px; }
.tools-section-title{ font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--t-muted); margin:0 0 12px; }
.tools-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:22px 0 8px; }
.tools-section .tools-grid{ margin:0; }
.tool-card{
  position:relative; display:block; text-decoration:none; color:var(--t-ink);
  background:var(--t-surface); border:1px solid var(--t-line); border-radius:16px;
  padding:22px 20px; transition:border-color .15s ease, transform .1s ease, background .15s ease;
}
.tool-card:hover{ border-color:var(--t-primary); background:var(--t-surface-2); }
/* whole card clickable via the title link; a secondary inline link still works */
.card-title-link{ color:inherit; text-decoration:none; }
.card-title-link::after{ content:""; position:absolute; inset:0; border-radius:16px; }
.tool-card .inline-link{ position:relative; z-index:1; color:var(--t-primary); font-weight:700; text-decoration:none; }
.tool-card .inline-link:hover{ text-decoration:underline; }
.tool-card h3{ font-size:19px; font-weight:800; margin:0 0 8px; }
.tool-card p{ font-size:14.5px; line-height:1.55; color:var(--t-ink-soft); margin:0 0 12px; }
.tool-card .cta{ color:var(--t-primary); font-weight:700; font-size:14.5px; }
.tool-card.soon{ opacity:.72; cursor:default; }
.tool-card.soon:hover{ border-color:var(--t-line); background:var(--t-surface); }
.tool-card .soon-tag{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--t-muted); background:var(--t-surface-2); border-radius:100px; padding:3px 10px; margin-left:8px; vertical-align:middle; }
.back-to-tools{ display:inline-flex; align-items:center; gap:6px; color:var(--t-primary); font-weight:700; text-decoration:none; font-size:14.5px; margin:8px 0; }
.back-to-tools:hover{ text-decoration:underline; }
/* quiet inline "back to the tool" link at the end of a long tool page */
.tool-jump{ display:inline-block; color:var(--t-primary); font-weight:600; font-size:13.5px; text-decoration:none; margin:6px 0; }
.tool-jump:hover{ text-decoration:underline; }
#tool{ scroll-margin-top:84px; }

/* ── GST calculator ────────────────────────────────────────────────────── */
.gst-calc{ margin:6px 0 14px; }
.gst-toggle{ display:flex; gap:6px; background:var(--t-surface-2); border:1px solid var(--t-line); border-radius:12px; padding:5px; margin:0 0 16px; }
.gt-btn{ flex:1; cursor:pointer; border:none; background:transparent; color:var(--t-ink-soft); font:700 14px 'Plus Jakarta Sans',sans-serif; padding:11px 10px; border-radius:9px; transition:background .15s, color .15s; }
.gt-btn.active{ background:var(--t-surface); color:var(--t-primary); box-shadow:0 1px 3px rgba(19,27,46,.12); }
.gst-input-wrap{ display:block; margin:0 0 16px; }
.gil{ display:block; font-size:13.5px; font-weight:700; color:var(--t-ink-soft); margin:0 0 6px; }
#gst-amount{ width:100%; box-sizing:border-box; font:700 26px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:14px 16px; border:1px solid var(--t-line); border-radius:12px; background:var(--t-surface); }
#gst-amount:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
#gst-amount.invalid{ border-color:#c4442e; box-shadow:0 0 0 3px rgba(196,68,46,.12); }
.gst-out{ background:var(--t-surface-2); border:1px solid var(--t-line); border-left:5px solid var(--t-primary); border-radius:16px; padding:6px 18px; }
.go-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--t-line); }
.go-row:last-child{ border-bottom:none; }
.go-label{ font-size:15px; color:var(--t-ink-soft); }
.go-val{ font:700 18px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); white-space:nowrap; }
.go-row.total .go-label{ font-weight:800; color:var(--t-ink); }
.go-row.total .go-val{ font-size:24px; color:var(--t-primary-ink); }
.gst-copy-row{ display:flex; align-items:center; gap:12px; margin:14px 0 0; }
.btn-secondary{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:var(--t-surface); color:var(--t-primary); border:1px solid var(--t-line); border-radius:100px; padding:11px 22px; font:700 14px 'Plus Jakarta Sans',sans-serif; transition:border-color .15s, background .15s; }
.btn-secondary:hover{ border-color:var(--t-primary); background:var(--t-surface-2); }
.gst-copied{ font-size:13.5px; font-weight:700; color:var(--t-primary); }
.explainer-list{ margin:0 0 14px; padding-left:20px; }
.explainer-list li{ font-size:16px; line-height:1.6; color:var(--t-ink-soft); margin:0 0 5px; }
.req-list{ margin:0 0 16px; padding:0; list-style:none; }
.req-list li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:15.5px; line-height:1.5; color:var(--t-ink-soft); border-bottom:1px solid var(--t-line); }
.req-list li:last-child{ border-bottom:none; }
.req-n{ flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%; background:var(--t-surface-2); color:var(--t-primary); font-weight:800; font-size:12.5px; display:inline-flex; align-items:center; justify-content:center; }
.req-tag{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--t-muted); background:var(--t-surface-2); border-radius:100px; padding:2px 8px; }
/* language switcher (payslip tool) */
.lang-switch{ display:flex; gap:4px; flex-wrap:wrap; margin:0 0 16px; }
.lang-switch button{ cursor:pointer; border:1px solid var(--t-line); background:var(--t-surface); color:var(--t-ink-soft); font:700 13px 'Plus Jakarta Sans',sans-serif; padding:7px 12px; border-radius:100px; transition:border-color .15s, background .15s, color .15s; }
.lang-switch button:hover{ border-color:var(--t-primary); }
.lang-switch button.active{ background:var(--t-primary); border-color:var(--t-primary); color:#fff; }

/* compact "how saving works" steps */
.save-steps{ list-style:none; margin:6px 0 10px; padding:0; display:grid; gap:10px; }
.save-steps li{ display:flex; gap:12px; align-items:flex-start; background:var(--t-surface-2); border:1px solid var(--t-line); border-radius:12px; padding:12px 14px; }
.ss-n{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--t-primary); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.ss-t{ font-size:14.5px; line-height:1.4; color:var(--t-ink-soft); }
.ss-t strong{ display:block; color:var(--t-ink); font-weight:800; margin-bottom:1px; }
.save-note{ font-size:13px; color:var(--t-muted); margin:0 0 14px; }
@media (min-width:640px){ .save-steps{ grid-template-columns:repeat(3,1fr); } }

/* ── WhatsApp link + QR tool ───────────────────────────────────────────── */
.wa-tool{ margin:6px 0 14px; }
.wa-field{ display:block; margin:0 0 14px; }
.wa-label{ display:block; font-size:13.5px; font-weight:700; color:var(--t-ink-soft); margin:0 0 6px; }
.wa-optional{ font-weight:500; color:var(--t-muted); }
/* one visual field: [ +65 | number ] with a shared border + single focus ring */
.wa-phone{ display:flex; align-items:stretch; border:1px solid var(--t-line); border-radius:12px; background:var(--t-surface); overflow:hidden; }
.wa-phone:focus-within{ border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
.wa-phone input{ box-sizing:border-box; font:600 17px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:13px 14px; border:none; background:transparent; }
.wa-phone input:focus{ outline:none; }
.wa-code{ width:76px; flex:none; text-align:center; border-right:1px solid var(--t-line); }
.wa-num{ flex:1; min-width:0; }
.wa-msg{ box-sizing:border-box; width:100%; font:500 17px/1.5 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:13px 14px; border:1px solid var(--t-line); border-radius:12px; background:var(--t-surface); resize:vertical; }
.wa-msg:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
/* flat + muted until there's a valid number, then the accent styling comes in */
.wa-out{ background:var(--t-surface); border:1px solid var(--t-line); border-radius:16px; padding:16px; transition:background .2s ease, border-color .2s ease; }
.wa-out.is-active{ background:var(--t-surface-2); border-left:5px solid var(--t-primary); }
.wa-out.is-empty .wa-btn{ display:none; }
.wa-out.is-empty .wa-link{ color:var(--t-muted); }
.wa-linkrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px; }
.wa-link{ flex:1 1 100%; font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--t-ink); background:var(--t-surface); border:1px solid var(--t-line); border-radius:10px; padding:11px 12px; word-break:break-all; }
.wa-cols{ display:flex; flex-direction:column; gap:16px; }
.wa-qr-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.wa-qr{ width:200px; height:200px; background:#fff; border:1px solid var(--t-line); border-radius:12px; }
.wa-qr-empty{ width:200px; height:200px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 20px; color:var(--t-muted); font-size:13.5px; background:var(--t-surface); border:1px dashed var(--t-line); border-radius:12px; }
.wa-preview{ background:var(--t-surface); border:1px solid var(--t-line); border-radius:14px; padding:14px; align-self:stretch; }
.wap-head{ display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--t-line); }
.wap-avatar{ width:34px; height:34px; border-radius:50%; background:var(--t-surface-2); display:flex; align-items:center; justify-content:center; font-size:17px; }
.wap-name{ font-weight:700; font-size:14.5px; color:var(--t-ink); word-break:break-word; }
.wap-body{ padding:14px 2px 6px; }
.wap-bubble{ display:inline-block; max-width:100%; background:#d9fdd3; color:#111b21; border-radius:12px; border-top-left-radius:3px; padding:9px 12px; font-size:14.5px; line-height:1.45; word-break:break-word; white-space:pre-line; }
.wap-bubble.empty{ background:var(--t-surface-2); color:var(--t-muted); font-style:italic; }
.wap-note{ font-size:12.5px; color:var(--t-muted); margin:10px 0 0; }
.wa-privacy{ font-size:12.5px; color:var(--t-muted); margin:12px 2px 0; line-height:1.5; }

/* "Where to put your QR code" — clickable example cards. Generic chat bubbles in
   our own palette (deliberately NOT WhatsApp green / not their bubble shape). */
.wq-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:8px 0 18px; }
.wq-card{ display:flex; flex-direction:column; gap:11px; text-align:left; width:100%; box-sizing:border-box; font-family:inherit; background:var(--t-surface); border:1px solid var(--t-line); border-radius:16px; padding:16px; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.wq-card:hover{ border-color:var(--t-primary); box-shadow:0 6px 20px rgba(0,74,198,.10); transform:translateY(-2px); }
.wq-card:focus-visible{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.18); }
.wq-ctx{ font-size:13.5px; font-weight:800; color:var(--t-ink); }
.wq-chat{ background:var(--t-surface-2); border-radius:12px; padding:12px; }
.wq-head{ display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--t-line); margin-bottom:10px; }
.wq-avatar{ width:28px; height:28px; flex:none; border-radius:50%; background:var(--t-surface); display:flex; align-items:center; justify-content:center; font-size:14px; }
.wq-name{ font-weight:700; font-size:13px; color:var(--t-ink-soft); }
.wq-msgrow{ display:flex; justify-content:flex-end; }
.wq-msg{ display:inline-block; max-width:88%; background:var(--t-primary); color:#fff; border-radius:14px; border-bottom-right-radius:4px; padding:9px 12px; font-size:14px; line-height:1.45; word-break:break-word; white-space:pre-line; text-align:left; }
.wq-note{ font-size:12.5px; line-height:1.5; color:var(--t-muted); }
.wq-use{ font-size:13px; font-weight:700; color:var(--t-primary); margin-top:auto; }
.wq-card:hover .wq-use{ text-decoration:underline; }
/* Featured card (multi-line prefill demo) gets a touch more weight. */
.wq-featured{ border-color:var(--t-primary); box-shadow:0 4px 16px rgba(0,74,198,.08); }
.wq-try{ align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--t-primary); border-radius:999px; padding:3px 9px; }
@media(min-width:720px){ .wq-grid{ grid-template-columns:repeat(3,1fr); } }

/* Field highlight after an example card fills the prefill message. */
@keyframes waFlash{ 0%{ box-shadow:0 0 0 3px rgba(0,74,198,.35); border-color:var(--t-primary); } 100%{ box-shadow:0 0 0 3px rgba(0,74,198,0); border-color:var(--t-line); } }
.wa-msg.wa-flash{ animation:waFlash 1.1s ease-out; }

.btn-secondary:disabled{ opacity:.5; cursor:not-allowed; }

/* ── Itemised payslip generator ────────────────────────────────────────── */
.ps-tool{ margin:6px 0 14px; }
.ps-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.ps-form{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.ps-side{ min-width:0; display:flex; flex-direction:column; gap:14px; }

.ps-section{ border:1px solid var(--t-line); border-radius:14px; padding:16px; margin:0; }
.ps-section legend{ font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--t-primary); padding:0 6px; }
.ps-field{ display:block; margin:0 0 12px; }
.ps-field:last-child{ margin-bottom:0; }
.ps-lbl{ display:block; font-size:13px; font-weight:700; color:var(--t-ink-soft); margin:0 0 5px; }
.ps-req{ font-weight:600; color:#c4442e; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; margin-left:4px; }
.ps-optional{ font-weight:500; color:var(--t-muted); font-size:12px; }
.ps-in, .ps-sel{ box-sizing:border-box; width:100%; font:500 15px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:11px 12px; border:1px solid var(--t-line); border-radius:10px; background:var(--t-surface); }
.ps-in:focus, .ps-sel:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
.ps-amt{ text-align:right; font-variant-numeric:tabular-nums; }
.ps-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ps-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--t-ink-soft); margin-top:4px; cursor:pointer; }
.ps-check input{ width:16px; height:16px; accent-color:var(--t-primary); }
.ps-help{ font-size:13px; color:var(--t-muted); margin:0 0 10px; }

/* repeatable lines */
.ps-repeat{ margin-top:12px; }
.ps-repeat > .ps-lbl{ margin-bottom:8px; }
.ps-lines{ display:flex; flex-direction:column; gap:8px; }
.ps-line{ display:grid; grid-template-columns:1fr 118px 32px; gap:8px; align-items:center; }
.ps-line-del{ width:32px; height:32px; border:1px solid var(--t-line); background:var(--t-surface); border-radius:8px; color:var(--t-muted); font-size:18px; line-height:1; cursor:pointer; }
.ps-line-del:hover{ border-color:#c4442e; color:#c4442e; }
.ps-add{ margin-top:10px; background:none; border:1px dashed var(--t-line); color:var(--t-primary); font:700 13px 'Plus Jakarta Sans',sans-serif; padding:9px 14px; border-radius:100px; cursor:pointer; }
.ps-add:hover{ border-color:var(--t-primary); background:var(--t-surface-2); }
.ps-add.ghost{ color:var(--t-ink-soft); }
.ps-add-row{ display:flex; flex-wrap:wrap; gap:8px; }

/* collapsible overtime */
.ps-legend-toggle{ background:none; border:none; font:inherit; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.04em; }
.ps-chev{ transition:transform .2s ease; display:inline-block; }
.ps-collapsible.open .ps-chev{ transform:rotate(90deg); }

/* saved records */
.ps-saved{ background:var(--t-surface-2); border:1px solid var(--t-line); border-radius:14px; padding:14px; }
.ps-saved-row{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.ps-grow{ flex:1; margin:0; }
.ps-saved-note{ font-size:12px; line-height:1.5; color:var(--t-muted); margin:10px 0 0; }
.ps-linkbtn{ background:none; border:none; padding:0; color:var(--t-primary); font:700 12px 'Plus Jakarta Sans',sans-serif; cursor:pointer; text-decoration:underline; }

/* actions + validation */
.ps-actions{ background:var(--t-surface); border:1px solid var(--t-line); border-radius:14px; padding:14px; }
.ps-validation{ font-size:13.5px; line-height:1.5; color:var(--t-ink-soft); background:var(--t-surface-2); border:1px solid var(--t-line); border-radius:10px; padding:11px 13px; margin:0 0 12px; }
.ps-validation ul{ margin:6px 0 0; padding-left:18px; }
.ps-validation li{ margin:2px 0; color:#a23522; }
.ps-validation.ok{ border-color:#8fd6a6; background:#eefaf0; color:#1f7a3a; }
.ps-actions .btn-primary{ width:100%; }
.ps-actions .btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.ps-print-hint{ font-size:12px; color:var(--t-muted); margin:8px 0 0; text-align:center; }

/* payslip preview (also the printed document) */
.payslip-doc{ background:#fff; border:1px solid var(--t-line); border-radius:14px; padding:20px; font-size:14px; color:#131b2e; }
.pd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:2px solid #131b2e; padding-bottom:12px; margin-bottom:12px; }
.pd-employer{ font-size:17px; font-weight:800; }
.pd-sub-meta{ font-size:12px; color:var(--t-muted); margin-top:3px; }
.pd-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--t-primary); white-space:nowrap; }
.pd-meta{ display:flex; flex-direction:column; gap:4px; font-size:13px; margin-bottom:14px; }
.pd-k{ font-weight:700; color:var(--t-ink-soft); margin-right:6px; }
.pd-table{ width:100%; border-collapse:collapse; }
.pd-table td{ padding:7px 0; vertical-align:top; }
.pd-amt{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pd-main td{ font-weight:700; border-top:1px solid var(--t-line); }
.pd-sub td{ font-weight:400; color:var(--t-ink-soft); font-size:13px; padding:3px 0 3px 16px; }
.pd-total td{ font-weight:800; border-top:1px solid var(--t-line); }
.pd-net td{ font-weight:800; font-size:16px; border-top:2px solid #131b2e; border-bottom:2px solid #131b2e; color:var(--t-primary-ink); }
.pd-cpf{ font-size:12.5px; color:var(--t-ink-soft); margin-top:12px; padding-top:10px; border-top:1px dashed var(--t-line); }
.pd-foot{ font-size:11px; color:var(--t-muted); margin-top:14px; text-align:right; }

@media (min-width:900px){
  .ps-grid{ grid-template-columns:1.05fr 1fr; align-items:start; }
  .ps-side{ position:sticky; top:92px; }
}

/* print: only the payslip document prints */
@media print{
  .site-nav, footer, .tool-crumbs, .tool-hero, .ps-form, .ps-actions, .explainer, .tempo-credit, .tool-foot, .wa-privacy, .tool-jump, .back-to-tools, .q-preview-dock{ display:none !important; }
  body{ background:#fff !important; }
  .tool-main{ max-width:none; padding:0; }
  .payslip-doc{ border:none; border-radius:0; padding:0; font-size:12px; }
  .ps-side{ position:static; }
  @page{ margin:16mm; }
}

/* ── Feedback widget (an invitation, lighter than the cards) ────────────── */
.feedback{ margin:22px 0 8px; }
.fb-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; cursor:pointer; background:var(--t-surface); border:1px solid var(--t-line); border-radius:14px; padding:16px 18px; color:var(--t-ink); font:800 16px 'Plus Jakarta Sans',sans-serif; transition:border-color .15s ease; }
.fb-toggle:hover{ border-color:var(--t-primary); }
.fb-caret{ color:var(--t-primary); flex:none; transition:transform .2s ease; }
.fb-toggle[aria-expanded="true"]{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
.fb-toggle[aria-expanded="true"] .fb-caret{ transform:rotate(180deg); }
.fb-body{ background:var(--t-surface); border:1px solid var(--t-line); border-top:none; border-radius:0 0 14px 14px; padding:18px; }
.fb-h{ font-size:17px; font-weight:800; margin:0 0 6px; color:var(--t-ink); }
.fb-p{ font-size:14px; line-height:1.5; color:var(--t-ink-soft); margin:0 0 14px; }
.fb-field{ display:block; margin:0 0 12px; }
.fb-lbl{ display:block; font-size:13px; font-weight:700; color:var(--t-ink-soft); margin:0 0 5px; }
#fb-message, #fb-email{ box-sizing:border-box; width:100%; font:500 15px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:11px 12px; border:1px solid var(--t-line); border-radius:10px; background:var(--t-bg); }
#fb-message{ resize:vertical; line-height:1.5; }
#fb-message:focus, #fb-email:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
#fb-gotcha{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fb-err{ font-size:13.5px; color:#a23522; margin:0 0 10px; }
.fb-err a{ color:var(--t-primary); font-weight:700; }
.fb-thanks{ font-size:15px; font-weight:700; color:var(--t-primary); margin:0; }

/* hidden helper */
[hidden]{ display:none !important; }

/* ── Desktop niceties ──────────────────────────────────────────────────── */
@media (min-width:640px){
  .tool-main{ padding:48px 24px 8px; }
  .entry-gate{ gap:12px; }
  .email-row{ flex-direction:row; align-items:center; }
  .email-row input{ flex:1; }
  .tools-grid{ grid-template-columns:1fr 1fr; }
  .wa-cols{ flex-direction:row; align-items:flex-start; }
  .wa-qr-wrap{ flex:none; }
  .wa-preview{ flex:1; }
  .ps-saved-row{ flex-direction:row; align-items:flex-end; }
}

/* ════════════════ Quotation generator ════════════════ */
/* Mobile hint + sticky preview bar + full-screen preview overlay: only where the
   preview column collapses below the form (under 980px). Hidden on desktop, where
   the live preview is already beside the form. */
.q-preview-dock{ display:none; }
@media (max-width:979px){
  .tool-main{ padding-bottom:70px; }   /* room for the sticky bar */
  .q-preview-dock{ display:block; }
  /* the inline preview is replaced by the slide-up sheet on mobile (the sheet still
     reads from these elements, so they stay in the DOM, just hidden) */
  .q-preview-col{ display:none; }
  .ps-side{ display:none; }

  /* sticky bar (always visible): the toggle View button + a Download button */
  .q-preview-bar{ position:fixed; left:0; right:0; bottom:0; z-index:960; display:flex; align-items:center; gap:10px;
    box-sizing:border-box; background:var(--t-primary); color:#fff; padding:9px 14px; box-shadow:0 -4px 16px rgba(19,27,46,.16); }
  .q-preview-toggle{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:none; border:none; color:#fff;
    font:800 15px 'Plus Jakarta Sans',sans-serif; cursor:pointer; text-align:left; padding:6px 0; }
  .q-preview-bar-total{ margin-left:auto; font-weight:700; opacity:.95; white-space:nowrap; }
  .q-preview-bar-eye{ flex:none; font-weight:800; font-size:13px; background:rgba(255,255,255,.18); border-radius:100px; padding:4px 12px; }
  .q-preview-dl-bar{ flex:none; background:#fff; color:var(--t-primary); border:none; border-radius:100px; padding:9px 16px; font:800 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer; }

  /* bottom sheet: slides up from below the bar; the same View button retracts it */
  .q-preview-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:950; height:86vh; display:flex; flex-direction:column;
    background:var(--t-bg); border-radius:18px 18px 0 0; box-shadow:0 -12px 34px rgba(19,27,46,.28);
    transform:translateY(100%); transition:transform .36s cubic-bezier(.22,.61,.36,1); }
  .q-preview-dock.open .q-preview-sheet{ transform:translateY(0); }
  .q-preview-grip{ width:40px; height:4px; border-radius:2px; background:var(--t-line); margin:8px auto 2px; flex:none; }
  .q-preview-sheet-scroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px 16px 64px; }
  .q-preview-sheet-scroll .q-page{ max-width:680px; margin:0 auto; }
  .q-preview-sheet-scroll .ket-doc{ max-width:680px; margin:0 auto; }
}

.q-layout{ display:grid; grid-template-columns:1fr; gap:20px; margin:8px 0 18px; }
.q-form{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* sections */
.q-sec{ background:var(--t-surface); border:1px solid var(--t-line); border-radius:16px; overflow:hidden; }
.q-sec[open], details.q-sec{ }
.q-sec-h, .q-sec-h.static{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:14px 16px; font:800 15px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); background:var(--t-surface-2); border-bottom:1px solid var(--t-line); cursor:default; }
summary.q-sec-h{ cursor:pointer; list-style:none; }
summary.q-sec-h::-webkit-details-marker{ display:none; }
summary.q-sec-h::after{ content:'▾'; color:var(--t-primary); margin-left:auto; transition:transform .2s; }
details[open] > summary.q-sec-h::after{ transform:rotate(180deg); }
.q-sec-hint{ font-weight:500; font-size:12.5px; color:var(--t-muted); }
.q-sec-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }

/* fields */
.q-grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
.q-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.q-col2{ grid-column:1 / -1; }
.q-label{ font-size:13px; font-weight:700; color:var(--t-ink-soft); }
.q-opt{ font-weight:500; color:var(--t-muted); }
.q-field input[type=text], .q-field input[type=email], .q-field input[type=date], .q-field textarea, .q-field select,
.q-inline input, .q-inline select, .qi-qty, .qi-price, .qi-unit, .qi-desc, .q-valid-row input[type=date]{
  box-sizing:border-box; width:100%; font:500 15px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink);
  padding:10px 12px; border:1px solid var(--t-line); border-radius:10px; background:var(--t-surface); }
.q-field textarea{ resize:vertical; line-height:1.5; }
.q-field input:focus, .q-field textarea:focus, .q-field select:focus, .q-inline input:focus, .q-inline select:focus,
.qi-desc:focus, .qi-qty:focus, .qi-price:focus, .qi-unit:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
.q-checkline{ flex-direction:row; align-items:center; gap:9px; font-size:14px; color:var(--t-ink); }
.q-checkline input{ width:18px; height:18px; accent-color:var(--t-primary); flex:none; }
.q-inline{ display:flex; gap:8px; }
.q-inline input{ flex:1; } .q-inline select{ width:74px; flex:none; }
.q-picker{ font:600 13px 'Plus Jakarta Sans',sans-serif; color:var(--t-primary); padding:7px 10px; border:1px solid var(--t-line); border-radius:9px; background:var(--t-surface); max-width:60%; }

/* buttons / links */
.q-link-btn{ background:none; border:none; padding:0; font:700 13px 'Plus Jakarta Sans',sans-serif; color:var(--t-primary); cursor:pointer; align-self:flex-start; }
.q-link-btn:hover{ text-decoration:underline; }
.q-link-btn.danger{ color:#a23522; }
.q-fine{ font-size:12px; line-height:1.5; color:var(--t-muted); margin:0; }
.q-mini-label{ display:block; font-size:12px; font-weight:700; color:var(--t-ink-soft); margin-bottom:4px; }

/* logo */
.q-logo-row{ display:flex; flex-direction:column; gap:14px; }
.q-logo-preview{ width:100%; max-width:220px; min-height:80px; display:flex; align-items:center; justify-content:center; padding:10px; border:1px dashed var(--t-line); border-radius:12px; background:var(--t-bg); }
.q-logo-preview img{ max-width:100%; max-height:120px; }
.q-logo-empty{ color:var(--t-muted); font-size:13px; }
.q-logo-controls{ display:flex; flex-direction:column; gap:8px; }
.q-upload-btn{ align-self:flex-start; }
.q-logo-pos{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:2px; }
.q-radio{ font-size:13.5px; color:var(--t-ink-soft); display:inline-flex; align-items:center; gap:5px; }
.q-radio input{ accent-color:var(--t-primary); }

/* validity quick chips */
.q-valid-row{ display:flex; flex-direction:column; gap:8px; }
.q-quick{ display:flex; gap:8px; flex-wrap:wrap; }
.q-chip{ font:700 13px 'Plus Jakarta Sans',sans-serif; color:var(--t-primary); background:var(--t-surface); border:1px solid var(--t-line); border-radius:100px; padding:6px 14px; cursor:pointer; }
.q-chip:hover{ border-color:var(--t-primary); background:var(--t-surface-2); }

/* line items */
.q-items{ display:flex; flex-direction:column; gap:12px; }
.q-item{ display:flex; gap:8px; align-items:flex-start; border:1px solid var(--t-line); border-radius:12px; padding:12px; background:var(--t-bg); }
.q-item.dragging{ opacity:.5; }
.q-item.is-optional{ border-style:dashed; }
.q-drag{ flex:none; cursor:grab; background:none; border:none; color:var(--t-muted); font-size:16px; line-height:1; padding:4px 2px; touch-action:none; }
.q-drag:active{ cursor:grabbing; }
/* Reorder controls: drag handle for mouse; up/down arrows for touch (drag-and-drop does
   not work with touch, and tapping an arrow is easier on a phone anyway). */
.q-move{ display:none; }
.q-move button{ display:block; width:34px; height:26px; padding:0; background:var(--t-surface); border:1px solid var(--t-line); border-radius:8px; color:var(--t-ink-soft); font-size:14px; line-height:1; cursor:pointer; }
.q-move button:active{ background:var(--t-surface-2); }
@media (hover: none) and (pointer: coarse) {
  .q-drag{ display:none; }
  .q-move{ display:flex; flex:none; flex-direction:column; gap:4px; }
}
.q-item-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.qi-desc{ resize:none; overflow:hidden; }
.q-item-nums{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:end; }
.qi-nl{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:var(--t-muted); text-transform:uppercase; letter-spacing:.03em; }
.qi-total{ grid-column:1 / -1; text-align:right; font-weight:800; color:var(--t-ink); font-size:15px; }
.q-item-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.qi-opt{ font-size:12.5px; color:var(--t-ink-soft); display:inline-flex; align-items:center; gap:6px; }
.qi-opt input{ accent-color:var(--t-primary); }
.qi-foot-actions{ display:flex; gap:14px; }
.q-add{ align-self:flex-start; }

/* actions */
.q-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:4px; }
.q-actions .btn-primary{ cursor:pointer; }
.q-saved-note{ font-size:13px; font-weight:700; color:var(--t-primary); }

/* ── live preview (A4 mirror) ── */
.q-preview-col{ min-width:0; }
.q-preview-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px; font:800 14px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); }
.q-page{ background:#fff; border:1px solid var(--t-line); border-radius:8px; box-shadow:0 8px 30px rgba(19,27,46,.08); padding:22px; font-size:12px; color:#131b2e; overflow-x:auto; }
.q-page .r{ text-align:right; }
.qp-top{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.qp-top.rev{ flex-direction:row-reverse; }
.qp-logo{ max-width:150px; max-height:70px; display:block; margin-bottom:8px; }
.qp-bizname{ font-weight:800; font-size:15px; }
.qp-biz div{ line-height:1.5; color:#434655; }
.qp-meta{ text-align:right; min-width:150px; }
.qp-top.rev .qp-meta{ text-align:left; }
.qp-doctitle{ font-weight:800; font-size:20px; color:var(--t-primary); letter-spacing:.02em; margin-bottom:6px; }
.qp-metatable{ margin-left:auto; border-collapse:collapse; }
.qp-top.rev .qp-metatable{ margin-left:0; margin-right:auto; }
.qp-metatable td{ padding:1px 0 1px 12px; }
.qp-metatable td:first-child{ color:#737686; padding-left:0; padding-right:10px; }
.qp-to{ margin:18px 0 12px; }
.qp-tolabel{ font-size:10px; font-weight:800; letter-spacing:.05em; color:#737686; text-transform:uppercase; }
.qp-toname{ font-weight:800; font-size:14px; margin:2px 0; }
.qp-to div{ line-height:1.5; color:#434655; }
.qp-items{ width:100%; border-collapse:collapse; margin:8px 0; }
.qp-items th{ background:#283044; color:#fff; text-align:left; padding:7px 8px; font-size:11px; }
.qp-items th.r{ text-align:right; }
.qp-items td{ padding:7px 8px; border-bottom:1px solid #e2e7ff; vertical-align:top; }
.qp-empty{ color:#737686; text-align:center; font-style:italic; }
.qp-opthead td{ background:#f0f2ff; color:#737686; font-style:italic; font-size:11px; }
.qp-opt td{ color:#737686; }
.qp-totals{ display:flex; justify-content:flex-end; margin-top:10px; }
.qp-totals table{ border-collapse:collapse; min-width:220px; }
.qp-totals td{ padding:3px 0 3px 18px; text-align:right; }
.qp-totals td:first-child{ text-align:left; color:#434655; }
.qp-totals tr.grand td{ font-weight:800; font-size:14px; color:var(--t-primary); border-top:2px solid var(--t-primary); padding-top:6px; }
.qp-totals tr.muted td{ color:#737686; font-size:11px; }
.qp-gstnote{ text-align:right; font-size:11px; font-style:italic; color:#434655; margin:6px 0 0; }
.qp-pay{ margin-top:16px; border-top:1px solid #e2e7ff; padding-top:10px; }
.qp-pay-h{ font-size:10px; font-weight:800; letter-spacing:.05em; color:#737686; text-transform:uppercase; margin-bottom:3px; }
.qp-pay div{ line-height:1.5; color:#434655; }

/* payment sub-header inside the business section */
.q-sec-subh{ font-size:13px; font-weight:800; color:var(--t-ink); margin:6px 0 2px; padding-top:12px; border-top:1px solid var(--t-line); }

/* tax-invoice validation panel */
.inv-validation{ border-radius:12px; padding:12px 14px; margin:4px 0 0; font-size:13.5px; line-height:1.5; }
.inv-validation.warn{ background:#fff7ed; border:1px solid #f0d8a8; color:#8a5a12; }
.inv-validation.ok{ background:#e9f9f0; border:1px solid #b7e6ca; color:#1c6b40; font-weight:600; }
.inv-validation ul{ margin:6px 0 0; padding-left:18px; }
.inv-paid-wrap .q-label{ white-space:normal; }

/* converted-from-quote banner */
.inv-handoff{ background:var(--t-surface-2); border:1px solid var(--t-line); border-left:4px solid var(--t-primary); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.5; color:var(--t-ink); }
.inv-handoff strong{ color:var(--t-primary); }
.inv-handoff .q-link-btn{ margin-left:6px; }
.qp-terms{ margin-top:16px; border-top:1px solid #e2e7ff; padding-top:10px; }
.qp-terms p{ line-height:1.5; color:#434655; margin:0 0 6px; }
.qp-accept{ display:flex; gap:24px; margin-top:26px; }
.qp-accept > div{ flex:1; font-size:10px; color:#737686; }
.qp-sigline{ border-bottom:1px solid #9095a0; height:26px; margin-bottom:4px; }

/* ── saved-data manager ── */
.q-saved-mgr{ margin-top:6px; }
.q-saved-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.q-saved-card{ border:1px solid var(--t-line); border-radius:12px; padding:12px; background:var(--t-bg); }
.q-saved-card h4{ font-size:13px; font-weight:800; color:var(--t-ink); margin:0 0 8px; display:flex; gap:8px; align-items:center; }
.q-saved-card h4 span{ font-size:11px; font-weight:700; color:#fff; background:var(--t-primary); border-radius:100px; padding:1px 8px; }
.q-saved-list{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
.q-saved-item{ display:flex; flex-direction:column; gap:2px; padding:8px; border:1px solid var(--t-line); border-radius:9px; background:var(--t-surface); }
.qsi-main{ font-size:13px; font-weight:700; color:var(--t-ink); }
.qsi-sub{ font-size:11.5px; color:var(--t-muted); }
.qsi-actions{ display:flex; gap:12px; margin-top:3px; }

@media (min-width:980px){
  .q-layout{ grid-template-columns:1fr 1fr; align-items:start; }
  .q-preview-col{ position:sticky; top:88px; }
  .q-grid2{ grid-template-columns:1fr 1fr; }
  .q-saved-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ════════════════ KET generator ════════════════ */
.entry-gate-wrap{ margin:6px 0 18px; }
.need-panel{ margin-top:14px; background:var(--t-surface); border:1px solid var(--t-line); border-radius:14px; padding:16px; }
.need-h{ font-size:15px; font-weight:800; color:var(--t-ink); margin:0 0 8px; }
.need-body p{ font-size:14.5px; line-height:1.6; color:var(--t-ink-soft); margin:0 0 8px; }
.need-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:6px; }
[data-placeholder]{ background:#fff7ed; border-left:3px solid #d9a441; padding:2px 8px; border-radius:4px; }

.ket-sec{ margin:0 0 14px; }
.ket-help{ font-size:12px; line-height:1.45; color:var(--t-muted); margin-top:2px; }
.ket-na{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--t-muted); margin-top:4px; }
.ket-na input{ accent-color:var(--t-primary); }
.q-field input.is-na, .q-field textarea.is-na, .ket-rep-row .is-na{ opacity:.5; }
.ket-cross{ margin:2px 0 0; }
.ket-cross a, .q-cross a, .ps-cross a{ color:var(--t-primary); font-weight:700; font-size:13.5px; text-decoration:none; }
.ket-cross a:hover, .q-cross a:hover, .ps-cross a:hover{ text-decoration:underline; }
.q-cross{ margin:2px 0 0; }
.ps-cross{ margin:8px 0 0; }

/* progress */
.ket-progress{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ket-pstep{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--t-ink-soft); text-decoration:none; background:var(--t-surface); border:1px solid var(--t-line); border-radius:100px; padding:5px 12px 5px 6px; }
.ket-pdot{ width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:var(--t-surface-2); color:var(--t-ink-soft); }
.ket-pstep.done{ border-color:var(--t-primary); color:var(--t-primary); }
.ket-pstep.done .ket-pdot{ background:var(--t-primary); color:#fff; }

/* presets */
.ket-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.ket-presets-h{ font-size:13px; font-weight:700; color:var(--t-ink-soft); width:100%; }
.ket-preset{ font:700 13px 'Plus Jakarta Sans',sans-serif; color:var(--t-primary); background:var(--t-surface); border:1px solid var(--t-line); border-radius:100px; padding:7px 14px; cursor:pointer; }
.ket-preset:hover{ border-color:var(--t-primary); background:var(--t-surface-2); }
.ket-preset.active{ background:var(--t-primary); color:#fff; border-color:var(--t-primary); }

/* suggestions */
.ket-suggest{ display:inline; }
.ket-suggest-btn{ background:none; border:none; padding:0; color:var(--t-primary); font-weight:800; cursor:pointer; text-decoration:underline; font-size:12px; }

/* leave amount + unit */
.ket-amt{ display:flex; gap:8px; }
/* number takes the row; unit is a fixed narrow box. Specificity beats `.q-field select{width:100%}`. */
.ket-amt input{ flex:1 1 auto; width:auto; min-width:0; }
.ket-amt .ket-unit{ flex:0 0 86px; width:86px; }
.q-field .ket-amt input, .q-field .ket-unit{ box-sizing:border-box; font:500 15px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:10px 12px; border:1px solid var(--t-line); border-radius:10px; background:var(--t-surface); }

/* repeatable groups */
.ket-rep{ border:1px solid var(--t-line); border-radius:12px; padding:12px; background:var(--t-bg); margin:0 0 4px; }
.ket-rep-h{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; font-weight:800; color:var(--t-ink); margin:0 0 8px; }
.ket-rep-h .q-link-btn{ margin-left:auto; }
.ket-group-na{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--t-muted); }
.ket-group-na input{ accent-color:var(--t-primary); }
.ket-rep-row{ display:flex; gap:8px; align-items:center; margin:0 0 8px; }
.ket-rep-row input, .ket-rep-row select{ box-sizing:border-box; font:500 14px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); padding:9px 11px; border:1px solid var(--t-line); border-radius:10px; background:var(--t-surface); min-width:0; }
.ket-rep-row .rr-label{ flex:2; } .ket-rep-row .rr-detail{ flex:2; } .ket-rep-row .rr-amount{ flex:1; } .ket-rep-row .rr-unit{ flex:none; width:84px; }
.ket-rep-row input:focus, .ket-rep-row select:focus{ outline:none; border-color:var(--t-primary); box-shadow:0 0 0 3px rgba(0,74,198,.12); }
.ket-rep-row .rr-del{ flex:none; font-size:14px; }
.ket-rep-total{ text-align:right; font-weight:800; color:var(--t-ink); font-size:13.5px; }
.ket-rep.is-na, [id^="ket-"].is-na{ } /* group box dims its rows when N.A. */
#ket-allow.is-na .ket-rep-row, #ket-deduct.is-na .ket-rep-row, #ket-other.is-na .ket-rep-row, #ket-leave.is-na .ket-rep-row, #ket-medical.is-na .ket-rep-row{ opacity:.45; pointer-events:none; }

/* overtime collapsible */
.ket-ot{ border:1px solid var(--t-line); border-radius:12px; overflow:hidden; margin-top:6px; }
.ket-ot-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; background:var(--t-surface-2); border:none; padding:12px 14px; font:800 14px 'Plus Jakarta Sans',sans-serif; color:var(--t-ink); cursor:pointer; }
.ket-ot-caret{ color:var(--t-primary); transition:transform .2s; }
.ket-ot.open .ket-ot-caret{ transform:rotate(180deg); }
.ket-ot-body{ padding:14px; display:flex; flex-direction:column; gap:12px; }

/* review */
.ket-miss{ background:#fff7ed; border:1px solid #f0d8a8; border-radius:12px; padding:14px; margin:0 0 14px; }
.ket-miss-h{ font-weight:800; color:#8a5a12; margin:0 0 8px; font-size:14px; }
.ket-miss ul{ margin:0; padding-left:18px; }
.ket-miss a{ color:#8a5a12; font-weight:600; font-size:13.5px; }
.ket-ok{ background:#e9f9f0; border:1px solid #b7e6ca; border-radius:12px; padding:14px; margin:0 0 14px; font-weight:700; color:#1c6b40; font-size:14px; }
.ket-doc{ background:#fff; border:1px solid var(--t-line); border-radius:10px; padding:16px; }
.ket-rev-sec{ margin:0 0 14px; }
.ket-rev-sec h4{ font-size:13px; font-weight:800; color:var(--t-primary); margin:0 0 6px; }
.ket-rev-tbl{ width:100%; border-collapse:collapse; }
.ket-rev-tbl td{ padding:6px 8px; border-bottom:1px solid #eef0ff; font-size:13px; vertical-align:top; line-height:1.5; color:var(--t-ink); }
.ket-rev-tbl td:first-child{ width:40%; color:var(--t-ink-soft); font-weight:700; }
.ket-blank{ color:var(--t-muted); font-style:italic; }

@media (min-width:900px){
  .ket-sec .q-grid2{ grid-template-columns:1fr 1fr; }
}

/* ════════════════ Employment records register ════════════════ */
.er-privacy{ background:#fff7ed; border:1px solid #f0d8a8; border-radius:10px; padding:10px 12px; color:#8a5a12 !important; }
.er-privacy strong{ color:#7a4e10; }
.er-strip{ margin:6px 0 16px; }
.er-strip-lead{ font-size:14px; color:var(--t-ink-soft); margin:0 0 10px; }
.er-tiles{ display:grid; grid-template-columns:1fr; gap:12px; }
.er-tile{ background:var(--t-surface); border:1px solid var(--t-line); border-radius:14px; padding:14px 16px; }
.er-tile-h{ font-size:13px; font-weight:700; color:var(--t-ink-soft); }
.er-tile-count{ font-size:26px; font-weight:800; color:var(--t-primary); margin:2px 0 6px; }
.er-tile-count span{ font-size:14px; font-weight:600; color:var(--t-muted); }
.er-tile-link{ font-size:13px; font-weight:700; color:var(--t-primary); text-decoration:none; }
.er-tile-link:hover{ text-decoration:underline; }
.er-tile-link.muted{ color:var(--t-muted); font-weight:600; }
.er-table{ width:100%; border-collapse:collapse; }
.er-table th{ text-align:left; font-size:12px; font-weight:700; color:var(--t-muted); padding:6px 8px; border-bottom:1px solid var(--t-line); }
.er-table td{ padding:10px 8px; border-bottom:1px solid var(--t-line); font-size:14px; vertical-align:middle; cursor:pointer; }
.er-table .r{ text-align:right; }
.er-table tr:hover td{ background:var(--t-surface-2); }
.er-badge{ display:inline-block; font-size:12px; font-weight:800; border-radius:100px; padding:2px 10px; }
.er-badge.ok{ background:#e9f9f0; color:#1c6b40; }
.er-badge.part{ background:#fff7ed; color:#8a5a12; }
.er-leave-add{ border:1px solid var(--t-line); border-radius:12px; padding:12px; background:var(--t-bg); margin:8px 0; }
.er-leave-list{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.er-lv-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--t-line); border-radius:9px; background:var(--t-surface); font-size:13px; }
.er-lv-when{ font-weight:700; color:var(--t-ink); }
.er-lv-type{ color:var(--t-primary); font-weight:600; }
.er-lv-days{ color:var(--t-muted); }
.er-lv-note{ color:var(--t-ink-soft); flex:1; min-width:80px; }
.er-lv-row .q-link-btn{ flex:none; }
.er-leave-totals{ font-size:13px; color:var(--t-ink-soft); margin-top:6px; }
.er-tot-h{ font-weight:700; color:var(--t-ink); }
@media (min-width:760px){ .er-tiles{ grid-template-columns:repeat(3,1fr); } }