/* =========================================================================
   netex · engines/doc-reader.css · «Διαβάζει»: picker, A4 sample, mock ERP, checks, JSON
   Works on any field: the documents and the ERP form are paper objects.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.nx-reader { display: grid; gap: var(--s-6) var(--gutter); align-items: start; container-type: inline-size; }
@media (min-width: 1024px) {
	.nx-reader { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.nx-reader__pick { grid-column: 1 / span 3; }
	.nx-reader__viewer { grid-column: 4 / span 5; }
	.nx-reader__out { grid-column: 9 / -1; }
}

/* picker */
.nx-reader__pick { display: grid; gap: var(--s-4); }
.nx-reader__samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .nx-reader__samples { grid-template-columns: 1fr; } }
.nx-reader__sample {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-2);
	width: 100%;
	min-height: 44px;
	padding: var(--s-2);
	border: var(--bw) solid var(--rule);
	background: transparent;
	color: var(--fg);
	text-align: left;
	cursor: grab;
	transition: border-color var(--dur-ui) var(--ease-mech), background-color var(--dur-ui) var(--ease-mech);
}
@media (min-width: 1024px) { .nx-reader__sample { grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s-3); } .nx-reader__thumb { grid-row: 1 / span 2; } }
.nx-reader__sample[aria-pressed="true"] { border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }
@media (hover: hover) { .nx-reader__sample:hover { background: var(--bg-2); } }
.nx-reader__sample:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.nx-reader__thumb { position: relative; display: grid; align-content: start; gap: 4px; aspect-ratio: 1 / 1.414; width: 100%; max-width: 54px; padding: 7px 6px; background: var(--paper); box-shadow: 2px 2px 0 var(--paper-3); }
.nx-reader__thumb i { display: block; height: 2px; background: var(--paper-3); }
.nx-reader__thumb i:nth-child(1) { width: 60%; background: var(--steel-dark); }
.nx-reader__thumb i:nth-child(2) { width: 85%; }
.nx-reader__thumb i:nth-child(3) { width: 70%; }
.nx-reader__thumb i:nth-child(4) { width: 90%; margin-top: 4px; }
.nx-reader__thumb i:nth-child(5) { width: 40%; }
.nx-reader__thumb--note::after { content: ""; position: absolute; left: 8px; right: 14px; bottom: 9px; height: 2px; background: var(--indigo); transform: rotate(-4deg); }
.nx-reader__thumb--cert::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 8px; height: 12px; border: 1px solid var(--paper-3); }
.nx-reader__sname { font: var(--w-ui) .875rem/1.25 var(--f-sans); }
.nx-reader__stag { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-reader__drop {
	display: none;
	place-items: center;
	min-height: 64px;
	padding: var(--s-3);
	border: 1.5px dashed var(--fg-3);
	color: var(--fg-2);
	font: 500 .75rem/1.4 var(--f-mono);
	text-align: center;
}
.nx-reader.is-live .nx-reader__drop { display: grid; }
.nx-reader__drop.is-over, .nx-reader.is-dragging .nx-reader__drop { border-color: var(--sig); color: var(--sig); background: var(--hatch); }

/* viewer */
.nx-reader__viewer { display: grid; gap: var(--s-3); }
.nx-reader__docs { position: relative; }
.nx-reader__state { min-height: 1.5em; font: 500 .8125rem/1.4 var(--f-mono); color: var(--sig); }
.nx-reader__boxes { position: absolute; inset: 0; pointer-events: none; }
.nx-reader__box { position: absolute; border: 1.5px solid var(--cyan-deep); background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.nx-reader__box.is-low { border-color: var(--molten-deep); border-style: dashed; background: color-mix(in srgb, var(--molten) 6%, transparent); }
.nx-reader__box.is-fail { border: 2px solid var(--molten-deep); }
.nx-reader__scan { position: absolute; left: -6px; right: -6px; top: 0; height: 2px; background: var(--n-grad); opacity: 0; transform: translateY(var(--y, 0)); transition: transform 300ms steps(3, jump-end), opacity var(--dur-ui) var(--ease-mech); pointer-events: none; }
.nx-reader__scan.is-on { opacity: 1; }

/* the A4 sample document (Greek, as printed) */
.nx-doc { display: block; }
.nx-doc__page {
	position: relative;
	aspect-ratio: 1 / 1.3;
	padding: 6% 6.5%;
	overflow: hidden;
	background: var(--paper);
	color: var(--ink);
	box-shadow: 6px 6px 0 var(--paper-3);
	font: 400 clamp(.5625rem, 2.15cqi, .78rem)/1.45 var(--f-sans);
}
@container (min-width: 1024px) { .nx-doc__page { font-size: clamp(.5625rem, .84cqi, .78rem); } }
.nx-doc__top { display: flex; justify-content: space-between; gap: 1em; padding-bottom: 1em; border-bottom: 1.5px solid var(--ink); }
.nx-doc__title { display: grid; justify-items: end; text-align: right; font-weight: 700; font-size: 1.25em; }
.nx-doc__title small { font-weight: 400; font-size: .72em; }
.nx-doc__party { margin: 1.1em 0; }
.nx-doc__party > span:first-child { display: block; font-size: .8em; color: var(--steel-dark); text-transform: uppercase; letter-spacing: .06em; }
.nx-doc__table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: .95em; }
.nx-doc__table th { padding: .3em .4em; border-bottom: 1px solid var(--ink); font-weight: 600; text-align: left; font-size: .85em; }
.nx-doc__table td { padding: .35em .4em; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
.nx-doc__table td:not(:first-child), .nx-doc__table th:not(:first-child) { text-align: right; white-space: nowrap; }
.nx-doc__totals { display: grid; grid-template-columns: auto auto; justify-content: end; gap: .25em 1.4em; margin-top: .6em; text-align: right; }
.nx-doc__pay { position: relative; margin-top: 2em; padding-top: .8em; border-top: 1px solid var(--paper-3); }
.nx-doc__stamp {
	position: absolute;
	left: 34%;
	top: -.4em;
	padding: .5em .9em;
	border: 2px solid var(--indigo);
	border-radius: 999px;
	color: var(--indigo);
	font: 700 .78em/1.25 var(--f-mono);
	font-style: normal;
	text-align: center;
	letter-spacing: .08em;
	opacity: .78;
	transform: rotate(-4deg);
	mix-blend-mode: multiply;
}
.nx-doc__stamp small { font-size: .8em; }
.nx-doc__grid { display: grid; grid-template-columns: auto 1fr; gap: .25em 1em; margin: 1em 0; }
.nx-doc__grid dt { color: var(--steel-dark); }
.nx-doc__grid dd { margin: 0; }
.nx-doc__sign { display: grid; gap: .3em; margin-top: 1.4em; padding-top: .6em; border-top: 1px dashed var(--paper-3); }
.nx-doc__sign > span { font-size: .8em; color: var(--steel-dark); text-transform: uppercase; letter-spacing: .06em; }
.nx-doc__hand { font: italic 500 1.35em/1.3 var(--f-serif); color: var(--indigo); transform: rotate(-2deg); transform-origin: left; }
.nx-doc__foot {
	position: absolute;
	left: 6.5%;
	right: 6.5%;
	bottom: 3.5%;
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding-top: .6em;
	border-top: 1px solid var(--paper-3);
	font: 500 .78em/1.2 var(--f-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--steel-dark);
}
.nx-doc__page::after {
	content: attr(data-mark);
	position: absolute;
	left: 50%;
	top: 55%;
	margin: 0;
	transform: translate(-50%, -50%) rotate(-47deg);
	font: 800 2.6em/1 var(--f-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: color-mix(in srgb, var(--ink) 7%, transparent);
	pointer-events: none;
}

/* output: ERP form, checks, queue, results */
.nx-reader__out { display: grid; gap: var(--s-4); }
.nx-reader__erp { display: grid; gap: var(--s-3); }
.nx-reader__fields { display: grid; gap: 0; margin: 0; }
.nx-reader__fields:empty::before { content: "—"; color: var(--fg-3); font-family: var(--f-mono); }
.nx-reader__field { display: grid; gap: 2px; padding: var(--s-2) 0; border-top: var(--bw) solid var(--rule); }
.nx-reader__field dt { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-reader__field dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); margin: 0; font-size: .875rem; line-height: 1.35; }
.nx-reader__chip { padding: 1px 5px; border: var(--bw) solid var(--cyan-deep); color: var(--cyan-deep); font: 500 .625rem/1.3 var(--f-mono); white-space: nowrap; }
.nx-reader__field.is-low .nx-reader__chip, .nx-reader__field.is-fail .nx-reader__chip { border-color: var(--molten-deep); color: var(--molten-deep); }
.nx-reader__field.is-fail .nx-reader__val { color: var(--molten-deep); font-weight: 600; }
.nx-reader__checks, .nx-reader__checklist { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.45; }
.nx-reader__checks li, .nx-reader__checklist li { position: relative; padding-left: 1.4em; }
.nx-reader__checks li::before, .nx-reader__checklist li::before { position: absolute; left: 0; top: 0; font: 700 .875rem/1.4 var(--f-mono); }
.nx-reader__checks .is-ok::before, .nx-reader__checklist .is-ok::before { content: "✓"; color: var(--sig); }
:is(.nx-reader__checks, .nx-reader__checklist) :is(.is-fail, .is-warn)::before { content: "!"; color: var(--leak); }
.nx-reader__checklist .is-ok + .is-ok { margin-top: 0; }
/* live: the ΑΦΜ checks are already stamped into the ERP form; the result list keeps the other checks */
.nx-reader.is-live .nx-reader__checklist .is-vatchk { display: none; }
.nx-reader__queue { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--leak); background: var(--bg-2); }
.nx-reader__queue ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; font: 500 .8125rem/1.5 var(--f-mono); }
.nx-reader__explain { font-family: var(--f-serif); font-style: italic; font-size: 1rem; line-height: 1.5; }
.nx-reader__result { display: grid; gap: var(--s-4); }
.nx-reader__spec { width: 100%; border-collapse: collapse; font-size: .75rem; }
.nx-reader__spec :is(th, td) { padding: var(--s-1) var(--s-2) var(--s-1) 0; border-top: var(--bw) solid var(--rule); text-align: left; vertical-align: top; }
.nx-reader__spec thead th { font: 500 .5625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-reader__spec tbody th { font-weight: 500; }
.nx-reader__spec .is-tight td:last-child { color: var(--leak); font-weight: 600; }
.nx-reader__timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font: 500 .8125rem/1.3 var(--f-mono); }
.nx-reader__timer > span:first-child { color: var(--fg-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.nx-reader__timer b { color: var(--sig); font-size: 1.25rem; }
.nx-reader__json summary { cursor: pointer; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-reader__json pre { max-height: 300px; margin: var(--s-2) 0 0; padding: var(--s-3); overflow: auto; background: var(--ink); color: var(--paper); font: 400 .6875rem/1.45 var(--f-mono); }
.nx-reader__json.is-waiting { display: grid; gap: var(--s-1); padding: var(--s-3); border: 1.5px dashed var(--leak); color: var(--leak); font: 600 .8125rem/1.4 var(--f-mono); }
.nx-reader__note { margin-top: var(--s-2); font-size: .75rem; color: var(--fg-2); }
.nx-reader__wrong { padding-top: var(--s-2); }

/* no JS: the first sample's results and the text equivalent are simply visible */
html:not(.js) .nx-reader [data-reader-result="a"][hidden] { display: grid; }
html:not(.js) .nx-reader__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
html:not(.js) .nx-reader__wrong, html:not(.js) .nx-reader__erp { display: none; }

} /* end @layer pages */