/* sap-eta-integration.php (2026-09-26). The page's picture is built in HTML, one shape per
   section: a pipeline and the status list it produces, a crosswalk of fields, a two-source VAT
   ledger, a chart of weeks, two columns on one rule, and a receipt. Copper is the one accent;
   patina marks what is valid; status inks only where a status is meant. Motion is transform and
   opacity, 160-240ms, once on reveal; hover movement only on a real pointer. */

.eta-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 1. the pipeline ------------------------------------------------------------------ */
.eta-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.eta-pipe li { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 20px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.eta-pipe li:not(:last-child)::after { content: '\2192'; position: absolute; top: 50%; margin-top: -12px; line-height: 24px; inset-inline-end: -28px; width: 20px; text-align: center; font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); }
html[dir="rtl"] .eta-pipe li:not(:last-child)::after { content: '\2190'; }
.eta-pipe-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--copper-ink); }
.eta-pipe b { font-family: var(--font-display, inherit); font-size: 21px; line-height: 1.2; color: var(--text-strong); }
.eta-pipe p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.eta-pipe li.is-yours { border-style: dashed; border-color: var(--line-strong, var(--line)); background: transparent; }
.eta-pipe li small { margin-top: auto; padding-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--copper-ink); }
html[dir="rtl"] .eta-pipe li small { letter-spacing: 0; }

.eta-return { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text-2); }
.eta-return span { color: var(--patina-ink); font-size: 16px; }
html[dir="rtl"] .eta-return span { display: inline-block; transform: scaleX(-1); }

