/* The simulator's own layer over the reproduced app: the app fitted to the
   1440 x 810 stage, the supplier documents drawn as HTML pages, and the few
   transitions the demo animates. The product's look itself comes from
   css/product.css; nothing here restyles a product component. */

@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/roboto-mono-latin.woff2") format("woff2");
}

/* The app fills its scene. The product sizes .app to the window (100vh). */
.zs { position: absolute; inset: 0; overflow: hidden; }
.zs .app { height: 100%; }
.zs button { font: inherit; }

/* ---------- Supplier documents (612 x 792 pages) ---------- */
.zs .sheet { overflow: hidden; }
.zs .pdf { position: absolute; left: 0; top: 0; width: 612px; height: 792px; transform-origin: 0 0; }
.zs .pdf-page {
  position: relative; width: 612px; height: 792px; background: #fff; color: #222;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 8.2px; line-height: 1.38;
  letter-spacing: 0;
}
.zs .pd-band { height: 12px; background: var(--band); }
.zs .pd-top { display: flex; justify-content: space-between; gap: 24px; padding: 24px 46px 0; }
.zs .pd-brand { font-size: 19px; font-weight: 700; color: var(--brand); margin-bottom: 4px; letter-spacing: -0.01em; line-height: 1.15; }
.zs .pd-small { color: #666; font-size: 7.2px; margin-top: 2px; white-space: nowrap; }
.zs .pd-head { min-width: 190px; }
.zs .pd-title { font-size: 14px; font-weight: 700; text-align: right; margin: 2px 0 8px; color: #1a1a1a; white-space: nowrap; }
.zs .pd-meta { margin-left: auto; border-collapse: collapse; }
.zs .pd-meta td { padding: 0 0 0 20px; font-size: 7.6px; color: #555; white-space: nowrap; }
.zs .pd-meta td:last-child { text-align: right; color: #222; }
.zs .pd-meta .b { font-weight: 700; }
.zs .pd-rule { height: 1px; background: #d9d9d9; margin: 14px 46px; }
.zs .pd-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; padding: 0 46px; }
.zs .pd-cap { font-size: 6.6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 3px; }
.zs .pd-period { padding: 14px 46px 8px; }
.zs .pd-lines { width: calc(100% - 92px); margin: 0 46px; border-collapse: collapse; }
.zs .pd-lines th { background: color-mix(in srgb, var(--band) 14%, #ffffff); font-weight: 700; text-align: left; padding: 4px 5px; font-size: 7.4px; }
.zs .pd-lines td { padding: 4px 5px; border-bottom: 1px solid #e3e3e3; }
.zs .pdf-page .r { text-align: right; }
.zs .pdf-page .u { color: #777; }
.zs .pd-foot { display: flex; justify-content: space-between; gap: 24px; padding: 12px 46px; }
.zs .pd-note { max-width: 260px; color: #666; font-size: 7.2px; }
.zs .pd-tot { border-collapse: collapse; min-width: 230px; }
.zs .pd-tot td { padding: 3px 5px; }
.zs .pd-tot .due td { background: color-mix(in srgb, var(--band) 14%, #ffffff); font-weight: 700; }
.zs .cd-title { padding: 2px 46px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; }
.zs .cd-sub { display: flex; justify-content: space-between; padding: 2px 46px 6px; color: #444; }
.zs .cd-sec { padding: 8px 46px 3px; font-weight: 700; color: var(--brand); font-size: 8px; }
.zs .cd-kv { margin: 0 46px; width: calc(100% - 92px); border-collapse: collapse; }
.zs .cd-kv td { padding: 1.5px 0; vertical-align: top; }
.zs .cd-kv td:first-child { width: 130px; color: #666; }
.zs .cd-rates { margin-top: 2px; }
.zs .cd-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 18px 46px 0; }
.zs .cd-sign .ln { display: block; border-bottom: 1px solid #9a9a9a; height: 20px; margin: 4px 0; width: 190px; }
.zs .cd-sign i { color: #777; font-style: normal; font-size: 7.2px; }
.zs .cd-foot { position: absolute; left: 46px; right: 46px; bottom: 26px; display: flex; justify-content: space-between; color: #888; font-size: 6.6px; }

/* Thumbnails are the page itself, very small. */
.zs .thumb .sheet { box-shadow: none; border: 2px solid var(--accent); border-radius: 2px; }

/* ---------- Transitions the demo plays ---------- */
@keyframes sim-row-in { from { opacity: 0; } to { opacity: 1; } }
.zs tr.row-in td { animation: sim-row-in 0.5s ease both; }
.zs .sim-fade { transition: opacity 0.4s ease; }
.zs .sim-fade.is-hidden { opacity: 0; }
@keyframes sim-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.zs .sim-pop { animation: sim-pop 0.45s cubic-bezier(.22,.8,.25,1) both; }
/* Unscoped: the end card sits outside the app root. */
.is-hidden-node { display: none !important; }

/* Checks canvas: the product lays the flow out with React Flow; here the
   cards sit at fixed positions on the same dotted canvas. */
.zs .ck-flow { position: absolute; inset: 0; }
.zs .ck-node { position: absolute; }
.zs .ck-node code, .zs .ck-node .ck-rules span { white-space: nowrap; }
.zs .ck-node .ck-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; position: relative; }
.zs .ck-node .ck-card.ck-card--term { flex-direction: row; align-items: center; }

/* Dashboard bars grow from the baseline. */
.zs .dash-bar { transition: height 0.9s cubic-bezier(.22,.8,.25,1); }