/* build: sha256=8fe2edf9dd7133ec3b96b33f0dd1b7e2a5f6a1f10fbd207f8b3e1b05a5a3697e (tools/build_sim_prototype.py) */
/* Generated from prototype/sim/sim.css: page-level rules stripped (public/styles.css
   owns them), generic selectors scoped to #simulator. Edit the prototype and rebuild. */
#simulator { --epd-red: #c8102e; --epd-paper: #f3f1ec; }

/* Simulator prototype. Tokens mirror public/styles.css so the section drops into the site unchanged. */

/* Mode toggle */
.mode-wrap { display: flex; justify-content: flex-start; margin: 0 0 48px; }
#simulator .mode { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 4px; }
.mode-btn { border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 16px; padding: 12px 24px; border-radius: 999px; cursor: pointer; }
.mode-btn[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.mode-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Shell: cards get more room than the label */
.sim-shell { background: var(--panel); border-radius: var(--r-card); padding: 48px; display: flex; align-items: center; gap: 20px; }
.sim-col { min-width: 0; flex: 1.15 1 0; }
.sim-label { flex: 1 1 0; text-align: center; }
#simulator .arrow { flex: 0 0 auto; width: 28px; height: 28px; position: relative; }
#simulator .arrow::before { content: ""; position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; border-right: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); transform: rotate(45deg); }
.col-cap { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
#simulator .note { color: var(--muted); font-size: 15px; margin: 16px 0 0; }

/* Cards and fields */
#simulator .card { background: #fff; border-radius: var(--r-ctl); border: 1px solid var(--line); overflow: hidden; }
.card-body { padding: 24px; }
.app-title { display: grid; gap: 2px; margin-bottom: 20px; }
.app-title strong { font-size: 20px; }
.app-title span { color: var(--muted); font-size: 14px; }
#simulator .fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
#simulator .fld { display: block; min-width: 0; }
.fld-wide { grid-column: 1 / -1; }
#simulator .fld > span:first-child { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
#simulator .field { display: block; width: 100%; min-width: 0; font: inherit; font-size: 17px; color: var(--ink); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; }
#simulator .field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#simulator .field[readonly] { background: var(--panel); color: var(--muted); }
.status-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 4px; }
.status-row > span:first-child { margin: 0; }
.tag-status { color: var(--muted); font-size: 16px; font-weight: 600; }
.tag-status[data-ok] { color: #1a7f37; }
.app-note { color: #1a7f37; font-size: 14px; margin: 12px 0 0; }
.field-error { color: #b42318; font-size: 15px; margin: 12px 0 0; }
#simulator .field[aria-invalid="true"] { border-color: #b42318; }
.bind { margin-top: 20px; width: 100%; border: 0; border-radius: var(--r-ctl); background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: 17px; padding: 16px 20px; cursor: pointer; }
.bind:hover { background: #000; }
.bind[disabled] { opacity: 0.5; cursor: default; }
.bind:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Generic POS (no brand) */
.pos-bar { background: #1c1f24; color: #cfd3da; display: flex; justify-content: space-between; font-size: 13px; padding: 10px 14px; }
.pos-search::before { content: "\2315  "; }
.pos-save { margin-top: 16px; width: 100%; border: 0; border-radius: var(--r-ctl); background: #2a2e35; color: #fff; font: inherit; font-weight: 600; font-size: 16px; padding: 14px 18px; cursor: pointer; }

/* Label: sprite + live screen. --sx/--sy/--sw/--sh are the screen rect as fractions of the sprite box,
   calibrated against the cut-out image. Fallback bezel is drawn in CSS if the sprite is missing. */
.label { position: relative; width: 100%; max-width: 520px; margin: 0 auto; --sx: 0.1967; --sy: 0.2310; --sw: 0.6288; --sh: 0.5636; }
/* The sprite stays in flow and sets the box height (no aspect-ratio: with container-type on .screen,
   aspect-ratio + an absolutely positioned image locked Chrome in a layout loop, 2026-09-16). */
.label-body { display: block; width: 100%; height: auto; user-select: none; }
.label-body.is-missing { visibility: hidden; }
.label.no-sprite::before { content: ""; position: absolute; inset: 6% 4%; background: #f4f4f4; border-radius: 6% / 10%; box-shadow: inset 0 0 0 1px #d9d9d9, 0 10px 24px rgba(0,0,0,0.08); }
.screen {
  position: absolute; left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%); width: calc(var(--sw) * 100%); height: calc(var(--sh) * 100%);
  background: var(--epd-paper); overflow: hidden; --u: 3px;
}
/* Native 250x122 grid: --u is 1% of the screen width (set by sim-ui.js from a ResizeObserver), so one panel
   pixel is 0.4 units at any display size. Container queries were dropped: see the note above. */
.tpl { position: absolute; inset: 0; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #111; }
.t-name { font-weight: 700; font-size: calc(var(--u) * 7.2); line-height: 1.1; overflow: hidden; }
/* Standard = Toko Dev layout. Price and currency use a monospace face to match the template's dot-matrix digits. */
.tpl-standard .t-head { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 3); right: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 2); }
.tpl-standard .t-sq { flex: 0 0 auto; width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: var(--epd-red); }
.tpl-standard .t-name { white-space: nowrap; text-overflow: ellipsis; }
.t-rule { position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); height: calc(var(--u) * 0.6); background: #111; }
.t-rule-1 { top: calc(var(--u) * 13.5); }
.t-rule-2 { top: calc(var(--u) * 34); }
.tpl-standard .t-cur { position: absolute; left: calc(var(--u) * 3.5); top: calc(var(--u) * 16); font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: calc(var(--u) * 5.2); line-height: 1; }
.tpl-standard .t-price { position: absolute; left: calc(var(--u) * 14); right: calc(var(--u) * 3); top: calc(var(--u) * 15); font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: calc(var(--u) * 16); line-height: 1; text-align: right; white-space: nowrap; overflow: hidden; }
.tpl-standard .t-barcode { position: absolute; left: calc(var(--u) * 3.5); bottom: calc(var(--u) * 3); width: calc(var(--u) * 30); height: calc(var(--u) * 9);
  background: repeating-linear-gradient(90deg, #111 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 1.8), #111 calc(var(--u) * 1.8) calc(var(--u) * 2.2), transparent calc(var(--u) * 2.2) calc(var(--u) * 3.4)); }
/* Promo: red PROMO bar, name, struck old price, red price, barcode on the right (reference photos; Toko Dev promo layout pending) */
.tpl-promo .t-bar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 13); background: var(--epd-red); color: #fff; font-weight: 700; font-size: calc(var(--u) * 8); line-height: calc(var(--u) * 13); text-align: center; letter-spacing: 0.08em; }
.tpl-promo .t-name { position: absolute; left: calc(var(--u) * 3.2); right: calc(var(--u) * 14); top: calc(var(--u) * 14); font-size: calc(var(--u) * 6.8); white-space: nowrap; text-overflow: ellipsis; }
.t-old { position: absolute; left: calc(var(--u) * 3.2); bottom: calc(var(--u) * 16.5); color: #666; font-size: calc(var(--u) * 5.2); line-height: 1; text-decoration: line-through; }
.tpl-promo .t-price { position: absolute; left: calc(var(--u) * 3.2); right: calc(var(--u) * 14); bottom: calc(var(--u) * 3); font-weight: 700; font-size: calc(var(--u) * 13.5); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; }
.t-red { color: var(--epd-red); }
.t-barcode-side { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); top: calc(var(--u) * 16); width: calc(var(--u) * 9);
  background: repeating-linear-gradient(0deg, #111 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2), #111 calc(var(--u) * 2) calc(var(--u) * 2.6), transparent calc(var(--u) * 2.6) calc(var(--u) * 4)); }

/* Refresh states, driven by data-state on .screen */
.screen[data-state="black"] { background: #111; }
.screen[data-state="black"] .tpl, .screen[data-state="white"] .tpl { visibility: hidden; }
.screen[data-state="white"] { background: #fafafa; }
.screen[data-state="invert"] { filter: invert(1) hue-rotate(180deg); }
.screen[data-state="ghost"] .tpl { opacity: 0.35; }

/* Tablet: three columns no longer fit side by side in POS mode; POS and app share a row, label below */
@media (max-width: 1080px) {
  .sim-shell { padding: 32px; }
  .sim-shell[data-mode-shell="pos"] { flex-wrap: wrap; justify-content: center; }
  .sim-shell[data-mode-shell="pos"] .sim-col { flex: 1 1 calc(50% - 40px); }
  .sim-shell[data-mode-shell="pos"] .sim-label { flex: 1 1 100%; }
  .sim-shell[data-mode-shell="pos"] [data-col="arrow2"] { display: none; }
}

/* Mobile: one column in reading order POS, app, label; arrows point down */
@media (max-width: 720px) {
  #simulator .mode { width: 100%; }
  .mode-btn { flex: 1 1 0; padding: 12px 10px; font-size: 15px; }
  .sim-shell, .sim-shell[data-mode-shell="pos"] { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
  .sim-col, .sim-shell[data-mode-shell="pos"] .sim-col, .sim-shell[data-mode-shell="pos"] .sim-label { flex: 0 0 auto; width: 100%; }
  .sim-shell[data-mode-shell="pos"] [data-col="arrow2"] { display: block; }
  #simulator .arrow { align-self: center; }
  #simulator .arrow::before { transform: rotate(135deg); top: 2px; }
  .card-body { padding: 20px; }
  #simulator .fields { grid-template-columns: minmax(0, 1fr); }
  .fld-wide { grid-column: auto; }
  .label { max-width: 100%; }
}