/* The receipts page and the guide: illustrations and their resting pictures.

   Loaded after site.css on /apodeixeis-lianikis-shopify/, /odigos-shopify-mydata/
   and their English twins. Prefixed rc-. Same contract as the rest of the site
   (website/README.md, «Motion»):

   - Every illustration RESTS at its finished picture. This file draws that
     picture and nothing else hides it, so a crawler, a social card, a printer
     and a reader who asked for less motion all see the complete thing.
   - The only animations in here are on-load keyframes on the hero card, whose
     end state is the resting state, inside prefers-reduced-motion:
     no-preference.
   - Everything that moves on scroll is driven by assets/scenes.js on the
     shared engine, which sets the "before" frame itself and clears it again on
     any error, on print and when reduced motion is switched on. */

/* ---------- the reading line (both pages) ---------- */
.rc-progress {
  position: fixed; left: 0; top: 0; right: 0;
  height: 3px;
  z-index: 11;
  pointer-events: none;
}
.rc-progress i {
  display: block; height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- the navy product hero ---------- */
.rc-hero .crumbs, .rc-hero .crumbs a { color: #C6D0E2; }
.rc-hero .crumbs [aria-current] { color: #FFF; }
.rc-hero .crumbs li + li::before { color: #6F7FA0; }
.rc-hero h1 { max-width: 24ch; }

/* ---------- the hero card: one order, from checkout to the customer's inbox ----------
   Plays once on load, about two and a half seconds: the card floats in, the
   gold rail fills down the four steps, each dot lands as the rail reaches it,
   the ΜΑΡΚ stamps in with the homepage card's gold ring, an envelope leaves
   from the last step, and the note stamps last. The rail is the list's own
   ::after, so the <ol> keeps nothing but <li> children. */
.rc-card {
  position: relative;
  background: var(--paper); color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  max-width: 28rem; width: 100%; margin: 0 auto;
  font-size: 0.9rem; text-align: left;
  overflow: hidden;
}
.rc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem 0.85rem; border-bottom: 1px solid var(--line); }
.rc-card-head b { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.rc-card-head span { display: block; color: var(--grey); font-size: 0.78rem; margin-top: 0.15rem; }
.rc-chip { flex: none; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.22rem 0.6rem; white-space: nowrap; line-height: 1.2; background: var(--ok-soft); color: var(--ok); }
.rc-steps { list-style: none; margin: 0; padding: 1.05rem 1.15rem 0.35rem; position: relative; display: grid; gap: 0.9rem; }
.rc-steps::before,
.rc-steps::after {
  content: ""; position: absolute;
  left: calc(1.15rem + 7px); top: 1.5rem; bottom: 1.25rem; width: 2px;
  border-radius: 2px;
}
.rc-steps::before { background: var(--line); }
.rc-steps::after { background: var(--gold); transform-origin: top center; }
.rc-steps li { position: relative; padding-left: 1.85rem; display: grid; gap: 0.1rem; z-index: 1; }
.rc-dot {
  position: absolute; left: 0; top: 0.12rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); color: var(--navy-dark);
  box-shadow: 0 0 0 4px rgba(212, 168, 71, 0.22);
  display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 900; line-height: 1;
}
.rc-steps b { font-size: 0.9rem; letter-spacing: -0.005em; }
.rc-steps small { color: var(--grey); font-size: 0.78rem; }
.rc-steps .rc-mark {
  justify-self: start;
  margin-top: 0.15rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.4px; color: var(--ink);
  background: #FDFAF2; border: 1px solid rgba(212, 168, 71, 0.65); border-radius: 4px;
  padding: 0.08rem 0.4rem;
}
.rc-fly { position: absolute; right: 1.2rem; top: 0.1rem; width: 1.35rem; height: 1.35rem; color: var(--navy); opacity: 0; pointer-events: none; }
.rc-note { position: relative; margin: 0.65rem 1.15rem 1.05rem; background: var(--navy-dark); color: #FFF; border-radius: 10px; padding: 0.55rem 0.75rem; font-size: 0.79rem; font-weight: 650; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .rc-card { animation: rc-float 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .rc-steps::after { animation: rc-fill-y 1.9s cubic-bezier(0.45, 0, 0.25, 1) 0.55s both; }
  .rc-steps li { animation: mock-rise 0.45s ease both; }
  .rc-steps li:nth-child(1) { animation-delay: 0.5s; }
  .rc-steps li:nth-child(2) { animation-delay: 1.0s; }
  .rc-steps li:nth-child(3) { animation-delay: 1.5s; }
  .rc-steps li:nth-child(4) { animation-delay: 2.0s; }
  .rc-steps li:nth-child(1) .rc-dot { animation: mock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35) 0.55s both; }
  .rc-steps li:nth-child(2) .rc-dot { animation: mock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35) 1.05s both; }
  .rc-steps li:nth-child(3) .rc-dot { animation: mock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35) 1.55s both; }
  .rc-steps li:nth-child(4) .rc-dot { animation: mock-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35) 2.05s both; }
  .rc-steps .rc-mark { animation: mock-stamp 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1.75s both, gold-ring 0.7s ease-out 2.0s both; }
  .rc-fly { animation: rc-fly 1.1s cubic-bezier(0.3, 0.1, 0.3, 1) 2.25s both; }
  .rc-note { animation: mock-stamp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) 2.6s both; }
}
@keyframes rc-float { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes rc-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* The envelope leaves and is gone: its resting state is invisible on purpose,
   it is the one thing in the card that only exists while moving. */
@keyframes rc-fly {
  0% { opacity: 0; transform: translate(-1.2rem, 0.2rem) scale(0.8); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(1.6rem, -1.4rem) scale(1) rotate(-8deg); }
}

/* ---------- text beside an illustration ---------- */
.rc-split { display: grid; gap: 2rem; align-items: center; margin-top: 2.25rem; }
.rc-split > * { min-width: 0; }
@media (min-width: 900px) {
  .rc-split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .rc-split.flip > :first-child { order: 2; }
}
.rc-split .prose:first-child { margin-top: 0; }
.rc-ill {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--e1);
  padding: 1.25rem;
  min-width: 0;
}
.rc-cap { margin-top: 0.85rem; font-size: 0.85rem; color: var(--grey); }
/* The two guide diagrams are figures: the browser's default figure margin
   (40px each side) would indent them off the prose column. */
