/* ============================================================
   Klair Design System v1 — warm paper, Space Grotesk
   Loaded by every Klair tool. Tokens first, components after.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* surface & ink */
  --canvas:#F3EDE3; --paper:#FFFCF6; --sunk:#EAE2D5;
  --ink:#1A1814; --muted:#5C5346; --line:#DED5C6;
  /* accent & signal */
  --action:#1F5F4E; --action-dark:#17493C; --wash:#E2EBE5;
  --caution:#B4690E; --caution-wash:#FBF1E0;
  --error:#A33B2A; --error-wash:#FAEDEA;
  --focus:#1F5F4E;
  /* text that sits ON a filled surface, so it can flip with the theme */
  --on-action:#FFFFFF; --on-ink:#FFFFFF;
  /* the ink and hairline that belong with each signal wash */
  --caution-ink:#6E4A0C; --caution-line:#EBD9B8;
  --error-ink:#8A2E20;   --error-line:#F2C6C2;
  /* faint accent tints, used for highlighted cells and result panels */
  --tint:#1F5F4E12; --tint-strong:#1F5F4E1F;
  /* documents are print artefacts: white paper, dark ink, in every theme */
  --doc-paper:#FFFFFF; --doc-ink:#1A1814;
  /* legacy aliases so existing markup keeps working */
  --bg:var(--canvas); --card:var(--paper); --brand:var(--action);
  --brand-dark:var(--action-dark); --accent:var(--action);
  --green:var(--action); --purple:var(--action); --danger:var(--error);
  --radius:14px; --radius-sm:9px;
}


/* ============================================================
   Dark theme — same warm family, inverted. Only tokens change;
   no component rule below needs to know which theme is running.
   Follows the OS by default; data-theme lets a page pin either one.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#15140F; --paper:#1E1C15; --sunk:#292620;
    --ink:#F2EDE2; --muted:#B0A796; --line:#3A362B;
    --action:#5CC9A3; --action-dark:#7FDCBB; --wash:#1B322B;
    --on-action:#0C1A15; --on-ink:#15140F;
    --caution:#E0A046; --caution-wash:#2E2513; --caution-ink:#EFC07A; --caution-line:#4A3C1E;
    --error:#F08A74; --error-wash:#33201B; --error-ink:#F5A995; --error-line:#5A2E26;
    --focus:#7FDCBB;
    --tint:#5CC9A31A; --tint-strong:#5CC9A32E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#15140F; --paper:#1E1C15; --sunk:#292620;
  --ink:#F2EDE2; --muted:#B0A796; --line:#3A362B;
  --action:#5CC9A3; --action-dark:#7FDCBB; --wash:#1B322B;
  --on-action:#0C1A15; --on-ink:#15140F;
  --caution:#E0A046; --caution-wash:#2E2513; --caution-ink:#EFC07A; --caution-line:#4A3C1E;
  --error:#F08A74; --error-wash:#33201B; --error-ink:#F5A995; --error-line:#5A2E26;
  --focus:#7FDCBB;
  --tint:#5CC9A31A; --tint-strong:#5CC9A32E;
  color-scheme:dark;
}

/* ---------- accessibility utilities ---------- */
/* Visible to assistive tech, invisible on screen. Used for form labels that
   the visual design carries some other way (a placeholder, an adjacent button). */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link: off-screen until focused, then a normal-looking button top-left. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--action);color:var(--on-action);
  padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0;outline:3px solid var(--ink);outline-offset:2px}

/* Anything given focus programmatically (the skip-link target) should not draw
   a ring as if it were an interactive control. */
[tabindex="-1"]:focus{outline:none}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--canvas); color:var(--ink);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--action)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.18}

/* numerals: tabular everywhere figures matter */
input[type=number],table,.amt,.big,.net,.totals,.result,.price,
.inv-items,.pay,.split,.three,.slip,.receipt,.letter{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:12px}
.logo{font-weight:700;font-size:1.2rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo span{color:var(--action)}
nav{display:flex;align-items:center;gap:20px}
nav a{margin:0;text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500;white-space:nowrap}
nav a:hover{color:var(--ink)}
nav a.cta{color:var(--on-action);background:var(--action);padding:9px 16px;border-radius:var(--radius-sm);font-weight:600}
nav a.cta:hover{background:var(--action-dark);color:var(--on-action)}

/* ---------- type ---------- */
.hero{padding:56px 0 34px;text-align:center}
.hero h1{font-size:clamp(1.65rem,4.4vw,2.6rem);max-width:800px;margin:0 auto 14px;font-weight:700}
.hero p{color:var(--muted);font-size:1.06rem;max-width:640px;margin:0 auto 22px}
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.badge{background:var(--wash);color:var(--action-dark);font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px}
label{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin:12px 0 5px;
  text-transform:uppercase;letter-spacing:.06em}

/* ---------- controls ---------- */
input,select,textarea,button{font-family:inherit;font-size:.95rem}
input,select,textarea{
  width:100%;padding:10px 12px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--action);
}
.btn{display:inline-block;background:var(--action);color:var(--on-action);font-weight:600;
  padding:12px 24px;border:none;border-radius:var(--radius-sm);text-decoration:none;
  cursor:pointer;font-size:.98rem;transition:background .15s}
