/* Guides and the calculators in them (DESIGN.md, mode Read): /de/zugferd, /de/xrechnung,
   /de/e-rechnung-pflicht-2027, /nl/factuur-in-het-engels, /nl/factuur-voorbeeld, /nl/urencriterium,
   /import/harvest, /harvest-pricing, /alternatives/harvest, /tools/billable-hours-calculator and the trust pages.
   One reading column on cream; tables are statements (an ink rule under the head, thin lines
   between rows); the tools sit on paper. Tokens and the h1, tables, FAQ and fields come from site.css. */

/* The calculator's radio choices used creator.css's unscoped .choice until Oct 23, 2026; kept. */
:where(body.site) .choice { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; font-weight: 400; margin: 0; cursor: pointer; }
:where(body.site) .choice input { width: auto; min-height: 0; margin-top: 4px; }

body.site .guide { max-width: 46rem; margin: 0 auto; font-size: 16.5px; line-height: 1.7; }
body.site .guide > p, body.site .guide > ul, body.site .guide > ol, body.site .guide section > p, body.site .guide section > ul { max-width: 68ch; }
body.site .guide h1, body.site .guide h2, body.site .guide h3, body.site .guide p, body.site .guide li,
body.site .guide th, body.site .guide td, body.site .guide dd, body.site .guide caption { overflow-wrap: break-word; hyphens: auto; }
body.site .guide > .lead { margin-bottom: 20px; font-size: clamp(1.08rem, 1.7vw, 1.22rem); }
body.site .guide > .note { margin: 0 0 8px; padding: 12px 0 0; border-top: 1px solid var(--line-2); }
body.site .guide > h2 { margin: 64px 0 14px; font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
body.site .guide > h1 + .lead + .note, body.site .guide > .byline + .note, body.site .guide > .guide-tool + .note { margin-top: 24px; }
/* The byline under the lead (GuidesHelper#guide_byline): author, then the dates of LocalizedSite::PAGE_DATES */
body.site .guide > .byline { color: var(--muted); font-size: 0.95rem; margin: 4px 0 0; }

/* The tool call-to-action under the lead */
body.site .guide-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 28px 0; }
body.site .guide-tool span { max-width: 36ch; color: var(--text-2); font-size: 15px; line-height: 1.45; }

/* ---------- The guide frame (layouts/guide) and the hubs (guide_hubs/show), from the Guide registry ----------
   docs-specs/reviews/guides_v2_critique.md. Nothing sits over the h1: the breadcrumbs and the reading time share
   one quiet line above it. */
body.site .guide-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
                        max-width: 46rem; margin: 0 auto 20px; }
body.site .guide-hub .guide-head { max-width: none; }
body.site .breadcrumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: var(--text-3); font-size: 14px; line-height: 1.5; }
body.site .breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line-2); }
body.site .breadcrumbs a { color: var(--text-2); font-weight: 600; text-decoration: none; }
body.site .breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
body.site .guide-time { margin: 0; color: var(--text-3); font-size: 14px; white-space: nowrap; }

/* The arrow on link cards and hub rows: ink, it steps right on hover */
body.site .guide-card .arrow, body.site .hub-entry .arrow { width: 20px; height: 20px; flex: none; color: var(--ink); transition: transform 0.2s var(--ease); }
body.site .guide-card:hover .arrow, body.site .hub-entry:hover .arrow { transform: translateX(3px); }
/* What a page is: calculator, template, comparison, free tool (Guide#kind); plain guides carry no tag */
body.site .guide-kind { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ground);
                        color: var(--text-2); font-size: 12px; font-weight: 700; line-height: 1; }

/* Link cards (related guides, the hub's free tools): paper, the title's link covers the card (DESIGN.md "Link cards") */
body.site .guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.site .guide-cards > li { display: flex; margin: 0; }
body.site .guide-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; padding: 22px 22px 18px;
                        border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
                        transition: border-color 0.15s ease-out, box-shadow 0.2s ease-out; }
