/* theme.css: Komiti's look, "Paper + highlighter" (Peter chose it 3 Oct 2026,
 * after four design reviews: calm, exact, plain-spoken; distinct from Metis
 * and from the blue/violet payroll brands).
 *
 * Injected LAST into every page's <head> by functions/_middleware.js, like
 * topbar.css, so type, the logo and the shared pieces are set once and no
 * page can miss them. Page colours still come from each stylesheet's tokens,
 * which use the same values as below.
 *
 *   paper #F4F6F3 · card #FFFFFF · ink #13201A · ink-2 #3B4A42 · muted #52605A
 *   lines #D3DAD2 · borders #C9D1C8 · controls #6F7D75
 *   green #1F5C44 (actions) · hover #174634 · deep green #0F2E22 (footer, promise band)
 *   highlighter #D7F0B4: ONLY on the one word or figure that matters
 *   missed #A12A1C on #FBE6E2 · due #7A4E00 on #FBEFD6 (amber means "due", never decoration)
 */
:root{
  --k-paper:#F4F6F3; --k-card:#FFFFFF; --k-ink:#13201A; --k-ink-2:#3B4A42; --k-muted:#52605A;
  --k-line:#D3DAD2; --k-border:#C9D1C8; --k-control:#6F7D75;
  --k-green:#1F5C44; --k-green-hover:#174634; --k-deep:#0F2E22; --k-highlight:#D7F0B4;
  --k-missed:#A12A1C; --k-missed-bg:#FBE6E2; --k-due:#7A4E00; --k-due-bg:#FBEFD6;
  --k-font:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
}
body{font-family:var(--k-font)}
h1,h2,h3,h4{font-family:var(--k-font);letter-spacing:-0.02em}
h1{font-weight:800}
h2,h3,h4{font-weight:700}
input,select,textarea,button{font-family:inherit}

/* Logo: the K mark plus the name as real text, so it uses this typeface. */
.k-logo{display:inline-flex;align-items:center;gap:9px;color:var(--k-ink);text-decoration:none}
.k-logo svg{width:21px;height:25px;flex:none}
.k-logo-word{font-family:var(--k-font);font-weight:800;font-size:22px;letter-spacing:-0.02em;line-height:1;color:var(--k-ink)}

/* The highlighter: a bookkeeper marking the figure that matters. Sparingly. */
.k-hl{background:linear-gradient(transparent 56%, var(--k-highlight) 56%);padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k-hl-box{background:var(--k-highlight);border-radius:4px;padding:0 .3em}
/* Fixed-width digits only where figures stack in columns; a lone figure reads better proportional. */
.k-num{font-variant-numeric:lining-nums}
td .k-num, td.r, .k-tab{font-variant-numeric:tabular-nums lining-nums}

/* The logo replaced an image; keep the old breathing room beside the tagline. */
.topbar .k-logo{margin-right:14px}
a:has(> .k-logo), a:has(> .k-logo):hover{text-decoration:none}

/* A button that reads as a link (an action, not a page to go to). */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--k-green);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linklike:focus-visible{outline:2px solid var(--k-green);outline-offset:2px}