.btn:hover{background:var(--action-dark)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--paper);color:var(--action);border:1px solid var(--line)}
.addline{background:var(--wash);color:var(--action-dark);border:none;padding:9px 16px;
  border-radius:var(--radius-sm);font-weight:600;cursor:pointer;font-size:.88rem}

/* ---------- surfaces ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.hint,.note{font-size:.82rem}
.hint{color:var(--muted);margin-top:8px}
.note{background:var(--caution-wash);border:1px solid var(--caution-line);border-radius:var(--radius-sm);
  padding:12px 14px;color:var(--caution-ink);margin-top:14px}
.pro-card{background:var(--wash);border:1.5px solid var(--action);border-radius:var(--radius);padding:22px;margin-top:18px}
.ok{color:var(--action-dark);font-weight:600;font-size:.9rem;margin-top:8px}

/* results / figures */
.big,.result{background:var(--paper);border:1.5px solid var(--action);border-radius:var(--radius);
  padding:20px;text-align:center}
.big .amt,.result .amt{font-size:2.1rem;font-weight:700;color:var(--action-dark);letter-spacing:-.02em}
.big .lbl,.result .k{font-size:.72rem;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}

/* documents keep a crisp white sheet against the warm canvas */
/* A generated document is a print artefact before it is a screen element: it is
   handed to a landlord, an employer or a court. It stays white paper with dark
   ink in every theme. Re-declaring the tokens on the sheet itself means every
   descendant — tables, the .made footer, signal notes — follows automatically,
   with no per-element dark-mode exceptions anywhere. */
.invoice,.slip,.letter,.receipt,.notice,.poa,.poadoc,.shapath,.noc,.inv,.affidavit,.doc{
  --canvas:#FFFFFF; --paper:#FFFFFF; --sunk:#F5F2EC;
  --ink:#1A1814; --muted:#5C5346; --line:#DED5C6;
  --action:#1F5F4E; --action-dark:#17493C; --wash:#E2EBE5;
  --on-action:#FFFFFF; --on-ink:#FFFFFF;
  --caution:#B4690E; --caution-wash:#FBF1E0; --caution-ink:#6E4A0C; --caution-line:#EBD9B8;
  --error:#A33B2A; --error-wash:#FAEDEA; --error-ink:#8A2E20; --error-line:#F2C6C2;
  --tint:#1F5F4E12; --tint-strong:#1F5F4E1F;
  --brand:var(--action); --brand-dark:var(--action-dark); --accent:var(--action);
  --green:var(--action); --purple:var(--action); --danger:var(--error);
  color-scheme:light;
  background:var(--doc-paper); color:var(--doc-ink);
}
.invoice,.slip,.letter,.receipt,.affidavit,.poadoc,.doc{border:1px solid var(--line);border-radius:var(--radius)}

footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);
  font-size:.85rem;text-align:center;background:var(--paper)}
footer a{margin:0 6px}

/* ---------- layout safety ----------
   Grid/flex children default to min-width:auto, so one nowrap table or long
   string inflates the whole track past the viewport. Let them shrink. */
.grid>*,.row>*,.row3>*,.three>*,.emp>*,.tgrid>*,.ggrid>*,.pgrid>*,.fgrid>*{min-width:0}
img,svg,canvas{max-width:100%;height:auto}