/* ---- the status list ------------------------------------------------------------------ */
.eta-log { margin: clamp(32px, 4vw, 48px) 0 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.eta-log-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.eta-log-top b { font-size: 14.5px; color: var(--text-strong); }
.eta-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.eta-legend i, .eta-st::before { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.eta-legend i { margin-inline-start: 8px; }
.eta-legend i:first-child { margin-inline-start: 0; }
.eta-legend .ok, .eta-st.ok::before { background: var(--patina-ink); }
.eta-legend .wait, .eta-st.wait::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.eta-legend .bad, .eta-st.bad::before { background: var(--danger-ink); }
.eta-log-rows { list-style: none; margin: 0; padding: 0; }
.eta-log-rows li { display: grid; grid-template-columns: 10ch minmax(0, 11ch) minmax(0, 12ch) minmax(0, 1fr); gap: 6px 18px; align-items: baseline; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; transition: background-color var(--dur-1) var(--ease-out); }
.eta-log-rows li:last-child { border-bottom: 0; }
.eta-log-rows code { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); background: none; padding: 0; word-break: normal; }
.eta-type { color: var(--text-2); }
.eta-st { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.eta-st::before { content: ''; }
.eta-st.ok { color: var(--patina-ink); }
.eta-st.wait { color: var(--text-2); }
.eta-st.bad { color: var(--danger-ink); }
.eta-note { color: var(--text-muted); font-size: 13.5px; }
.eta-note code { color: var(--text-muted); }
.eta-log-rows li.is-bad .eta-note { color: var(--text); }
.eta-log figcaption { padding: 11px 20px 13px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-muted); }

/* ---- 2. the crosswalk ----------------------------------------------------------------- */
.eta-map { margin: 0; max-width: 1040px; }
.eta-map > div { display: grid; grid-template-columns: minmax(0, 19rem) 28px minmax(0, 1fr); align-items: baseline; gap: 6px 16px; padding: 17px 0; border-top: 1px solid var(--line); }
.eta-map > div:last-child { border-bottom: 1px solid var(--line); }
.eta-map dt { font-size: 16.5px; font-weight: 600; color: var(--text-strong); }
.eta-map dd { grid-column: 3; margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 6px 14px; }
.eta-map dd code { justify-self: start; }
.eta-map > div::after { content: '\2192'; grid-row: 1; grid-column: 2; text-align: center; font-family: var(--font-mono); color: var(--text-muted); }
html[dir="rtl"] .eta-map > div::after { content: '\2190'; }
.eta-map code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--text-strong); background: var(--bg); border: 1px solid var(--line-strong, var(--line)); border-radius: 8px; padding: 3px 9px; word-break: normal; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.eta-map dd span { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* ---- 3. the VAT ledger ---------------------------------------------------------------- */
.eta-vat { margin: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 6px clamp(16px, 2.6vw, 28px) 10px; }
.eta-vat-tag { display: inline-block; margin: 14px 0 6px; padding: 3px 10px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.eta-vat table { display: table; width: 100%; overflow: visible; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.eta-vat thead th { text-align: start; font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 12px 10px; border-bottom: 1px solid var(--line-strong, var(--line)); }
.eta-vat th.n, .eta-vat td.n { text-align: end; }
.eta-vat tbody th { text-align: start; font-weight: 500; color: var(--text); font-size: 15px; padding: 14px 10px; }
.eta-vat td { padding: 14px 10px; font-size: 14.5px; color: var(--text-2); }
.eta-vat td.n { font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; }
html[dir="rtl"] .eta-vat th.n, html[dir="rtl"] .eta-vat td.n { text-align: left; }
.eta-vat thead th:first-child, .eta-vat tbody th { padding-inline-start: 0; }
.eta-vat thead th:last-child, .eta-vat td.c { padding-inline-end: 0; }
.eta-vat tbody tr { border-bottom: 1px solid var(--line); }
.eta-vat tbody tr:last-child { border-bottom: 0; }
.eta-vat tr.sum th, .eta-vat tr.sum td { font-weight: 600; }
.eta-vat tr.sum { border-top: 1px solid var(--line-strong, var(--line)); }
.eta-vat td.c { font-size: 13.5px; line-height: 1.5; }
.eta-vat td.c.ok { color: var(--patina-ink); }
.eta-vat td.c.ok::before { content: '\2713\00a0'; }
.eta-vat td.c.warn { color: var(--warn-ink); }
.eta-vat td.c.warn::before { content: '!\00a0'; font-family: var(--font-mono); font-weight: 600; }
.eta-vat tr.diff td.n + td.n { color: var(--warn-ink); }
.eta-vat tr.net { border-top: 2px solid var(--text-strong); }
.eta-vat tr.net th { font-weight: 700; color: var(--text-strong); font-size: 16px; }
.eta-vat tr.net td.n { font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; color: var(--copper-ink); }
.eta-vat tr.net td.c { color: var(--text-strong); font-weight: 600; }
.eta-vat-note { margin: 20px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.7; color: var(--text-strong); }

/* ---- 4. the weeks --------------------------------------------------------------------- */
.eta-weeks { border-bottom: 1px solid var(--line); }
.eta-wk-row { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); gap: 8px 28px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.eta-wk-head { padding: 0 0 10px; border-top: 0; }
.eta-wk-label b { display: block; font-size: 16px; color: var(--text-strong); line-height: 1.35; }
.eta-wk-label small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.eta-wk-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; min-height: 14px;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 20% 100%; background-repeat: repeat-x; }
.eta-wk-head .eta-wk-track { background: none; }
.eta-wk-head .eta-wk-track span { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding-inline-start: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eta-wk-track i { grid-column: var(--from) / var(--to); grid-row: 1; height: 12px; margin-inline: 6px; border-radius: 999px; background: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 55%, var(--bg-alt)); transform-origin: left center; }
html[dir="rtl"] .eta-wk-track i { transform-origin: right center; }
.eta-wk-track i.run { height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--patina-ink); }
.eta-wk-track i.live { background: var(--fill-copper, #E85622); }

/* ---- 5. who holds what ---------------------------------------------------------------- */
.eta-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 64px); }
.eta-split h3 { margin: 0; padding-bottom: 12px; font-size: 20px; color: var(--text-strong); border-bottom: 2px solid var(--copper-ink); }
.eta-split > div + div h3 { border-bottom-color: var(--patina-ink); }
.eta-split ul { list-style: none; margin: 0; padding: 0; }
.eta-split li { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--text); }
.eta-plain { margin: clamp(28px, 4vw, 40px) 0 0; max-width: 76ch; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }

