/*
 * einvoice-explainer.css - the own rules of the explained validation report ( Explainer ), the same in the three
 * validators, both Validation Explorers and their apps.
 *
 * ⚠️ THE LOOK COMES FROM THE DESIGN KIT, NOT FROM THIS FILE ( since 19.10.2026, finding B193 ). The report uses the
 * kit's blocks: .verdict with .verdict-main and .verdict-count, .meta-card, .panel with .panel-head and .panel-search,
 * .findings with .finding.static, .sev, .finding-bt-list, .doc-elem-val, table.tbl with the edges .edge-err and
 * .edge-warn, .tree-row with .tree-pos and .lvl-*, .badge.code, .note with .note-mark, .empty and .btn. Until then this
 * file was the stylesheet of the HTML prototype with its own copies of those blocks, and five copies of it had drifted
 * apart in the packages.
 *
 * ⚠️ THE ONE SOURCE IS libs/einvoice-report/assets/css/einvoice-explainer.css. _claude-tools/explainer-css-sync.php
 * copies it into the packages under their own names ( spko-, spmv-, sppv-explainer.css, spx-explainer.css ). A change in
 * a copy is lost at the next sync.
 *
 * ⚠️ THIS FILE IS LOADED BEFORE THE KIT. A rule here that sets a property the kit also sets on the same element needs a
 * second class in the selector ( .spx-root in front ), otherwise the later kit rule wins. Every rule names an own class;
 * a rule on a class of the kit would rebuild a block, and the kit gate stops the release build for it.
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-regular.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-500.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-600.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-700.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-italic.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/space-grotesk-v22-latin/space-grotesk-v22-latin-regular.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/space-grotesk-v22-latin/space-grotesk-v22-latin-500.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/space-grotesk-v22-latin/space-grotesk-v22-latin-600.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/space-grotesk-v22-latin/space-grotesk-v22-latin-700.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-regular.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-500.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-600.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-700.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-italic.woff2' ) format( 'woff2' ); }

/*
 * ⚠️ THE FONTS ARE SHIPPED, NOT LOADED FROM ELSEWHERE. wordpress.org forbids fonts from a third party, and a call to
 * fonts.googleapis.com would send the IP address of everybody who uploads an invoice to Google. The three families lie
 * as .woff2 under assets/fonts/ with their OFL licences. `font-display: swap` lets the report appear at once.
 *
 * ⚠️ THE @font-face RULES ONLY WORK IN THE DOCUMENT, NOT INSIDE A SHADOW ROOT. This file is therefore also linked in the
 * page itself; every other rule below is scoped to `.spx-root` or to an own class and reaches nothing of the theme.
 */

/* ============================================================================================
   1. The root of the report
   ============================================================================================ */

/*
 * ⚠️ NO GREY PAPER SURFACE UNDER THE REPORT. The report is a piece of content in someone else's page and stands on that
 * page's ground, like the viewer. The kit's surfaces carry the structure.
 *
 * ⚠️ `overflow-wrap: anywhere` FOR THE WHOLE REPORT. An XPath in Clark notation, a long identifier or a file name is one
 * run without spaces; measured on 10.09.2026 a single path stretched the report to 2905 px in a 898 px column. The value
 * breaks only where nothing else fits, and it lets a grid column become narrower than such a run.
 *
 * ⚠️ `--drop-max: none` sets the kit's own token for the width of the drop area: area and report stand equally wide.
 * Measured on 1.6.0 at 1280 px: area 960 px, verdict bar 1100 px.
 */