figure.rc-ill { margin: 2rem 0 0; }
figure.rc-ill .rc-cap { max-width: 34rem; text-align: center; }

/* ---------- when the receipt issues ---------- */
.rc-flow { display: grid; gap: 1.15rem; }
.rc-flow-row { display: grid; gap: 0.45rem; }
.rc-flow-lbl { font-size: 0.74rem; font-weight: 750; color: var(--grey); letter-spacing: 0.06em; text-transform: uppercase; }
.rc-nodes { display: flex; align-items: center; }
.rc-node {
  flex: 0 1 auto; min-width: 0; text-align: center;
  padding: 0.5rem 0.7rem; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--e1);
  font-size: 0.8rem; font-weight: 650; color: var(--ink);
}
.rc-node.doc { background: #FDFAF2; border-color: rgba(212, 168, 71, 0.75); }
.rc-node.off { color: #8A93A5; border-style: dashed; box-shadow: none; background: var(--soft); }
.rc-rail { position: relative; flex: 1 1 2rem; min-width: 1.6rem; height: 2px; background: var(--line); }
.rc-rail > b { position: absolute; inset: 0; background: var(--gold); transform-origin: left center; }
.rc-rail.is-cut > b { right: 50%; }
.rc-rail.is-cut::after {
  content: "\00D7";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #FEF3F2; color: #B42318; border: 1px solid #F3B4AE;
  font-size: 0.8rem; font-weight: 800; line-height: 1rem; text-align: center;
}
.rc-pkg {
  position: absolute; left: 100%; top: 50%;
  width: 1.45rem; height: 1.45rem; margin: -0.72rem 0 0 -0.72rem;
  color: var(--navy); opacity: 0;
}
.rc-pkg svg { display: block; width: 100%; height: 100%; }
.rc-flow-cap { font-size: 0.8rem; color: var(--grey); }
/* On a phone the three stations of the first row share about 300px: smaller
   type and padding, and a rail that never shrinks below the parcel riding it,
   so the parcel travels between two labels instead of over one. */
@media (max-width: 480px) {
  .rc-flow.rc-ill { padding: 1.05rem 0.9rem; }
  .rc-node { font-size: 0.7rem; padding: 0.42rem 0.45rem; line-height: 1.25; }
  .rc-rail { flex: 1 1 1.75rem; min-width: 1.75rem; }
  .rc-pkg { width: 1.15rem; height: 1.15rem; margin: -0.58rem 0 0 -0.58rem; }
}

/* ---------- the anatomy of the sample receipt ----------
   Numbered pins on the document and a legend under it. Pointing at a legend
   item outlines the part it names (assets/scenes.js, no engine needed); the
   pins themselves are static, the engine only lets them land. */
.rc-anchor { position: relative; }
/* On the document the pins sit inline, in front of the label they number, so
   they never cover a word at any width; only the QR's pin is a corner badge,
   because the code has no label to stand before. */
.rc-pin {
  display: inline-grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--gold); color: var(--navy-dark);
  font: 800 0.68rem/1 var(--sans); letter-spacing: 0; text-transform: none;
  box-shadow: 0 0 0 2px #FFFDF8;
  margin-right: 0.45rem; vertical-align: 0.05rem;
}
.doc-qr.rc-anchor .rc-pin { position: absolute; top: -0.65rem; left: -0.65rem; margin: 0; z-index: 2; }
.doc .rc-anchor { transition: box-shadow 0.25s ease, background-color 0.25s ease; border-radius: 4px; }
.doc .rc-anchor.is-hot { box-shadow: 0 0 0 3px rgba(212, 168, 71, 0.85); background-color: rgba(253, 250, 242, 0.9); }
.rc-legend {
  list-style: none; padding: 0;
  margin: 1.9rem auto 0; max-width: 48rem;
  display: grid; gap: 0.75rem; text-align: left;
}
@media (min-width: 720px) { .rc-legend { grid-template-columns: 1fr 1fr; } }
.rc-legend li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #C6D0E2; font-size: 0.93rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rc-legend li:hover,
.rc-legend li.is-hot { background: rgba(212, 168, 71, 0.1); border-color: rgba(212, 168, 71, 0.55); }
.rc-legend b { display: block; color: #FFF; margin-bottom: 0.1rem; }
.rc-legend .rc-pin { margin: 0.05rem 0 0; box-shadow: none; width: 1.45rem; height: 1.45rem; font-size: 0.72rem; }

/* Three country cards in three equal columns, not two thirds and a stretched
   third: the shared two-column rule makes an odd last card full width, and at
   this count that should stop once the grid has three columns. */
@media (min-width: 1000px) {
  .rc-three .prop:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ---------- the delivery note, on the receipt itself ----------
   One paper, the transit block docked inside it, one ΜΑΡΚ. The scene starts
   with the block off to the side and docks it. */
.rc-merge { display: grid; justify-items: center; gap: 1rem; padding: 1.5rem 1.25rem; overflow: hidden; }
.rc-paper {
  position: relative; width: 100%; max-width: 20rem;
  background: #FFFDF8; border: 1px solid #E6E0D0; border-radius: 6px;
  box-shadow: var(--e2);
  padding: 0.95rem 1rem 0.85rem;
  font-size: 0.76rem; color: var(--grey);
}
.rc-paper-h { display: flex; justify-content: space-between; gap: 0.6rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--navy); }
.rc-paper-h b { color: var(--navy); font-size: 0.8rem; letter-spacing: 0.01em; }
.rc-lines { display: grid; gap: 0.35rem; margin: 0.65rem 0 0.55rem; }
.rc-lines i { display: block; height: 5px; border-radius: 3px; background: #ECE7DA; }
.rc-lines i:nth-child(2) { width: 82%; }
.rc-lines i:nth-child(3) { width: 64%; }
.rc-paper-sum { display: flex; justify-content: space-between; color: var(--ink); font-weight: 700; padding-top: 0.35rem; border-top: 1px solid #EEE9DD; }
.rc-dock {
  margin-top: 0.7rem; display: grid; gap: 0.2rem;
  padding: 0.55rem 0.65rem; background: #FDFAF2; border-left: 3px solid var(--gold); border-radius: 4px;
}
.rc-dock .doc-h { margin-bottom: 0.1rem; }
.rc-dock span:not(.doc-h) { display: flex; justify-content: space-between; gap: 0.6rem; }
.rc-dock span b { color: var(--ink); font-weight: 650; text-align: right; }
.rc-stamp {
  display: inline-block;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.4px; color: var(--navy);
  border: 2px solid var(--navy); border-radius: 5px;
  padding: 0.18rem 0.5rem;
  background: #FFF;
}
.rc-merge-cap { font-size: 0.82rem; font-weight: 650; color: var(--ink); text-align: center; }
.rc-merge-cap span { color: var(--gold-text); }

/* ---------- returns: the credit note that issues itself ---------- */
.rc-credit { display: grid; gap: 0.7rem; }
.rc-docrow {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.rc-docrow b { display: block; font-size: 0.88rem; color: var(--ink); }
.rc-docrow small { display: block; color: var(--grey); font-size: 0.75rem; overflow-wrap: anywhere; }
.rc-badge {
  width: 2.4rem; height: 2.4rem; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em;
  background: var(--soft); color: var(--navy); border: 1px solid var(--line);
}
.rc-badge.cn { background: #FDFAF2; border-color: rgba(212, 168, 71, 0.7); color: var(--gold-text); }
.rc-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; font-size: 0.88rem; }
.rc-amt.neg { color: #B42318; }
.rc-event {
  position: relative; display: flex; align-items: center; gap: 0.55rem;
  margin-left: 1.2rem; padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 0.8rem; color: var(--grey);
}
.rc-event::before { content: ""; position: absolute; left: 0; top: -0.7rem; bottom: -0.7rem; width: 2px; background: repeating-linear-gradient(to bottom, var(--gold) 0 4px, transparent 4px 8px); }
.rc-event i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(212, 168, 71, 0.22); margin-left: -1.45rem; }
.rc-docrow.cn { border-color: rgba(212, 168, 71, 0.55); background: #FFFDF8; }
.rc-auto { display: inline-block; margin-top: 0.2rem; font-size: 0.7rem; font-weight: 750; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 0.1rem 0.5rem; }

/* ---------- the three switches ---------- */
.rc-switches { display: grid; gap: 0; padding: 0.4rem 1.1rem; }
.rc-sw { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.rc-sw:first-child { border-top: 0; }
.rc-sw b { display: block; font-size: 0.9rem; color: var(--ink); }
.rc-sw small { display: block; font-size: 0.78rem; color: var(--grey); }
.rc-toggle { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--navy); flex: none; }
.rc-toggle i { position: absolute; top: 0.2rem; left: 1.3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* ---------- the guide: one order, three roles, one document ----------
   Three tiles say what the law asks for; the document under them carries all
   three with one ΜΑΡΚ. The scene draws the three connectors down into it. */
.rc-roles { display: grid; gap: 0; justify-items: center; padding: 1.5rem 1.25rem 1.35rem; }
.rc-role-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 30rem; }
.rc-role {
  text-align: center; padding: 0.6rem 0.4rem; border-radius: 10px;
  background: var(--soft); border: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 700; color: var(--ink);
}
.rc-role small { display: block; font-weight: 550; color: var(--grey); font-size: 0.7rem; margin-top: 0.1rem; }
/* Height follows the width (the viewBox's own ratio), so the wires scale with
   the tile row and always start under the three tile centres. */
.rc-wires { width: 100%; max-width: 30rem; height: auto; aspect-ratio: 300 / 52; display: block; overflow: visible; }
.rc-wires path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.rc-one {
  width: 100%; max-width: 19rem;
  background: #FFFDF8; border: 1px solid rgba(212, 168, 71, 0.7); border-radius: 8px;
  box-shadow: var(--e2); padding: 0.8rem 0.95rem;
  display: grid; gap: 0.35rem; text-align: center;
}
.rc-one b { color: var(--navy); font-size: 0.9rem; }
.rc-one small { color: var(--grey); font-size: 0.76rem; }
.rc-one .rc-stamp { justify-self: center; }

/* ---------- the guide: two charges, two recipients ---------- */
.rc-bills { display: grid; gap: 0.4rem; justify-items: center; padding: 1.4rem 1.25rem; }
.rc-shop { padding: 0.55rem 1rem; border-radius: 999px; background: var(--navy); color: #FFF; font-size: 0.82rem; font-weight: 700; }
.rc-fork { width: 100%; max-width: 26rem; height: auto; aspect-ratio: 260 / 48; display: block; overflow: visible; }
.rc-fork path { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; }
.rc-fork .rc-go { stroke: var(--gold); }
.rc-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: 100%; max-width: 26rem; }
.rc-pay > div { padding: 0.75rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--e1); }
.rc-pay small { display: block; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.rc-pay b { display: block; font-size: 0.88rem; color: var(--ink); margin-top: 0.15rem; }
.rc-pay span { display: block; font-size: 0.76rem; color: var(--grey); margin-top: 0.2rem; }

/* ---------- the guide's comparison: the row that is ours ----------
   Nothing to add here: the row already rests in its pale gold (site.css,
   .cmp tr.ours). The scene starts its cells white and lets the gold sweep
   across them one by one when the table arrives, then clears its styles. */

/* ---------- the changelog: a dated rail, newest first ----------
   One gold rail down the left; it fills with the scroll and each entry rises
   as it arrives (assets/scenes.js, «log»). At rest the rail is full and every
   entry is in place. The key milestone carries a pale gold card. */
.rc-log-wrap { position: relative; margin-top: 2.5rem; }
.rc-log-rail { position: absolute; left: 0.42rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--line); border-radius: 2px; }
.rc-log-rail i { position: absolute; inset: 0; background: var(--gold); transform-origin: top center; border-radius: 2px; }
.rc-month { position: relative; margin: 2.6rem 0 1.1rem; padding-left: 2.1rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.rc-month:first-of-type { margin-top: 0; }
.rc-month::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.9rem; height: 0.9rem; margin-top: -0.45rem; border-radius: 3px; background: var(--gold); box-shadow: 0 0 0 4px var(--paper); }
.rc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.rc-log li { position: relative; padding-left: 2.1rem; display: grid; gap: 0.3rem; }
.rc-log li::before {
  content: ""; position: absolute; left: 0.12rem; top: 0.32rem;
  width: 0.62rem; height: 0.62rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold);
}
.rc-log time { font-size: 0.82rem; font-weight: 750; color: var(--grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-log h3 { font-size: 1.05rem; line-height: 1.3; }
.rc-log p { color: var(--grey); margin-top: 0.2rem; }
.rc-log li.is-key > div { background: #FDFAF2; border: 1px solid rgba(212, 168, 71, 0.6); border-radius: var(--radius); padding: 0.85rem 1rem; }
.rc-log li.is-key::before { background: var(--gold); }
@media (min-width: 760px) {
  .rc-log li { grid-template-columns: 8rem 1fr; column-gap: 1.25rem; align-items: start; }
  .rc-log time { padding-top: 0.2rem; }
}

/* ---------- print: everything as it rests, nothing in motion ---------- */
@media print {
  .rc-progress, .rc-fly { display: none !important; }
  .rc-card, .rc-ill { box-shadow: none; border: 1px solid #999; }
  .rc-legend li { border-color: #999; background: none; color: #000; }
  .rc-legend b { color: #000; }
  .rc-split, .rc-ill, .rc-legend li { break-inside: avoid; }
}