/* GRAFTUM — shared look for the free worker tools (pay check, check a firm, tax return, unpaid letter). 17 oct 2026 */
:root{ --navy:#304269; --navy2:#22304d; --red:#e63946; --ink:#1e293b; --mut:#64748b; --line:#e2e8f0; --bg:#f4f6fa; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; }
*{ box-sizing:border-box }
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent; line-height:1.45 }
a{ color:inherit }
.wrap{ max-width:40rem; margin:0 auto; padding:0 16px }
.wt-head{ background:linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; padding:16px 0 56px }
.wt-top{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.wt-top > a{ color:#fff; text-decoration:none; font-weight:800; display:flex; align-items:center; gap:8px; font-size:16px }
.wt-langs{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end }
.wt-langs button{ font:inherit; font-size:11px; font-weight:800; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:none; color:rgba(255,255,255,.7); cursor:pointer }
.wt-langs button.on{ background:#fff; color:var(--navy); border-color:#fff }
.wt-head h1{ font-size:27px; line-height:1.15; margin:22px 0 8px }
.wt-head p{ color:#c9d2e6; font-size:15px; margin:0 }
main.wrap{ margin-top:-36px; position:relative; padding-bottom:32px }
.card{ background:#fff; border-radius:20px; padding:18px; margin-bottom:14px; box-shadow:0 1px 2px rgba(27,37,64,.05), 0 14px 30px -20px rgba(27,37,64,.22) }
.card h2{ font-size:17px; margin:0 0 6px; color:var(--navy) }
.sub{ font-size:13px; color:var(--mut); margin:0 0 10px }
label.l{ display:block; font-size:12px; font-weight:700; color:var(--mut); margin:12px 0 5px }
.in{ width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 13px; font:inherit; font-size:16px; outline:none; background:#fff; color:var(--ink) }
.in:focus{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(48,66,105,.13) }
textarea.in{ resize:vertical; min-height:70px }
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:10px } .g3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
@media (max-width:420px){ .g3{ grid-template-columns:1fr 1fr } }
.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip{ font:inherit; border:1px solid #cbd5e1; background:#fff; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:700; color:#334155; cursor:pointer }
.chip[aria-pressed=true]{ background:var(--navy); border-color:var(--navy); color:#fff }
.btn{ display:block; width:100%; text-align:center; font:inherit; font-weight:800; font-size:16px; border:0; border-radius:14px; padding:14px; cursor:pointer; background:var(--navy); color:#fff; text-decoration:none; margin-top:14px }
.btn.red{ background:var(--red) } .btn.ghost{ background:#fff; color:var(--navy); border:1px solid var(--line) }
.btn:disabled{ opacity:.6 }
.res{ border-radius:16px; padding:14px; margin-top:12px; font-size:14px }
.res.ok{ background:#f0fdf4; border:1px solid #bbf7d0 } .res.warn{ background:#fffbeb; border:1px solid #fde68a } .res.bad{ background:#fef2f2; border:1px solid #fecaca }
.res b.big{ display:block; font-size:22px; margin-bottom:2px }
.res.ok b.big{ color:var(--ok) } .res.warn b.big{ color:var(--warn) } .res.bad b.big{ color:var(--bad) }
.kv{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #eef1f6; font-size:14px } .kv:first-child{ border-top:0 } .kv b{ white-space:nowrap }
.steps{ counter-reset:s; list-style:none; padding:0; margin:0 }
.steps li{ counter-increment:s; position:relative; padding:0 0 14px 38px; font-size:14px }
.steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center }
.steps li b{ display:block; font-size:15px; margin-bottom:2px }
.note{ font-size:12px; color:var(--mut); margin-top:8px }
.big-num{ font-size:34px; font-weight:800; color:var(--navy); line-height:1 }
.letter{ white-space:pre-wrap; font-family:Georgia,'Times New Roman',serif; font-size:14px; line-height:1.55; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:10px }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px }
.wt-more a{ display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid #eef1f6; font-size:14px; font-weight:600; text-decoration:none } .wt-more a:first-child{ border-top:0 } .wt-more a span:last-child{ color:#94a3b8 }
.wt-cta{ background:var(--navy); color:#fff } .wt-cta h2{ color:#fff } .wt-cta p{ color:#c9d2e6; font-size:14px; margin:0 }
.wt-cta a{ display:block; text-align:center; margin-top:12px; background:var(--red); color:#fff; font-weight:800; text-decoration:none; padding:13px; border-radius:14px }
.wt-foot{ text-align:center; font-size:12px; color:#94a3b8; margin:24px 0 } .wt-foot a{ color:#94a3b8 }
.hidden{ display:none !important }
:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px }
/* print sheet (invoice / letter) */
#wtSheet{ position:fixed; inset:0; z-index:50; background:#e5e7eb; overflow:auto; -webkit-overflow-scrolling:touch }
#wtSheet .bar{ position:sticky; top:0; display:flex; gap:8px; padding:10px 14px; padding-top:max(10px,env(safe-area-inset-top)); background:var(--navy); z-index:2 }
#wtSheet .bar button{ font:inherit; font-weight:800; font-size:14px; border:0; border-radius:10px; padding:9px 14px; background:#fff; color:var(--navy); cursor:pointer }
.paper{ background:#fff; max-width:760px; margin:16px auto; padding:36px 40px; color:#111827; font-size:13.5px; line-height:1.5; box-shadow:0 10px 30px -12px rgba(0,0,0,.3) }
.paper table{ width:100%; border-collapse:collapse; margin-top:14px } .paper th,.paper td{ text-align:left; padding:7px 6px; border-bottom:1px solid #e5e7eb; font-size:13px } .paper td.r,.paper th.r{ text-align:right }
.paper h3{ margin:0; font-size:24px } .paper .muted{ color:#6b7280; font-size:12px }
@media (max-width:560px){ .paper{ margin:0; padding:22px 18px; box-shadow:none } }
@media print{
  body > *:not(#wtSheet){ display:none !important }
  #wtSheet{ position:static; background:#fff; overflow:visible } #wtSheet .bar{ display:none !important }
  .paper{ margin:0; box-shadow:none; padding:0; max-width:none } @page{ margin:16mm }
}