.spx-root { --drop-max: none; color: var( --text ); font-family: var( --font ); font-size: var( --fs ); line-height: var( --lh ); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
.spx-root, .spx-root * { box-sizing: border-box; }

/* ⚠️ `hidden` MUST WIN AGAINST THE KIT'S `display`: the status line is the kit's `.note` ( `display: flex` ) and is hidden
   while empty. The browser's own `[hidden]` rule is weaker than any author rule. */
.spx-root [ hidden ] { display: none !important; }

/* The status line under the drop area: the kit's .note.err for an error, muted text otherwise ( set by the uploader ). */
.spx-message, .spxm-message { margin: 10px 0 0; }

/* The same spacing between area and report as between the sections of the report. */
.spx-result:not( :empty ) { margin-top: var( --pad-lg ); }

/* ============================================================================================
   2. The sections of the report
   ============================================================================================ */

/* Verdict bars, the box of details, the check steps and the two panels stand one below the other. */
.spx-verdict { margin-bottom: 8px; }
.spx-section { margin-bottom: var( --pad-lg ); }
.spx-closing { margin-top: var( --pad-lg ); }

/*
 * The box of details: the last, long value stretches over the free columns of its row. Which class it gets is computed by
 * the renderer ( meta_span() ), because only the renderer knows in which column the value lands.
 *
 * ⚠️ BELOW 820 px THE KIT SETS TWO COLUMNS, AND A SPAN OF THREE WOULD THEN OPEN A THIRD. The spans take the whole row
 * there. Measured on 1.6.0 at 390 px: with four columns forced, four of seven details stood outside the card.
 */
.meta-span-2 { grid-column: span 2; }
.meta-span-3 { grid-column: span 3; }
.meta-span-4, .meta-span-row { grid-column: 1 / -1; }

@media ( max-width: 820px ) {
	.meta-span-2, .meta-span-3 { grid-column: 1 / -1; }
}

/* The numbers of the check steps in the colour of their severity, the zeros pale. Every cell carries its own class; a
   row rule would colour only the first column with a value. */
.spx-steps td.steps-n { font-variant-numeric: tabular-nums; }
.spx-steps td.n-err  { color: var( --err );  font-weight: 700; }
.spx-steps td.n-warn { color: var( --warn ); font-weight: 700; }
.spx-steps td.n-info { color: var( --info ); font-weight: 700; }
.spx-steps td.n-zero { color: var( --faint ); }

/* ============================================================================================
   3. Findings ( the kit's .findings, .finding.static, .sev, .finding-bt-list, .doc-elem-val )
   ============================================================================================ */

/* A message of the validator without an explanation is running text, not a heading. */
.finding-message { margin-bottom: 8px; font-size: var( --fs-sm ); line-height: 1.55; color: var( --text ); }

/* The validator's wording when it differs from the explanation, and the place in the document: small, below. */
.finding-said, .finding-original { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var( --border ); font-size: var( --fs-xs ); line-height: 1.5; color: var( --muted ); }
.finding-original { font-family: var( --mono ); color: var( --faint ); }
.finding-original-label { margin-bottom: 4px; font-family: var( --mono ); font-size: var( --fs-xs ); text-transform: uppercase; letter-spacing: .08em; color: var( --faint ); }

/* The affected fields of a finding: name and value in one row each. */
.finding-values { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.finding-value-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.finding-value-name { min-width: 190px; font-size: var( --fs-xs ); color: var( --faint ); }
.finding-value-name .finding-bt-inline { margin-right: 4px; }
.finding-value-jump { font-family: var( --mono ); font-size: var( --fs-xs ); color: var( --accent ); text-decoration: none; border-bottom: 1px solid var( --border ); }
.finding-value-jump:hover { border-bottom-color: var( --accent ); }
.finding-bt-inline + .finding-bt-value { margin-left: 4px; }

/* A group is not empty: the value box of a group in dotted lines. `.spx-root` in front for the weight, because the kit's
   `.doc-elem-val` is loaded after this file. */
.spx-root .is-group { background: transparent; border-style: dotted; color: var( --muted ); font-family: var( --font ); font-weight: 400; }

/* ============================================================================================
   4. The document ( the kit's .tree-row with .tree-pos, .lvl-*, .badge.code, .note )
   ============================================================================================ */

/* Search and the two switches in the kit's .panel-search. */
.spx-doc-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.spx-doc-tools .spx-doc-search { flex: 1 1 240px; width: auto; }
.doc-toggle { font-size: var( --fs-sm ); color: var( --muted ); }

/*
 * ⚠️ A FIXED FIRST COLUMN, NOT THE KIT'S `auto`. Every `.tree-row` is a grid of its own; with `auto` each row sizes the
 * position column to its own number, "1.2" narrower than "1.2.10", and the indented names stand at a different place in
 * every row. The kit has no variant for a long list of rows; reported as a gap. `.spx-root` in front for the weight.
 */
.spx-root .doc-row { grid-template-columns: 60px minmax( 0, 1fr ); }
.spx-root .doc-row.hidden-empty { display: none; }
.spx-root .doc-row.highlight-search { background: var( --mark ); }
.spx-root .spx-element { align-items: baseline; }

/* The note of a finding stands under the element, in the second column. */
.spx-row-note { grid-column: 2; margin-top: 6px; }

/* The switch "BT numbers" hides the marks of the rows. */
.hide-bt .doc-elem-bt { display: none; }

/* ============================================================================================
   5. The drop area: what the kit has no state for
   ============================================================================================ */

/*
 * ⚠️ THE RESTING STATE AFTER THE DROP. The uploader sets `settled` as soon as a file arrives. Without it the area stays
 * blue: in Edge, because :hover is re-evaluated only after a mouse movement, and after the file dialog, because the
 * click gave the area the focus. :focus-visible stays visible. The kit has no such state; reported as a gap.
 */
.drop.drop.settled:not( .drag ):not( .busy ):not( :focus-visible ),
.drop.drop:focus:not( :focus-visible ):not( :hover ):not( .drag ):not( .busy ) { border-color: var( --border-strong ); background: var( --surface-2 ); }

/*
 * A filled drop area. The Validation Explorer for Mustang has TWO areas, because a Mustang report does not carry the
 * checked invoice; one must see at a glance which of them is filled. The kit has no such state either; reported as a gap.
 */
.drop.drop.filled { border-style: solid; border-color: var( --ok ); }

/* The daily quota as a line of its own in the drop area; the element is the kit's `.badge`. */
.drop-quota:not( [ hidden ] ) { margin-top: 8px; }

/* ============================================================================================
   6. The button area above the report of the Validation Explorers
   ( the validators carry theirs in spko-, spmv- and sppv-validator.css, because the Lite view does not load this file )
   ============================================================================================ */

/* Right-aligned, without a frame, "Reset" alone in the lowest row. The buttons are the kit's `.btn`. The first button
   stands on the right and each further one to its left; a full row continues upwards. */
.spx-result-tools, .spxm-result-tools { display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; }
.spx-tools-reset, .spxm-tools-reset { display: flex; justify-content: flex-end; }

/* The visible notices of the rule sets ( VAMPIRE ): one note of the kit above the report, one sentence per line.
   ⚠️ The kit lays `.note` out as a row; two notices would stand side by side. */
.sppv-rule-notices { flex-direction: column; gap: 4px; margin-bottom: 16px; }