# Design — SERUBI Cashback Calculator

World: a bank-desk **printing calculator**. A navy machine body holds the inputs and one recessed display that carries the answer. A paper tape prints every figure and every step. The admin uses the same machine body as its side panel, with plain white work surfaces for editing.

## Tokens (assets/css/base.css)

| Role | Light | Dark |
|---|---|---|
| Desk (page ground) `--desk` | #e7ebf2 | #070c17 |
| Machine body `--machine` / hi / lo | #0b2e66 / #154290 / #072153 | #0c2a5c / #12387a / #071a40 |
| Key `--key` / edge | #143c7c / #061a40 | #11346d / #061a40 |
| Gold (Bank Papua accent) `--gold` / ink | #f2c14e / #241800 | same |
| Display `--display` / ink / dim | #04132f / #ffe6a0 / #c9b98c | #020a1c / same |
| Paper `--paper` / ink / muted / rule | #fffef8 / #1a2130 / #545d70 / #c3c7cf | #ebe7db / #191f2b / #4c5464 / #b4b1a6 |
| Good / bad | #0a7140 / #b42318 | same on paper |

Radius: 8 / 12 / 22px (machine). Motion: 150–250ms, `cubic-bezier(.16,1,.3,1)`; one signature motion (the tape "feeds" 10px on recalculation); all motion off under `prefers-reduced-motion`.

## Type

- **Archivo** (variable, self-hosted, `font-stretch` 62–125%): UI, labels, and display numerals (800 weight at ~78% width, tabular).
- **JetBrains Mono** (self-hosted): the paper tape only, because it is printed data.
- Labels on the machine: 0.8rem uppercase, 0.04–0.06em tracking.

## Components

- **Key**: navy fill with an inset 3px bottom edge for depth. Pressed: moves down 2px and the edge shrinks. The gold key is the primary action (print).
- **Segmented keys** (tenor, customer type): radio inputs. The checked key turns gold.
- **Display**: a recessed panel with the headline value right-aligned, a dashed rule, and three sub-values. When there is no cashback it dims and shows a note explaining why.
- **Tape**: dotted leader lines (`label ····· value`), strong rows ruled above and below, collapsible sections, and a torn zig-zag bottom edge done with a CSS mask.
- **Comparison row**: product name, total, a two-part bar (navy = bunga neto, gold = cashback neto), four metadata cells, and the difference vs deposito. The highest total gets a "Tertinggi" tag; deposito has a dashed border.
- **Admin**: sticky navy side panel (on phones it becomes a sticky top strip with scrolling tabs), white panels, editable tier tables (shown as cards on phones), a save bar for unsaved changes, and a live "Pratinjau dampak" panel.

## Layout

- Calculator: one column below 900px. From 900px, the machine (360–460px, sticky) sits beside the tape. On phones, a compact display bar appears at the bottom once the main display scrolls out of view.
- Admin: side panel + main from 960px. The preview gets a third column from 1320px.
- Verified at 320, 390, 820, 1100, 1280, and 1440px with no horizontal page scroll.

## Rules

- Brand = the official Bank Papua logo (`bank_logo()` in includes/helpers.php, files in assets/img/, sourced, never redrawn) + the gold "SERUBI" tag. Color logo on light surfaces and paper/print; white logo on navy and in dark mode (`'auto'` switches by theme).
- Numbers use tabular figures; Rupiah is formatted `Rp1.234.567`, percentages `2,70%`.
- Print shows only the tape.