/* ---------- mobile ---------- */
@media(max-width:820px){
  nav{gap:14px}
  nav a:not(.cta){display:none}
  /* Every tool page re-declares .hero in its own <style> block, which loads after
     this file and so wins at equal specificity — including on mobile, where the
     desktop padding then pushes the answer further down the page. One extra
     element in the selector takes the mobile value back without touching 100 files. */
  body .hero{padding:38px 0 26px}
  .wrap{padding:0 16px}
  .grid{grid-template-columns:1fr!important}
  .preview-shell{position:static!important}
  /* documents scroll rather than squash */
  .invoice,.slip,.letter{padding:18px!important;font-size:.8rem}
  .invoice table,.slip table,.letter table{display:block;overflow-x:auto;
    max-width:100%;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .invoice,.slip,.letter,.receipt{max-width:100%;overflow-x:hidden}
  .card{padding:18px}
}
@media(max-width:520px){
  .row,.row3,.three,.fgrid,.tgrid,.ggrid,.pgrid,.emp{grid-template-columns:1fr!important}
  .btn{width:100%;text-align:center}
  .actions{flex-direction:column}
  .inv-head,.inv-parties,.rfoot,.sigrow,.slipfoot{flex-direction:column;gap:10px}
  .inv-meta,.inv-parties .p{text-align:left!important;max-width:100%!important}
  .totals{width:100%!important}
  h1{font-size:1.5rem}
}
.klair-logo-mark{display:block;max-height:60px;max-width:220px;margin-bottom:10px;object-fit:contain}
/* never let a page scroll sideways on a phone */
body{overflow-x:hidden}

/* ---------- pricing region picker ----------
   Sits at the top of whichever price box it was inserted into (.pro-card,
   .pro-box, .pbox — see site/pricing.js). Small and quiet on purpose: this is
   orientation, not a decision the visitor is being steered toward. */
.klair-region-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.klair-region-pick label{margin:0;font-size:.7rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.klair-region-pick select{width:auto;padding:5px 8px;font-size:.82rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink)}
.klair-region-note{flex-basis:100%;font-size:.72rem;color:var(--muted);line-height:1.4}
.klair-px{font-variant-numeric:tabular-nums}

/* ---------- theme control ----------
   A <button>, not a nav link, so the mobile rule that hides nav links leaves it
   alone — the one nav item that must survive on a phone. */
.klair-theme-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 auto;
  background:none;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--muted);cursor:pointer;padding:0;font:inherit;
}
/* A 44×44 square control would out-weigh the primary CTA beside it in a 58px
   header, so the visible box stays 36px and this pseudo-element carries the
   touch target out to 44×44. It is part of the button's hit region, not a
   separate one. */
.klair-theme-btn::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;
}
.klair-theme-btn:hover{color:var(--ink);border-color:var(--muted)}
.klair-theme-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media print{.klair-theme-btn{display:none!important}}

/* ---------- sticky result (narrow screens) ----------
   Mirrors the headline figure to the bottom edge while the real result panel
   is scrolled out of view. Injected by sticky-result.js; hidden until it has
   something to say, and never printed. */
.klair-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  width:100%;border:none;border-top:1px solid var(--line);
  background:var(--paper);color:var(--ink);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  font:inherit;text-align:center;cursor:pointer;
  transform:translateY(101%);transition:transform .18s ease;
}
.klair-sticky.on{transform:translateY(0)}
.klair-sticky-k{font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.klair-sticky-v{font-size:1.15rem;font-weight:700;color:var(--action-dark);
  font-variant-numeric:tabular-nums}
.klair-sticky-spacer{height:0}
.klair-sticky-spacer.on{height:60px}
@media(min-width:941px){.klair-sticky,.klair-sticky-spacer{display:none}}
@media print{.klair-sticky,.klair-sticky-spacer{display:none!important}}

/* ---------- motion ----------
   Nothing essential is animated; these are hover polish only. Users who ask
   for less motion get none. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .tool:hover,.ti:hover{transform:none!important}
}

/* ---------- print: the document only ---------- */
@media print{
  /* Paper is paper. Even with the dark theme on screen, print is light. */
  :root{color-scheme:light}
  body{background:#fff;color:#1A1814}
  header.top,.hero,.card,.pro-card,.no-print,section.feat,section.faq,
  .pricing,.faq,footer,.actions,.badges{display:none!important}
  .app{padding:0}
  .grid{display:block}
  /* "No watermarks, ever" — the Klair line is hidden unless a firm brand is set */
  .made{display:none!important}
  .made.klair-branded{display:block!important;margin-top:6mm;padding-top:2mm;
    border-top:1px solid #ddd;text-align:center;font-size:8pt;color:#777}
  .klair-logo-mark{display:block!important;max-height:16mm;max-width:60mm;margin-bottom:4mm;object-fit:contain}
  .invoice,.slip,.letter,.receipt{border:none;border-radius:0}
  @page{margin:10mm}
}