body.site .guide-card:hover, body.site .guide-card:focus-within { border-color: var(--ink); box-shadow: var(--lift); }
body.site .guide-card .guide-card-title { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
body.site .guide-card-title a, body.site .hub-entry h3 a { color: var(--ink); text-decoration: none; }
body.site .guide-card-title a::after, body.site .hub-entry h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.site .guide-card-title a:focus-visible, body.site .hub-entry h3 a:focus-visible { outline: 0; }
body.site .guide-card:has(a:focus-visible), body.site .hub-entry:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
body.site .guide-card .guide-card-summary { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
body.site .guide-card-foot { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 6px; }
body.site .guide-card-foot .arrow { margin-left: auto; }

/* The product box after a how-to guide's first section (guides/_pitch): paper in the reading column, an ink button */
body.site .guide > .guide-pitch { max-width: none; margin: 48px 0 8px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
body.site .guide-pitch > p { max-width: none; }
body.site .guide-pitch .guide-pitch-title { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; }
body.site .guide-pitch .guide-pitch-text { margin: 6px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
body.site .guide-pitch .guide-pitch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 0; }
body.site .guide-pitch .guide-pitch-actions span { max-width: 44ch; color: var(--text-3); font-size: 14px; line-height: 1.45; }
body.site .button.ink { background: var(--ink); color: var(--paper); }
body.site .button.ink:hover { background: var(--ink-3); }

/* "Related guides" after the article, with the way to the rest of the topic */
body.site .guide-related { margin: 80px 0 0; padding-top: 24px; border-top: 1.5px solid var(--ink); }
body.site .guide-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 20px; }
body.site .guide-related-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
body.site .guide-topic-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink); font-size: 15px; font-weight: 700;
                              text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
body.site .guide-topic-link:hover { text-decoration-color: var(--ink); }
body.site .guide-topic-link .arrow { width: 18px; height: 18px; }

/* The close (guides/_close): ink band, the heading in the topic's words, the home page's two situations side by
   side, the waving kangaroo standing on the band's lower edge (wide screens only) */
body.site .guide-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px; margin: 64px 0 0;
                         padding: 56px 40px 0 56px; border-radius: 24px; background: var(--ink); color: var(--paper); overflow: hidden; }
body.site .guide-close ::selection { background: var(--ink-3); color: var(--paper); }
body.site .guide-close :focus-visible { outline-color: var(--yellow); }
body.site .guide-close-head { grid-column: 1; }
body.site .guide-close h2 { max-width: 20ch; margin: 0; color: var(--paper); font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-wrap: balance; hyphens: auto; }
body.site .guide-close-lead { max-width: 56ch; margin: 14px 0 0; color: var(--on-ink); font-size: 1.05rem; line-height: 1.6; }
body.site .guide-close-paths { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding-bottom: 56px; }
body.site .guide-close-path { display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: var(--ink-2); }
body.site .guide-close-path h3 { margin: 0; color: var(--paper); font-size: 1.2rem; font-weight: 800; }
body.site .guide-close-path > p { margin: 8px 0 0; color: var(--on-ink); line-height: 1.5; }
body.site .guide-close-path .actions { margin: auto 0 0; padding-top: 20px; }
body.site .guide-close-path .guide-close-line { margin: 10px 0 0; font-size: 14px; }
body.site .guide-close picture.mascot { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: end; }
body.site .guide-close-roo { display: block; width: 190px; height: auto; transform: scaleX(-1); }

/* The hub: intro, the free tools as link cards, the topic links, then each topic as a list of rows (a statement:
   an ink rule over each topic, thin lines between rows) */
body.site .guide-hub > .lead { max-width: 62ch; margin: 0; color: var(--text-2); font-size: clamp(1.08rem, 1.7vw, 1.22rem); }
body.site .hub-about { max-width: 62ch; margin: 12px 0 0; color: var(--text-3); font-size: 15px; }
body.site .hub-about a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
body.site .hub-tools { margin: 40px 0 0; }
body.site .hub-tools > h2 { margin: 0 0 16px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
body.site .hub-topics ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 56px 0 0; padding: 0; list-style: none; }
body.site .hub-topics a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
                          background: var(--paper); color: var(--ink); font-size: 14.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
body.site .hub-topics a:hover { border-color: var(--ink); }
body.site .hub-topic { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 48px; margin: 40px 0 0; padding-top: 18px;
                       border-top: 1.5px solid var(--ink); scroll-margin-top: 24px; }
body.site .hub-topic > h2 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
body.site .hub-list { margin: 0; padding: 0; list-style: none; }
body.site .hub-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
                       margin: 0; padding: 16px 4px 18px 0; border-radius: 10px; }
