:root {
  --bg: #fbfbfa;
  --panel: #ffffff;
  --ink: #16181c;
  --dim: #5b6068;
  --line: #e3e3df;
  --accent: #1f5c8b;
  --ok: #1b6b3a;
  --bad: #a32a24;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1b1e23;
    --ink: #e9eaec;
    --dim: #9aa1aa;
    --line: #2b2f36;
    --accent: #77b6e6;
    --ok: #63c08a;
    --bad: #ef8c86;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main, header.site, footer.site { max-width: 60rem; margin: 0 auto; padding: 0 1.1rem; }
header.site { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; padding-block: 1rem; border-bottom: 1px solid var(--line); }
header.site .brand { font-weight: 650; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
header.site .brand .accent { color: var(--accent); }
header.site nav { display: flex; gap: 1rem; flex-wrap: wrap; }
header.site nav a { color: var(--dim); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; letter-spacing: -0.02em; margin: 1.6rem 0 .6rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; margin: 0 0 .3rem; }
p { margin: 0 0 .8rem; }
a { color: var(--accent); }
abbr { text-decoration: none; border-bottom: 1px dotted var(--dim); }
.hero .meta, .dim { color: var(--dim); font-size: .92rem; }
code, pre, textarea, .rule, .ctx { font-family: var(--mono); }
code { font-size: .9em; background: color-mix(in srgb, var(--line) 55%, transparent); padding: .08em .35em; border-radius: .25em; }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .7rem .8rem; overflow: auto; }
pre code { background: none; padding: 0; }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; padding: 1.1rem 1.2rem; margin-top: 1.4rem; }
.hint { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--dim); font-size: .92rem; }
.drop { position: relative; }
.drop textarea {
  width: 100%; min-height: 15rem; resize: vertical;
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: .5rem; padding: .7rem .8rem;
}
.drop .dropmsg { position: absolute; inset: auto 0 45% 0; text-align: center; font-weight: 600; color: var(--accent); opacity: 0; pointer-events: none; }
.drop.over { outline: 2px dashed var(--accent); outline-offset: 4px; }
.drop.over .dropmsg { opacity: 1; }
.dropzone {
  border: 1px solid var(--line); border-radius: .5rem; background: var(--bg);
  padding: 1.2rem 1rem; text-align: center; min-height: 7rem; position: relative;
}
.dropzone p { margin: 0; }
.dropzone .dropmsg { position: absolute; inset: auto 0 45% 0; font-weight: 600; color: var(--accent); opacity: 0; }
.dropzone.over { outline: 2px dashed var(--accent); outline-offset: 4px; }
.dropzone.over .dropmsg { opacity: 1; }
table.summary th { width: 12rem; font-weight: 600; color: var(--dim); }
table.summary td { word-break: break-word; }
details[hidden] { display: none; }
details pre { max-height: 22rem; overflow: auto; font-size: 12px; }
.actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .8rem; }
button {
  font: inherit; font-size: .92rem; padding: .42rem .8rem; border-radius: .45rem;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: default; }
.ruleset { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--dim); flex-wrap: wrap; max-width: 100%; }
/* A select sizes itself to its longest option, which on a phone is wider than
   the screen; cap it so the option text is chosen by the control, not by the page. */
select { max-width: 100%; min-width: 0; }
select {
  font: inherit; font-size: .92rem; padding: .38rem .5rem; border-radius: .45rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
}
select:hover { border-color: var(--accent); }
#status { color: var(--dim); font-size: .9rem; }
.verdict { font-weight: 650; font-size: 1.05rem; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
table { width: 100%; border-collapse: collapse; margin: .6rem 0 .8rem; font-size: .92rem; }
caption { text-align: left; color: var(--dim); font-size: .9rem; padding-bottom: .35rem; }
th, td { text-align: left; padding: .42rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--dim); }
td.rule { white-space: nowrap; font-weight: 600; }
td.ctx { color: var(--dim); font-size: .82rem; word-break: break-all; }
.findings td:nth-child(2) { text-align: right; color: var(--dim); }
/* Amounts and rates read as columns, not as prose, wherever they are listed. */
table.lines td:nth-child(3), table.lines td:nth-child(4),
table.vat td:nth-child(2), table.vat td:nth-child(3), table.vat td:nth-child(4) { text-align: right; }
/* Content tables (profiles, code lists) carry columns a phone cannot fit, so
   * below a comfortable width each one scrolls inside itself instead of dragging
   * the whole page sideways. The generator's line table is exempt: it already
   * lives in a .tablewrap of its own. */
@media (max-width: 40rem) {
	main table:not(.form) { display: block; max-width: 100%; overflow-x: auto; }
}
ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
ul li { color: var(--dim); }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
details { border-bottom: 1px solid var(--line); padding: .35rem 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin-top: .5rem; color: var(--dim); }
footer.site { border-top: 1px solid var(--line); margin-top: 2.4rem; padding-block: 1.2rem; color: var(--dim); font-size: .88rem; }
report { display: block; }
/* The generator's form: three labelled groups, then a line table whose cells are
   inputs. Amount columns stay left-aligned here, unlike the read-out tables. */
.fields { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 1rem; }
.fields fieldset { border: 1px solid var(--line); border-radius: .5rem; padding: .7rem .8rem .2rem; margin: 0; }
.fields legend { color: var(--dim); font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.fields label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; font-size: .88rem; color: var(--dim); }
input[type=text], input[type=date], input[type=number] {
  font: inherit; font-size: .92rem; padding: .36rem .5rem; border-radius: .45rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A line table has six controls across and cannot shrink below readable,
   * so on a phone the table scrolls inside its own box instead of dragging
   * the whole page sideways. */
.tablewrap { overflow-x: auto; }
table.lines.form td { padding: .2rem .25rem; border-bottom: none; }
table.lines.form td:nth-child(3), table.lines.form td:nth-child(4) { text-align: left; }
table.lines.form input, table.lines.form select { width: 100%; min-width: 4.5rem; }
table.lines.form td:first-child input { min-width: 9rem; }
textarea {
  width: 100%; font-size: 12.5px; line-height: 1.45; resize: vertical;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .7rem;
}
a.btn {
  display: inline-block; font-size: .92rem; padding: .42rem .8rem; border-radius: .45rem;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
}
a.btn:hover { filter: brightness(1.08); }