/* MZO site: IMAGE TO TEXT tool ("INTEL DECODER"): scanner-grid hero with BO7 intel art + engine light, DECODER (drop
   bay, queue cards, merged export), FIELD NOTES. Accent: intel amber (--ix).
   Markup: public/tools/image-to-text.php, behaviour: site/js/ocr.js. */
body.page-ocr { --ix: #f2b83c; --ix-2: #ffe1a1; --ok-c: #5fd38a; --bad-c: #e0605a; overflow-x: clip; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- INTEL DECODER hero ---------- */
.dx { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--pm, 0rem)); padding: calc(6rem + var(--pm, 0rem)) var(--g) 2.5rem; min-height: calc(26rem + var(--pm, 0rem)); display: flex; flex-direction: column; justify-content: flex-end;
	background: radial-gradient(60% 80% at 80% 40%, rgba(242, 184, 60, .1), transparent 70%), linear-gradient(180deg, #07080a 0%, #0a0b0d 60%, var(--bg, #050608) 100%); }
.dx-grid { position: absolute; inset: 0; z-index: -2; background:
	linear-gradient(rgba(242, 184, 60, .06) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
	linear-gradient(90deg, rgba(242, 184, 60, .06) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%), linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); }
.dx-scan { position: absolute; left: 0; right: 0; top: 0; height: 6rem; background: linear-gradient(180deg, transparent, rgba(242, 184, 60, .1) 85%, rgba(242, 184, 60, .45) 100%); animation: scan 5.5s linear infinite; }
@keyframes scan { from { transform: translateY(-6rem); } to { transform: translateY(40rem); } }
.dx-props { position: absolute; z-index: -1; right: calc(var(--g) + 2rem); bottom: 1.5rem; width: min(42rem, 48vw); height: 22rem; pointer-events: none; }
.dx-bp { position: absolute; right: 9rem; top: 0; width: 17rem; transform: rotate(-6deg); filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .7)) brightness(.95); opacity: .9; }
.dx-usb { position: absolute; right: 0; bottom: 0; width: 19rem; transform: rotate(14deg); filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .8)); animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { to { transform: rotate(10deg) translateY(-0.75rem); } }
.dx-title { position: relative; max-width: 52rem; }
.dx-title > p:first-child { display: flex; align-items: center; gap: 0.625rem; margin: 0; font: 700 max(11px, 1.125rem) var(--head); letter-spacing: .22em; color: var(--ix); }
.dx-title > p:first-child img { width: 1.5rem; height: 1.5rem; }
.dx-title h1 { margin: 0.25rem 0 0; font: 900 clamp(max(11px, 3rem), 6.5vw, 6.75rem) / .9 var(--head); letter-spacing: .02em; text-shadow: 0 0 2.5rem rgba(242, 184, 60, .2); overflow-wrap: anywhere; }
.dx-lead { max-width: 42rem; margin: 1.125rem 0 0; font-size: max(14px, 1.25rem); line-height: 1.45; color: #e3e8ec; }
.dx-engine { display: inline-flex; align-items: center; gap: 0.625rem; margin: 1.25rem 0 0; padding: 0.4375rem 0.875rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .14em; color: #cfd6db; background: rgba(10, 11, 13, .9); border: 1px solid #2c2f35; }
.dx-engine i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: #777; }
.dx-engine[data-state="wait"] i { background: var(--ix); animation: blink 1s steps(2) infinite; }
.dx-engine[data-state="ok"] { border-color: rgba(95, 211, 138, .45); }
.dx-engine[data-state="ok"] i { background: var(--ok-c); box-shadow: 0 0 0.625rem var(--ok-c); }
.dx-engine[data-state="bad"] { border-color: rgba(224, 96, 90, .5); color: #f2b5b2; }
.dx-engine[data-state="bad"] i { background: var(--bad-c); }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- DECODER ---------- */
.page-ocr .section { scroll-margin-top: 4.5rem; }
.decoder { padding-top: 1.5rem; }
.dk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); gap: 1rem; align-items: start; }
.dk-main { min-width: 0; }
.dk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.dk-bar .hint { cursor: pointer; }
.dk-go { background: rgba(242, 184, 60, .16); border-color: rgba(242, 184, 60, .55); }
.dk-go:hover { background: rgba(242, 184, 60, .3); border-color: var(--ix); }
.ocr-busy .dk-go { opacity: .55; pointer-events: none; }
.dk-ghost { padding: 0.5rem 0.75rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .12em; color: #aeb8bf; background: transparent; border: 1px solid #2c3036; cursor: pointer; transition: color .2s, border-color .2s; }
.dk-ghost:hover, .dk-ghost:focus-visible { color: #fff; border-color: var(--ix); }
.dk-status { flex: 1 1 12rem; margin: 0; text-align: right; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .1em; color: var(--ix-2); overflow-wrap: anywhere; }

.bay { position: relative; min-height: 24rem; padding: 0.75rem; background: rgba(10, 11, 13, .85); border: 1px dashed rgba(242, 184, 60, .4); outline-offset: 3px; transition: border-color .2s, background .2s; }
.bay:not(.has-items) { display: grid; place-items: center; cursor: pointer; }
.bay.has-items { min-height: 0; }
.bay:not(.has-items):hover, .bay.is-over { border-color: var(--ix); background: rgba(242, 184, 60, .06); }
.bay.is-over { border-style: solid; box-shadow: inset 0 0 3rem rgba(242, 184, 60, .12); }
.bay::before, .bay::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border: 2px solid var(--ix); pointer-events: none; }
.bay::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.bay::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.bay-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; }
.bay-empty[hidden] { display: none; }
.bay-empty img { width: 8rem; height: 8rem; object-fit: contain; filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, .6)); transition: transform .3s var(--ease); }
.bay:hover .bay-empty img, .bay.is-over .bay-empty img { transform: translateY(-0.375rem) scale(1.05); }
.bay-empty b { margin-top: 0.5rem; font: 900 max(16px, 1.75rem) var(--head); letter-spacing: .06em; }
.bay-empty span { color: var(--muted); }
.bay-empty kbd, .bay-empty span kbd { padding: 0 0.375rem; font: 700 max(10px, 0.75rem) var(--mono-f, monospace); color: #fff; border: 1px solid #3a3f46; }

.q { display: grid; gap: 0.625rem; }
.qc { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.875rem; padding: 0.75rem; background: var(--panel); border: 1px solid var(--frame); border-left: 3px solid #3a3f46; }
.qc[data-st="run"] { border-left-color: var(--ix); }
.qc[data-st="ok"] { border-left-color: var(--ok-c); }
.qc[data-st="bad"] { border-left-color: var(--bad-c); }
.qc-img { position: relative; align-self: start; aspect-ratio: 4 / 3; background: #050607; border: 1px solid #22262b; overflow: hidden; }
.qc-img img { width: 100%; height: 100%; object-fit: contain; }
.qc-img span { position: absolute; left: 0.375rem; top: 0.375rem; padding: 0.0625rem 0.375rem; font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .1em; color: #1d1404; background: var(--ix); }
.qc-main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.qc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.qc-head div { display: flex; flex-direction: column; min-width: 0; }
.qc-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 max(12px, 1rem) var(--head); letter-spacing: .02em; }
.qc-head small { color: var(--muted); font-size: max(11px, 0.8125rem); }
.qc-head em { flex: none; padding: 0.125rem 0.5rem; font: 900 max(9px, 0.6875rem) var(--head); font-style: normal; letter-spacing: .14em; color: #aeb8bf; border: 1px solid #33373e; }
.qc[data-st="run"] .qc-head em { color: var(--ix); border-color: rgba(242, 184, 60, .5); animation: blink 1s steps(2) infinite; }
.qc[data-st="ok"] .qc-head em { color: var(--ok-c); border-color: rgba(95, 211, 138, .5); }
.qc[data-st="bad"] .qc-head em { color: var(--bad-c); border-color: rgba(224, 96, 90, .5); }
.qc-bar { height: 3px; background: #191c20; }
.qc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ix), var(--ix-2)); transition: width .4s var(--ease); }
.qc[data-st="ok"] .qc-bar i { background: var(--ok-c); }
.qc-err { margin: 0; font-size: max(11px, 0.875rem); color: #f2b5b2; }
.qc-text { width: 100%; min-height: 7.5rem; resize: vertical; padding: 0.5rem 0.625rem; font: 500 max(12px, 0.875rem) / 1.45 var(--mono-f, ui-monospace, Consolas, monospace); color: #e6eaed; background: #08090b; border: 1px solid #23272c; }
.qc-text:focus { outline: 0; border-color: var(--ix); }
.qc-act { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.qc-act button, .ex-act button { padding: 0.375rem 0.625rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .12em; color: #cfd6db; background: #121418; border: 1px solid #2e3238; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.qc-act button:hover, .qc-act button:focus-visible, .ex-act button:hover, .ex-act button:focus-visible { color: #fff; border-color: var(--ix); }
.qc-act button[data-act="run"] { color: #1d1404; background: var(--ix); border-color: var(--ix); }
.qc-act button[data-act="run"]:hover { background: var(--ix-2); }
.qc-act button[data-act="remove"] { margin-left: auto; }

.ex { position: sticky; top: 5rem; padding: 1rem 1rem 1.125rem; background: linear-gradient(180deg, rgba(20, 16, 8, .92), rgba(8, 8, 9, .95)); border: 1px solid rgba(242, 184, 60, .3); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .45); }
.ex::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--ix), rgba(242, 184, 60, 0)); }
.ex-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.75rem; font: 700 max(10px, 0.8125rem) var(--head); letter-spacing: .18em; }
.ex-h b { padding: 0.125rem 0.5rem; font-weight: 900; color: #1d1404; background: var(--ix); letter-spacing: .12em; }
.ex-n { margin: 0 0 0.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #2a2418; border: 1px solid #2a2418; }
.ex-n div { padding: 0.5rem 0.625rem; background: #0b0a09; min-width: 0; }
.ex-n dt { font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.ex-n dd { margin: 0.125rem 0 0; font: 900 max(14px, 1.5rem) var(--head); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ex textarea { width: 100%; height: 22rem; resize: vertical; padding: 0.625rem; font: 500 max(12px, 0.8125rem) / 1.45 var(--mono-f, ui-monospace, Consolas, monospace); color: #e6eaed; background: #070708; border: 1px solid #262218; }
.ex-act { display: flex; gap: 0.5rem; margin-top: 0.625rem; }
.ex-act button { flex: 1; padding: 0.625rem; }
.ex-act .ex-copy { color: #1d1404; background: var(--ix); border-color: var(--ix); }
.ex-act .ex-copy:hover { color: #1d1404; background: var(--ix-2); }

/* ---------- FIELD NOTES ---------- */
.sec-h { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.sec-k { flex-basis: 100%; display: block; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .2em; color: var(--ix); }
.sec-h h2 { font: 900 max(11px, 2.5rem) / 1 var(--head); letter-spacing: .03em; }
.fn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.fn li { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; background: var(--panel); border: 1px solid var(--frame); }
.fn em { font: 900 max(11px, 0.875rem) var(--head); font-style: normal; color: var(--ix); }
.fn b { font: 900 max(12px, 1.0625rem) var(--head); letter-spacing: .04em; }
.fn span { color: var(--muted); font-size: max(11px, 0.9375rem); }

/* ---------- sizes ---------- */
@media (max-width: 1500px) {
	.dx-props { width: min(34rem, 44vw); }
	.dx-bp { width: 14rem; right: 7rem; }
	.dx-usb { width: 15rem; }
}
@media (max-width: 1080px) {
	.dk { grid-template-columns: minmax(0, 1fr); }
	.ex { position: static; }
	.ex textarea { height: 14rem; }
	.fn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dx-props { opacity: .35; }
}
@media (max-width: 640px) {
	.dx { min-height: 0; padding-top: calc(5rem + var(--pm, 0rem)); }
	.dx-props { right: -4rem; bottom: auto; top: calc(var(--pm, 0rem) + 3rem); width: 18rem; height: 14rem; opacity: .25; }
	.dx-bp { width: 9rem; right: 6rem; }
	.dx-usb { width: 10rem; }
	.dk-status { text-align: left; flex-basis: 100%; }
	.bay { min-height: 18rem; }
	.qc { grid-template-columns: minmax(0, 1fr); }
	.qc-img { max-height: 12rem; aspect-ratio: auto; height: 10rem; }
	.fn { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.dx-scan, .dx-usb { animation: none; }
}