/* ---- 6. the receipt ------------------------------------------------------------------- */
.eta-retail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(32px, 6vw, 88px); align-items: center; }
.eta-retail .sp-head { margin-bottom: 0; }
.eta-receipt { margin: 0; justify-self: center; width: 100%; max-width: 300px; }
.eta-rc-paper { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-1); font-size: 13.5px; color: var(--text); transform: rotate(-1.5deg); transition: transform var(--dur-2) var(--ease-out); }
html[dir="rtl"] .eta-rc-paper { transform: rotate(1.5deg); }
.eta-rc-paper > b { font-size: 15px; color: var(--text-strong); text-align: center; padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong, var(--line)); }
.eta-rc-row { display: flex; justify-content: space-between; gap: 12px; }
.eta-rc-row code, .eta-rc-foot code { font-family: var(--font-mono); background: none; padding: 0; color: var(--text-strong); word-break: normal; }
.eta-rc-row.tot { padding-top: 10px; border-top: 1px dashed var(--line-strong, var(--line)); font-weight: 600; color: var(--text-strong); }
.eta-rc-foot { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line-strong, var(--line)); font-size: 12px; color: var(--text-muted); }
.eta-rc-foot svg { width: 46px; height: 46px; color: var(--text-strong); }
.eta-rc-foot code { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.eta-receipt figcaption { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* ---- motion: once, on reveal ---------------------------------------------------------- */
.eta-pipe li, .eta-log-rows li, .eta-wk-track i { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color var(--dur-1) var(--ease-out); }
html.anim-ready .eta-pipe:not(.revealed) li { opacity: 0; transform: translateY(8px); }
.eta-pipe li:nth-child(2) { transition-delay: 60ms; }
.eta-pipe li:nth-child(3) { transition-delay: 120ms; }
.eta-pipe li:nth-child(4) { transition-delay: 180ms; }
html.anim-ready .eta-log:not(.revealed) .eta-log-rows li { opacity: 0; transform: translateY(6px); }
.eta-log-rows li:nth-child(1) { transition-delay: 120ms; }
.eta-log-rows li:nth-child(2) { transition-delay: 160ms; }
.eta-log-rows li:nth-child(3) { transition-delay: 200ms; }
.eta-log-rows li:nth-child(4) { transition-delay: 240ms; }
.eta-log-rows li:nth-child(5) { transition-delay: 280ms; }
html.anim-ready .eta-weeks:not(.revealed) .eta-wk-track i { transform: scaleX(0); }
.eta-wk-row:nth-child(3) .eta-wk-track i { transition-delay: 50ms; }
.eta-wk-row:nth-child(4) .eta-wk-track i { transition-delay: 100ms; }
.eta-wk-row:nth-child(5) .eta-wk-track i { transition-delay: 150ms; }
.eta-wk-row:nth-child(6) .eta-wk-track i { transition-delay: 200ms; }
.eta-wk-row:nth-child(7) .eta-wk-track i { transition-delay: 250ms; }

@media (hover: hover) and (pointer: fine) {
    .eta-log-rows li:hover { background-color: var(--tint-03); transition-delay: 0ms; }
    .eta-map > div:hover code { border-color: var(--copper-ink); }
    .eta-pipe.revealed li:hover { transform: translateY(-2px); transition-delay: 0ms; }
    .eta-receipt:hover .eta-rc-paper { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .eta-pipe li, .eta-log-rows li, .eta-wk-track i, .eta-rc-paper { transition: background-color var(--dur-1) linear, border-color var(--dur-1) linear; transition-delay: 0ms !important; }
    html.anim-ready .eta-pipe:not(.revealed) li,
    html.anim-ready .eta-log:not(.revealed) .eta-log-rows li { opacity: 1; transform: none; }
    html.anim-ready .eta-weeks:not(.revealed) .eta-wk-track i { transform: none; }
    .eta-pipe.revealed li:hover { transform: none; }
}

/* ---- narrow ---------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .eta-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .eta-pipe li:not(:last-child)::after { display: none; }
    .eta-retail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .eta-log-rows li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; }
    .eta-log-rows .eta-note { grid-column: 1 / -1; }
    .eta-log-top, .eta-log figcaption { padding-inline: 16px; }
    .eta-map > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .eta-map > div::after { display: none; }
    .eta-map dd { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
    .eta-wk-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .eta-wk-head .eta-wk-label { display: none; }
    .eta-wk-head .eta-wk-track span { padding-inline-start: 4px; font-size: 11px; }
    .eta-split { grid-template-columns: minmax(0, 1fr); }

    /* the ledger restacks: each line becomes a block, the two sources as labelled rows */
    .eta-vat { padding-bottom: 6px; }
    .eta-vat table, .eta-vat tbody, .eta-vat tr, .eta-vat th, .eta-vat td { display: block; }
    .eta-vat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .eta-vat tbody tr { padding: 14px 0; }
    .eta-vat tbody th { padding: 0 0 8px; }
    .eta-vat td { padding: 3px 0; }
    .eta-vat td.n { display: flex; justify-content: space-between; gap: 12px; text-align: start; }
    .eta-vat td.n::before { content: attr(data-label); font-family: var(--font-body, inherit); font-size: 13px; font-weight: 400; color: var(--text-muted); }
    .eta-vat td.c { padding-top: 8px; }
}
@media (max-width: 520px) {
    .eta-pipe { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Arabic in the mono stack takes Plex Mono's full-width space between words, so a mono label set
   in Arabic reads spaced out; the Arabic labels take the body face, the figures and codes stay mono. */
html[dir="rtl"] .eta-return, html[dir="rtl"] .eta-vat-tag, html[dir="rtl"] .eta-legend,
html[dir="rtl"] .eta-st, html[dir="rtl"] .eta-pipe li small, html[dir="rtl"] .eta-wk-head .eta-wk-track span { font-family: var(--font-body); }
html[dir="rtl"] .eta-return code { font-family: var(--font-mono); }
/* the week rules sit at the start edge of each week, which is the right edge in Arabic */
html[dir="rtl"] .eta-wk-track { background-image: linear-gradient(to left, var(--line) 1px, transparent 1px); background-position: right top; }