body.site .hub-entry + .hub-entry { border-top: 1px solid var(--line-2); }
body.site .hub-list > .hub-entry:first-child { padding-top: 2px; }
body.site .hub-entry > * { grid-column: 1; }
body.site .hub-entry h3 { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; }
body.site .hub-entry p { max-width: 62ch; margin: 4px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
body.site .hub-entry .guide-kind { justify-self: start; margin-top: 10px; }
body.site .hub-entry .arrow { grid-column: 2; grid-row: 1 / span 3; }
body.site .hub-entry:hover h3 a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

@media (max-width: 1080px) {
  body.site .guide-close { grid-template-columns: minmax(0, 1fr); padding: 40px 28px 0; }
  body.site .guide-close picture.mascot { grid-column: 1; grid-row: auto; justify-self: end; }
  body.site .guide-close-paths { padding-bottom: 0; }
  body.site .guide-close-roo { width: 150px; margin-top: -4px; }
}
@media (max-width: 760px) {
  body.site .guide-close { padding: 32px 20px; border-radius: 20px; }
  body.site .guide-close picture.mascot { display: none; }
  body.site .guide-close-paths { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  body.site .guide-close-path { padding: 20px; }
  body.site .guide-close-path .button { width: 100%; }
  body.site .hub-topic { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* The topic links: one row that scrolls sideways, so the first guides stay near the top on phones */
  body.site .hub-topics ul { flex-wrap: nowrap; margin: 40px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  body.site .hub-topics ul::-webkit-scrollbar { display: none; }
  body.site .hub-topics li { flex: none; }
}
@media (max-width: 560px) {
  /* The hub's free tools as compact rows on phones: their names say what they do */
  body.site .hub-tools .guide-card { flex-direction: row; align-items: center; padding: 16px 18px; border-radius: 14px; }
  body.site .hub-tools .guide-card-summary { display: none; }
  body.site .hub-tools .guide-cards { gap: 10px; }
  body.site .hub-tools .guide-card-foot { margin: 0 0 0 auto; padding: 0; }
  body.site .guide > .guide-pitch { padding: 20px; }
  body.site .guide-pitch .button { width: 100%; }
}

/* Tables: the reading column's width, scrolling on their own when they must */
body.site .guide .table-scroll { margin: 24px 0; }
body.site .guide :is(.timeline-table, .compare-table, .calc-table) { width: 100%; margin: 20px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
body.site .guide .table-scroll :is(.timeline-table, .compare-table) { min-width: 32rem; margin: 0; }
body.site .guide .timeline-table tbody th { width: 30%; }
body.site .table-source { margin-top: 6px; color: var(--text-3); font-size: 14px; }
body.site .glossary-table td:last-child { color: var(--text-2); font-size: 14.5px; }
body.site .compare-table thead th:last-child, body.site .compare-table tbody td:last-child { color: var(--ink); font-weight: 650; }
body.site .compare-table tbody th { width: 26%; }

/* Sources and the FAQ at the end of a guide */
body.site .guide .faq { margin-top: 72px; }
body.site .guide .faq > h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
body.site .guide .sources { margin-top: 56px; padding-top: 18px; border-top: 1.5px solid var(--ink); color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
body.site .guide .sources h2 { margin: 0 0 10px; font-size: 1.05rem; letter-spacing: 0; }
body.site .guide .sources li { margin: 6px 0; }
body.site .guide .sources a { font-weight: 600; }

/* ZUGFeRD: one file holding two parts. */
body.site .file-diagram { margin: 28px 0; }
body.site .file-diagram-file { padding: 18px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); }
body.site .file-diagram-name { margin: 0 0 14px; font-weight: 800; }
body.site .file-diagram-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 12px; }
body.site .file-diagram-part { margin: 0; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--field); color: var(--text-2); line-height: 1.45; }
body.site .file-diagram-part strong { display: block; margin-bottom: 2px; color: var(--ink); }
body.site .file-diagram-xml { background: var(--ink); color: var(--on-ink); }
body.site .file-diagram-xml strong { color: var(--paper); }
body.site .file-diagram figcaption { margin-top: 10px; color: var(--text); font-weight: 650; }

/* Real XML excerpts: the code box scrolls on its own, the page never does. */
body.site .xml-sample { margin: 24px 0; }
body.site .xml-sample pre { margin: 0; padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: var(--ink); color: var(--on-ink);
                            font: 500 13px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; tab-size: 2; }
body.site .xml-sample pre:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 3px; }
body.site .xml-sample figcaption { margin-top: 12px; color: var(--text-2); font-size: 15px; }
body.site .xml-callouts { display: grid; gap: 8px; margin: 0; }
body.site .xml-callouts div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 14px; padding-top: 8px; border-top: 1px solid var(--line-2); }
body.site .xml-callouts dt { margin: 0; overflow-wrap: anywhere; }
body.site .xml-callouts dt code { color: var(--ink); font-size: 13px; }
body.site .xml-callouts dd { margin: 0; color: var(--text); }

/* /nl/factuur-voorbeeld: a screenshot of the maker's own PDF (920 × 1016) with numbered markers over it.
   The markers sit in a box of the image's aspect ratio; left/top are the centres of the fields in the image,
   measured from the PDF's text positions (GuidesController::INVOICE_EXAMPLE_DATES, standaard example). */
body.site .invoice-example { margin: 24px 0 8px; }
body.site .invoice-shot { position: relative; aspect-ratio: 920 / 1016; max-width: 640px; background: var(--paper);
                          border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
                          box-shadow: 0 1px 2px rgb(20 26 46 / 0.08), 0 14px 30px -18px rgb(20 26 46 / 0.4); }
body.site .invoice-shot picture, body.site .invoice-shot img { display: block; width: 100%; height: 100%; }
body.site .invoice-marker { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center;
                            width: clamp(20px, 4.2vw, 26px); height: clamp(20px, 4.2vw, 26px); border-radius: 50%;
                            background: var(--ink); color: var(--paper); font-size: clamp(0.7rem, 1.9vw, 0.8rem); font-weight: 800;
                            line-height: 1; box-shadow: 0 0 0 2px var(--yellow); font-variant-numeric: tabular-nums; }
body.site .invoice-marker.m1 { left: 75.8%; top: 4%; }
body.site .invoice-marker.m2 { left: 27%; top: 23.7%; }
body.site .invoice-marker.m3 { left: 57.6%; top: 94.8%; }
body.site .invoice-marker.m4 { left: 30%; top: 96.5%; }
body.site .invoice-marker.m5 { left: 92.2%; top: 23.7%; }
body.site .invoice-marker.m6 { left: 53.3%; top: 20.9%; }
body.site .invoice-marker.m7 { left: 32.5%; top: 54.3%; }
body.site .invoice-marker.m8 { left: 53.3%; top: 26.5%; }
body.site .invoice-marker.m9 { left: 59.6%; top: 54.3%; }
body.site .invoice-marker.m10 { left: 80%; top: 54.3%; }
body.site .invoice-marker.m11 { left: 81.7%; top: 63.7%; }
body.site .invoice-marker.m12 { left: 67.8%; top: 80.2%; }
/* Phones: smaller markers, and 6, 8 and 9 move left of their field so they don't cover its label. */
@media (max-width: 480px) {
  body.site .invoice-marker { width: 16px; height: 16px; font-size: 0.6rem; box-shadow: 0 0 0 1.5px var(--yellow); }
  body.site .invoice-marker.m6, body.site .invoice-marker.m8, body.site .invoice-marker.m9 { transform: translate(-125%, -50%); }
}
body.site .invoice-stamp { position: absolute; left: 4%; top: 3%; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 6px;
                           color: var(--ink); font-size: clamp(0.65rem, 2vw, 0.85rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
                           background: rgb(255 255 255 / 0.92); }
body.site .invoice-example figcaption { margin-top: 10px; color: var(--text-2); font-size: 15px; }
/* Screenshots of the app (ScreenshotsHelper): cropped at 984 CSS px, shown at the column width (736 px or less). */
body.site .app-shot { margin: 28px 0 8px; }
body.site .app-shot img { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
                          box-shadow: 0 1px 2px rgb(20 26 46 / 0.08), 0 14px 30px -18px rgb(20 26 46 / 0.4); }
body.site .app-shot figcaption { margin-top: 10px; color: var(--text-2); font-size: 15px; }
body.site .field-list { padding-left: 28px; }
body.site .field-list li { margin: 0 0 12px; }
body.site .field-list li::marker { color: var(--ink); font-weight: 800; }

/* /import/harvest: the mapping table. */
body.site .import-map th[scope=row] { white-space: nowrap; }
body.site .import-map td:last-child { color: var(--ink); }

/* ---------- Calculators on paper (Harvest price comparison, billable hours, urencriterium) ---------- */
body.site .guide .calculator { margin: 28px 0; padding: 28px; }
body.site .guide .calculator > h2 { margin: 0 0 18px; font-size: 1.35rem; }
body.site .calculator .calc-inputs { display: grid; gap: 4px; max-width: 28rem; }
body.site .calculator .calc-inputs label { margin-top: 10px; }
body.site .calculator .calc-inputs label:first-child { margin-top: 0; }
body.site .calculator .calc-inputs fieldset { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 4px; padding: 0; border: 0; }
body.site .calculator .calc-inputs fieldset legend { width: 100%; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 700; color: var(--text); }
body.site .calculator .calc-inputs fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
body.site .calculator .calc-inputs p.hint { margin: 2px 0 0; }
body.site .calculator .calc-table { margin: 24px 0 16px; }
body.site .calc-table tr.ours th, body.site .calc-table tr.ours td { background: var(--field); color: var(--ink); font-weight: 800; }
body.site .calc-table tr.ours th { padding-left: 12px; border-radius: 10px 0 0 10px; }
body.site .calc-table [data-cell], body.site .calc-table td { font-variant-numeric: tabular-nums; }
body.site .calc-saving { margin: 0 0 12px; color: var(--ink); font-size: 1.05rem; font-weight: 750; }

/* The urencriterium counter */
body.site .hours-goal .hours-year { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; }
body.site .hours-goal .hours-year label { margin: 0; }
body.site .hours-goal .hours-year select { width: auto; min-width: 8rem; }
body.site .hours-goal .hours-total { margin: 0 0 8px; color: var(--text-2); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
body.site .hours-goal .hours-total strong { color: var(--ink); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
body.site .hours-goal progress { display: block; width: 100%; height: 10px; margin: 0 0 12px; border: 0; border-radius: 999px; background: var(--field); overflow: hidden; appearance: none; accent-color: var(--ink); }
body.site .hours-goal progress::-webkit-progress-bar { border-radius: 999px; background: var(--line); }
body.site .hours-goal progress::-webkit-progress-value { border-radius: 999px; background: var(--ink); }
body.site .hours-goal progress::-moz-progress-bar { border-radius: 999px; background: var(--ink); }
body.site .hours-goal .calc-inputs { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
body.site .hours-goal .calc-inputs p:last-child { margin: 12px 0 0; }
body.site .hours-goal .field-error { margin: 6px 0 0; color: var(--danger-ink); font-weight: 650; }
body.site .hours-goal p:has(> .button.secondary) { display: flex; flex-wrap: wrap; gap: 8px; }

/* /tools/billable-hours-calculator */
body.site .bh-calc { margin: 28px 0; }
body.site .bh-rows { display: grid; gap: 26px; }
body.site .bh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem) auto auto; gap: 4px 12px; align-items: end; }
body.site .bh-field { margin: 0; font-weight: 400; }
body.site .bh-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
body.site .bh-row + .bh-row .bh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.site .bh-time { position: relative; }
/* The parsed value sits under the field, in the gap between rows, so it never moves the row. */
body.site .bh-parsed { position: absolute; left: 0; top: 100%; margin-top: 3px; color: var(--text-3); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.site .bh-parsed.error { color: var(--danger-ink); }
body.site .bh-check { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
body.site .bh-remove { min-height: 48px; margin: 0; font-size: 14px; }
body.site .bh-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 0; }
body.site .bh-add[hidden] { display: none; }
body.site .bh-add .hint { margin: 0; }
body.site .bh-calc .bh-settings { display: block; margin: 24px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); }
body.site .bh-calc .bh-setting-grid input { width: 100%; }
body.site .bh-settings > legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-weight: 800; }
body.site .bh-settings > legend + * { clear: both; }
body.site .bh-setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 16px; }
body.site .bh-setting-grid .field-error { margin: 6px 0 0; color: var(--danger-ink); font-size: 13.5px; font-weight: 650; }
body.site .bh-choices { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; }
body.site .bh-choices fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 0; border: 0; }
body.site .bh-choices legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 700; }
body.site .bh-choices .choice { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
body.site .bh-results { min-height: 20rem; margin-top: 24px; padding-top: 20px; border-top: 1.5px solid var(--ink); }
body.site .bh-results dl { margin: 0; }
body.site .bh-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; }
body.site .bh-main div { padding: 14px 16px; border-radius: 12px; background: var(--field); }
body.site .bh-main dt { color: var(--text-2); font-size: 14px; font-weight: 600; }
body.site .bh-main dd { margin: 4px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body.site .bh-main .bh-amount { background: var(--ink); }
body.site .bh-main .bh-amount dt { color: var(--on-ink); }
body.site .bh-main .bh-amount dd { color: var(--paper); }
body.site .bh-more { display: grid; gap: 6px; margin-top: 16px; }
body.site .bh-more div { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
body.site .bh-more dt { color: var(--text-2); }
body.site .bh-more dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
body.site .bh-cta { margin: 16px 0 0; font-weight: 650; }
@media (max-width: 560px) {
  body.site .bh-row { grid-template-columns: minmax(0, 1fr) auto auto; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  body.site .bh-rows { gap: 14px; }
  body.site .bh-row .bh-desc { grid-column: 1 / -1; }
  body.site .bh-row + .bh-row .bh-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  body.site .bh-more div { grid-template-columns: minmax(0, 1fr); }
}

/* The minutes-to-tenths chart: two tables of 30 rows side by side where they fit. */
body.site .chart-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0 28px; }
body.site .guide .minutes-chart { margin: 8px 0; }
body.site .minutes-chart th, body.site .minutes-chart td { padding: 4px 8px; text-align: right; }
body.site .minutes-chart thead th { font-size: 13px; }
body.site .minutes-chart tbody tr:nth-child(6n) th, body.site .minutes-chart tbody tr:nth-child(6n) td { border-bottom: 1.5px solid var(--line-2); }

/* Phones: the comparison table (and any .stack-table, such as the developer pages' tables) becomes one
   block per row, the labels from its column heads (data-label on each cell). */
@media (max-width: 640px) {
  body.site .guide { font-size: 16px; }
  body.site .guide .calculator { padding: 20px 16px; }
  body.site .guide .table-scroll:has(:is(.compare-table, .stack-table)) { overflow: visible; }
  body.site .guide .table-scroll :is(.compare-table, .stack-table) { min-width: 0; }
  body.site :is(.compare-table, .stack-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.site :is(.compare-table, .stack-table), body.site :is(.compare-table, .stack-table) :is(tbody, tr, th, td) { display: block; width: auto; }
  body.site :is(.compare-table, .stack-table) tr { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  body.site :is(.compare-table, .stack-table) tr:first-child { border-top: 1.5px solid var(--ink); }
  body.site :is(.compare-table, .stack-table) tbody th { width: auto; padding: 0 0 6px; border: 0; font-size: 15.5px; }
  body.site :is(.compare-table, .stack-table) td { padding: 2px 0; border: 0; }
  body.site :is(.compare-table, .stack-table) td::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 12.5px; font-weight: 700; }
  body.site .guide .stack-table tbody th { width: auto; }
  body.site :is(.compare-table, .stack-table) caption { display: block; }
  body.site .xml-callouts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* "Print chart" prints the chart section alone (print_section_controller.js). */
@media print {
  .printing-section body * { visibility: hidden; }
  .printing-section .print-target, .printing-section .print-target * { visibility: visible; }
  .printing-section .print-target { position: absolute; left: 0; top: 0; width: 100%; }
  .printing-section .print-target button { display: none; }
  .printing-section .chart-tables { grid-template-columns: 1fr 1fr; }
}

/* Invoice template pages (InvoiceTemplatesController): one card per variant with the preview (a screenshot of
   our own invoice output, A4 794 × 1123 or US Letter 816 × 1056), the downloads and the maker button. */
.template-block { margin: 24px 0 8px; }
.template-block > h2 { margin-top: 8px; }
.template-versions { margin: 0 0 12px; color: var(--muted); }
.template-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 16px; }
.template-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; scroll-margin-top: 16px; }
.template-card h3 { margin: 0; font-size: 1.15rem; }
.template-subtitle { margin: 2px 0 12px; color: var(--muted); }
.template-preview { margin: 0 0 12px; }
.template-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.template-preview figcaption { margin-top: 6px; color: var(--muted); font-size: 0.9rem; }
.template-downloads { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.template-downloads a { font-weight: 600; }
.template-file-meta { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.template-use { margin: 0; }
.template-use .button { display: block; text-align: center; }
.template-note { color: var(--muted); max-width: 72ch; }
.check-list { padding-left: 20px; }
.check-list li { margin: 0 0 6px; }

/* /tools/invoice-maker: the country and VAT switch above the form (plain links, aria-current on the active one). */
.maker-profiles { margin: 8px 0 16px; }
.maker-profiles-label { font-weight: 600; margin: 0 0 6px; }
.maker-profiles ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.maker-profiles a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); text-decoration: none; font-weight: 600; }
.maker-profiles a[aria-current=page] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.maker-profiles a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* /tools/freelance-rate-calculator: inputs in a grid, results in a fixed-height panel (no layout shift while
   typing), the revenue split as an SVG bar (data-driven widths as SVG attributes, no inline styles). */
.rate-calc { margin: 24px 0; }
.rate-mode { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.rate-mode legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 4px; }
.rate-mode .choice { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.rate-mode input { width: auto; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 16px; }
.rate-field .hint { color: var(--muted); font-size: 0.85rem; margin: 4px 0 0; }
.rate-field .field-error, .rate-message { color: var(--danger); font-size: 0.9rem; font-weight: 600; margin: 4px 0 0; }
.rate-field input[aria-invalid=true] { border-color: var(--danger); }
/* body.site raises the specificity above "body.site .bh-more { display: grid }", which otherwise shows hidden blocks. */
body.site .rate-field[hidden], body.site .rate-results [hidden], body.site .rate-steps tr[hidden] { display: none; }
.rate-results { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; min-height: 34rem; }
.rate-sub { display: block; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.rate-bar { margin: 16px 0; }
.rate-bar figcaption { font-weight: 600; margin-bottom: 6px; }
.rate-bar svg { display: block; border-radius: 6px; background: var(--bg); }
.rate-bar-take-home { fill: #487541; background: #487541; }
.rate-bar-tax { fill: #475071; background: #475071; }
.rate-bar-costs { fill: #cbd0dd; background: #cbd0dd; }
.rate-legend { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-variant-numeric: tabular-nums; }
.rate-legend li { display: flex; align-items: center; gap: 6px; }
.rate-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.rate-check { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--bg); font-size: 0.95rem; }
.rate-steps caption { caption-side: top; text-align: left; color: var(--muted); font-size: 0.9rem; padding: 0 0 4px; }
.rate-steps td:last-child { text-align: right; white-space: nowrap; }

/* /nl/btw-verlegd-factuur: the verlegd example (794 × 1123, the stamp is in the image) with markers 2 to 5,
   placed just left of each field (measured on the image). */
.invoice-shot.verlegd-shot { aspect-ratio: 794 / 1123; }
.invoice-marker.v2 { left: 36.2%; top: 74.7%; }
.invoice-marker.v3 { left: 54.4%; top: 27.1%; }
.invoice-marker.v4 { left: 6.4%; top: 57.3%; }
.invoice-marker.v5 { left: 52.6%; top: 47.8%; }
.decision-list li { margin: 0 0 8px; }

/* Trust pages: /how-we-check-e-invoices (validators, versions, the test matrix) and the dated changelog. */
@media (min-width: 641px) { body.site .guide :is(.validator-table, .matrix-table) tbody th { width: 24%; } }
@media (max-width: 640px) { body.site .guide :is(.validator-table, .matrix-table) caption { display: block; text-align: left; } }
body.site .guide :is(.validator-table, .matrix-table) td { vertical-align: top; }
/* They use the compare-table layout (stacked label/value rows under 640 px) without its "ours" last column. */
body.site .guide :is(.validator-table, .matrix-table) thead th:last-child { color: var(--text-2); font-weight: 700; }
body.site .guide :is(.validator-table, .matrix-table) tbody td:last-child { color: inherit; font-weight: inherit; }
body.site .guide .last-check { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
body.site .changelog-day { margin-top: 56px; }
body.site .changelog-day > h2 { margin: 0; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.5rem);
                                font-variant-numeric: tabular-nums; }
body.site .guide .changelog-entries { max-width: none; list-style: none; padding: 0; margin: 0; }
body.site .changelog-entries li { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
body.site .changelog-entries h3 { margin: 0 0 4px; font-size: 1.1rem; }
body.site .changelog-entries p { margin: 0; max-width: 68ch; }
/* /de/verfahrensdokumentation: the template sits on paper like a document; what the user fills in sits in
   boxes on field with a dashed edge and a yellow pip ("yellow means do this"). /de/kanzlei-import: file
   names in the table wrap anywhere on phones. */
body.site .guide code { overflow-wrap: anywhere; }
body.site .procedure-legend { display: grid; gap: 10px; margin: 20px 0; }
body.site .procedure-legend-text { margin: 0; }
body.site .procedure-fill { margin: 14px 0 22px; padding: 14px 18px 12px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--field); }
body.site .procedure-legend .procedure-fill { margin: 0; }
body.site .procedure-fill-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
body.site .procedure-fill-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
body.site .procedure-fill > p:last-child { margin-bottom: 0; }
body.site .procedure-fill ul { margin: 0; padding-left: 20px; }
body.site .procedure-fill li { margin: 4px 0; }
body.site .procedure-fill .table-scroll { margin: 8px 0 0; }
body.site .guide .table-scroll .procedure-fill-table { width: 100%; min-width: 0; margin: 0; background: var(--paper); font-size: 15px; }
body.site .procedure-fill-table td { height: 40px; border: 1px solid var(--line); }
body.site .procedure-toc { margin: 28px 0 0; }
body.site .procedure-toc-title { margin: 0 0 6px; font-weight: 700; }
body.site .procedure-toc ol { margin: 0; padding-left: 22px; }
body.site .procedure-toc li { margin: 2px 0; }
body.site .procedure-doc { margin: 32px 0 0; padding: clamp(18px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
body.site .procedure-doc-title { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
body.site .procedure-doc h2 { margin: 44px 0 6px; padding-top: 16px; border-top: 1.5px solid var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.6rem); scroll-margin-top: 24px; }
body.site .procedure-doc h3 { margin: 28px 0 6px; font-size: 1.08rem; scroll-margin-top: 24px; }
body.site .procedure-doc :is(p, ul) { max-width: 66ch; }
/* The accounts table is three short columns: it fits a phone without scrolling. */
body.site .guide .table-scroll .accounts-table { min-width: 0; }
body.site .accounts-table td { font-variant-numeric: tabular-nums; }

/* /guides/net-30: the due date calculator (due_date_controller.js) and the invoice wording */
body.site .due-calc > h2 { margin: 0 0 18px; font-size: 1.35rem; }
body.site .due-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 12px 16px; }
body.site .due-inputs label { display: block; margin: 0 0 6px; font-weight: 700; }
body.site .due-inputs :is(input, select) { width: 100%; }
body.site .due-inputs .field-error { margin: 6px 0 0; color: var(--danger-ink); font-size: 13.5px; font-weight: 650; }
body.site .due-results { margin-top: 24px; padding-top: 20px; border-top: 1.5px solid var(--ink); }
body.site .due-results[hidden], body.site .due-main div[hidden] { display: none; }
body.site .due-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 12px; margin: 0; }
body.site .due-main div { padding: 14px 16px; border-radius: 12px; background: var(--field); }
body.site .due-main dt { color: var(--text-2); font-size: 14px; font-weight: 600; }
body.site .due-main dd { margin: 4px 0 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
body.site .due-main .due-highlight { background: var(--ink); }
body.site .due-main .due-highlight dt { color: var(--on-ink); }
body.site .due-main .due-highlight dd { color: var(--paper); }
body.site .due-days { margin: 12px 0 0; font-weight: 650; }
body.site .guide .wording li { margin: 6px 0; }

/* /guides/overdue-invoice-email: emails to copy (copy_controller.js) */
body.site .email-template { margin: 20px 0 28px; padding: 20px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); }
body.site .email-template > .hint { margin: 0 0 14px; }
/* Label and copy button on one row, the text below at full width (also at 390 px). */
body.site .email-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
body.site .email-part + .email-part { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
body.site .email-label { grid-row: 1; grid-column: 1; margin: 0; color: var(--text-2); font-size: 13.5px; font-weight: 700; }
body.site .email-part .copy-button { grid-row: 1; grid-column: 2; gap: 6px; }
body.site .email-part :is(.email-subject, .email-body) { grid-row: 2; grid-column: 1 / -1; }
body.site .email-subject { font-weight: 700; overflow-wrap: anywhere; }
body.site .email-body { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }
body.site .email-part .copy-button .icon { width: 16px; height: 16px; }

/* /de/verzugszinsen-berechnen: the default interest calculator (late_interest_controller.js) on the rate calculator's
   field grid, partial payments as rows, the per-period table (stacked on phones as a .stack-table) and the Mahnung
   text with its copy button. */
body.site .interest-calc .rate-grid { margin-bottom: 8px; }
body.site .interest-calc input[type=date] { min-height: 48px; }
body.site .interest-calc .rate-field label { display: block; }
body.site .interest-calc .rate-field input[aria-invalid=true] { border-color: var(--danger); }
body.site .interest-kind { margin: 18px 0 0; }
body.site .interest-payments { margin: 18px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
body.site .interest-payments legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-weight: 600; font-size: 0.9rem; }
body.site .interest-payments legend + * { clear: both; }
body.site .interest-payments .hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
body.site .interest-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 12px; align-items: end; margin: 0 0 12px; }
body.site .interest-row .field-error { grid-column: 1 / -1; color: var(--danger); font-size: 0.9rem; font-weight: 600; margin: 4px 0 0; }
body.site .interest-remove { min-height: 48px; margin: 0; font-size: 14px; }
body.site .interest-calc [hidden], body.site .interest-results [hidden] { display: none; }
body.site .interest-results { margin-top: 20px; padding-top: 20px; border-top: 1.5px solid var(--ink); }
body.site .interest-results dl { margin: 0; }
body.site .interest-periods caption, body.site .interest-rates caption, body.site .interest-example caption, body.site .interest-abroad caption {
  caption-side: top; text-align: left; color: var(--muted); font-size: 0.9rem; padding: 0 0 4px; }
body.site .interest-periods td, body.site .interest-rates td { white-space: nowrap; }
body.site .interest-letter { margin-top: 24px; }
body.site .interest-letter h3 { margin: 0 0 4px; font-size: 1.1rem; }
body.site .interest-letter .hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
body.site .interest-calc .interest-letter textarea { min-height: 24rem; font-size: 15px; line-height: 1.5; }
body.site .interest-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
body.site .interest-sample { margin: 16px 0 24px; }
body.site .interest-letter-text { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
                                  font-family: inherit; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
body.site .guide .formula { padding: 12px 16px; border-left: 3px solid var(--ink); background: var(--field); }
@media (max-width: 560px) {
  body.site .interest-row { grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  body.site .interest-periods td, body.site .interest-rates td { white-space: normal; }
}