/* ok24fx prototype — shared components. Every page is built from these atoms.
   Pages may add a small <style> block for layout only; never new colours or fonts. */
@import url('tokens.css');

/* Honest pending feedback: text is the status; motion never represents a percentage. */
.load-state { padding: 22px 0; margin: 12px 0; border-block: 1px solid var(--rule); }
.load-state.compact { padding: 8px 0; margin: 4px 0; border: 0; }
.load-state-row { display: flex; align-items: center; gap: 12px; font-weight: 500; margin: 0 0 4px; }
.load-state-mark { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; box-sizing: border-box; border: 2px solid var(--rule); border-top-color: var(--green-deep); border-radius: 50%; animation: feedback-turn 900ms linear infinite; }
.load-state-lines { margin-top: 20px; display: grid; gap: 16px; }
.load-state-lines span { display: block; height: 10px; width: 65%; background: var(--paper-2); }
.load-state-lines span:nth-child(2) { width: 88%; }
.load-state-lines span:nth-child(3) { width: 45%; }
.navigation-feedback { position: fixed; top: 0; inset-inline: 0; z-index: 100; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px max(var(--gutter), calc((100vw - var(--col)) / 2 + var(--gutter))); box-sizing: border-box; background: var(--paper); border-bottom: 2px solid var(--green-deep); font-size: 15px; pointer-events: none; }
.btn[aria-busy="true"] { cursor: wait; }
@keyframes feedback-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .load-state-mark { animation: none; } }
@media print { .navigation-feedback, .load-state { display: none; } }

/* Customer task hierarchy: same paper, type and ruled ledger; no new palette. */
.section-nav { display:flex; flex-wrap:wrap; gap:0 22px; margin:18px 0 24px; border-bottom:1px solid var(--rule); }
.section-nav a { display:flex; align-items:center; min-height:44px; padding:6px 0; font-size:15px; text-decoration:none; border-bottom:2px solid transparent; }
.section-nav a:hover, .section-nav a:focus-visible { border-bottom-color:var(--green-deep); }
.section-nav a[aria-current='page'] { border-bottom-color:var(--green-deep); color:var(--ink); font-weight:600; }
.disclosure { margin:16px 0; border-bottom:1px solid var(--rule); padding-bottom:12px; }
.disclosure summary { cursor:pointer; min-height:44px; padding:10px 0; box-sizing:border-box; font-weight:500; }
.disclosure summary:focus-visible { outline:2px solid var(--green-deep); outline-offset:3px; }
.disclosure > .fact { margin:4px 0 12px; }
.ea-file-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); overflow-wrap:anywhere; }
.ea-file-row .btn { min-height:44px; max-width:112px; padding:8px 0; margin:0; }
/* Manage presents one task at a time; hidden panels keep their active job readers. */
.manage-views { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:24px 0; border-block:1px solid var(--rule); }
.manage-views button { display:flex; min-height:86px; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; padding:12px 8px; border:0; border-bottom:3px solid transparent; color:var(--ink-3); background:transparent; font:inherit; font-size:14px; cursor:pointer; }
.manage-views button.current { border-bottom-color:var(--green-deep); color:var(--ink); font-weight:700; }
.manage-views button:disabled { opacity:.5; cursor:wait; }
.manage-views button:focus-visible { outline:2px solid var(--green-deep); outline-offset:-2px; }
.task-attention { padding:12px 0; border-bottom:1px solid var(--rule); }
.task-attention button { min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--green-deep); font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.task-attention button:disabled { opacity:.5; cursor:wait; }
.ea-summary { display:grid; grid-template-columns:36px minmax(0,1fr) 20px; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--rule); color:inherit; text-decoration:none; }
.ea-summary b { font-size:20px; overflow-wrap:anywhere; }
.ea-summary .why { display:block; margin-top:4px; color:var(--ink-3); font-size:14px; }
.ea-summary[aria-disabled='true'] { opacity:.6; }
.ea-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ea-heading h2 { font-size:18px; }
.ea-heading .file-refresh { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:10px 0 10px 8px; border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:14px; cursor:pointer; }
.ea-heading .file-refresh:disabled { opacity:.5; cursor:wait; }
.ea-file-row .file-name { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:10px; }
.ea-file-row .file-name svg { margin-top:3px; }
.ea-empty { display:flex; align-items:center; gap:12px; margin-top:22px; color:var(--ink-2); }
.upload-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; margin:22px 0 18px; list-style:none; }
.upload-steps li { display:flex; align-items:center; gap:7px; margin:0; padding-bottom:10px; border-bottom:2px solid var(--rule); color:var(--ink-3); font-size:14px; }
.upload-steps li[aria-current='step'] { border-color:var(--green-deep); color:var(--ink); font-weight:700; }
.upload-steps span { font:600 20px/1 var(--display); }
.upload-choose svg { flex-shrink:0; }
.btn.upload-choose { display:flex; align-items:center; justify-content:flex-start; gap:10px; }
/* Passbook uses the same shared rules, scoped to its screen in the gallery as well. */
[data-passbook] [data-machine-heading], [data-passbook] [data-current-state], [data-passbook] [data-next-action],
[data-passbook] [data-recent-history], [data-passbook] [data-management] { min-width:0; overflow-wrap:anywhere; }
[data-passbook] [data-current-state] { padding-block:12px 8px; }
[data-passbook] [data-machine-heading] { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
[data-passbook] [data-machine-heading] > div { min-width:0; }
[data-passbook] [data-machine-heading] h1, [data-passbook] [data-machine-heading] .fact { margin:0; }
[data-passbook] [data-current-state] .eyebrow { margin:0; }
[data-passbook] [data-next-action] { margin-top:12px; }
[data-passbook] [data-next-action] .btn { margin-block:0 8px; }
[data-passbook] .task-links { margin-top:24px; }
[data-passbook] .task-links a { display:grid; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:14px; min-height:64px; padding:12px 0; border-bottom:1px solid var(--rule); color:var(--ink); text-decoration:none; font-weight:500; }
[data-passbook] .task-links a:hover, [data-passbook] .task-links a:focus-visible { color:var(--green-deep); }
[data-passbook] details { padding-block:16px; border-bottom:1px solid var(--rule); }
[data-passbook] summary { cursor:pointer; color:var(--ink-3); min-height:28px; }
[data-passbook] .ea-fact { display:flex; align-items:center; gap:10px; margin:12px 0; font-size:15px; }
[data-passbook] details section { margin-top:16px; }
[data-store-intro] { color:var(--ink-2); }
[data-store-price] { font-family:var(--display); font-size:20px; font-weight:600; }
#manage-program, #manage-ea, #manage-upload, #manage-settings { scroll-margin-top:20px; }
@media(min-width:721px) { .app > h1 { margin-top:12px; } .app .section-nav { gap:0 28px; } }
@media(max-width:360px) { .section-nav { gap:0 16px; } .section-nav a { font-size:14px; } .ea-file-row { gap:12px; } }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--text)/var(--lh) var(--body);
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
/* one column, phone-sized. centred rather than left-pinned: below 720 px the max-width
   does not bind and this changes nothing, but on a desktop the column would otherwise sit
   against the left edge with the rest of the screen empty. */
main { max-width: var(--col); margin-inline: auto; padding: 12px var(--gutter) 40px; box-sizing: border-box; }
main.app { padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)); }
a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 30px; letter-spacing: -.01em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: .5em 0; }
ul, ol { padding-left: 20px; margin: 6px 0; }
li { margin: 4px 0; }
code { font: 500 15px var(--display); background: var(--paper-2); padding: 1px 5px; border-radius: 2px; }
img, svg { max-width: 100%; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.num { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.plus { color: var(--green-deep); }
.minus { color: var(--red-deep); }
.attn { color: var(--attn); }

/* page header: wordmark 22 px left, quiet label right */
.top { display: flex; justify-content: space-between; align-items: center; height: 46px; }
.top .brand-home { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; text-decoration: none; }
.top .brand-home:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.top .wm { height: 22px; width: auto; display: block; flex: 0 0 auto; }
.top .r { font: 500 14px/1.4 var(--body); color: var(--ink-3); min-width: 0; text-align: right; }
.top .r a { color: var(--ink-3); }
.sub { font: 400 15px/1.5 var(--body); color: var(--ink-3); margin: 2px 0 0; }
.stepbar { display: flex; justify-content: space-between; gap: 12px; font: 500 14px/1.4 var(--body); color: var(--ink-3); padding: 8px 0 0; }

/* the double rule of a bank passbook — column heads sit on it */
.dbl { border-top: 1.5px solid var(--ink); position: relative; padding-top: 8px; margin-top: 18px; }
.dbl::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--rule); }
.dbl .cols { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 0 12px; font: 500 13px/1.4 var(--body); color: var(--ink-3); }
.dbl .cols :last-child { text-align: right; }
.eyebrow { font: 500 14px/1.4 var(--body); color: var(--ink-3); margin: 0 0 4px; }

/* status is a WORD, never a colour chip */
.state { font: 600 22px/1.2 var(--display); color: var(--green-ink); margin: 6px 0 0; }
.state.off { color: var(--ink); }
.state.attn { color: var(--attn); }
.fact { font: 400 15px/1.55 var(--body); color: var(--ink-2); margin: 2px 0 0; }
.hero { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 4px; }
.hero .k { font: 500 15px/1.4 var(--body); color: var(--ink-2); }
.hero .v { font: 700 44px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero .v small { font-size: 18px; font-weight: 600; margin-left: 4px; }

/* the signature atom: ledger line — 60 px time gutter · text · right-aligned number */
.ln { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.ln .t { font: 500 13px/1.6 var(--body); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln .d { min-width: 0; }
.ln .d b { font-weight: 500; }
.ln .d .why { display: block; color: var(--ink-3); font-size: 14px; margin-top: 2px; }
.ln .n { font: 600 16px/1.4 var(--display); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ln .n.plus { color: var(--green-deep); }
.ln .n.minus { color: var(--red-deep); }
/* .ln.w's gutter holds a word, not a time — give it room and let it wrap */
.ln.w { grid-template-columns: 84px minmax(0, 1fr); }
.ln.w .t { white-space: normal; overflow-wrap: anywhere; }
.ln.p { grid-template-columns: minmax(0, 1fr) fit-content(42%); gap: 0 16px; }
.ln.p .n { white-space: normal; font-size: 15px; }
.ln.now .d { color: var(--attn); font-weight: 500; }
.ln.head { padding: 4px 0 6px; font-size: 14px; color: var(--ink-3); }
a.ln { color: inherit; text-decoration: none; }
a.ln:hover .d { text-decoration: underline; text-underline-offset: 3px; }

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

/* the top line when something needs the customer — text only, no wash */
.alert { font: 500 17px/1.5 var(--body); color: var(--attn); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.alert.bad { color: var(--red-deep); }

/* one filled button per page, forward actions only. stop/delete = ghost. */
.btn { display: block; width: 100%; box-sizing: border-box; padding: 15px 12px; margin: 20px 0 12px; background: var(--green-deep); color: var(--on-fill); font: 600 18px/1.2 var(--display); border: 0; border-radius: 4px; text-align: center; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; }
.btn:hover { background: var(--green-press); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }
.btn[disabled], .btn.dim { background: var(--paper-2); color: var(--ink-3); cursor: default; transform: none; }
.btn.quiet { background: none; border: 0; color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; font: 500 16px/1.4 var(--body); padding: 8px 0; margin: 4px 0; text-align: left; width: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row2 .btn { margin: 0; }

/* underline form fields — ≥16 px so iOS does not zoom */
.field { margin: 16px 0 0; }
.field label { display: block; font: 500 14px/1.4 var(--body); color: var(--ink-3); }
.field input, .field select, .field textarea { display: block; width: 100%; box-sizing: border-box; font: 400 17px/1.4 var(--body); color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 7px 0 6px; outline: 0; -webkit-appearance: none; appearance: none; }
.field input:focus, .field select:focus { border-bottom-color: var(--green-deep); border-bottom-width: 3px; padding-bottom: 4.5px; }
.field input::placeholder { color: var(--ink-3); }
.field input, .field select { min-height: 44px; }
/* A dropdown must look interactive even before it receives focus. */
.field select { -webkit-appearance: auto; appearance: auto; height: 44px; padding-inline-end: 8px; }
.btn.quiet { min-height: 44px; }
.field .hint { font: 400 14px/1.45 var(--body); color: var(--ink-3); margin-top: 5px; }
.field.err input { border-bottom-color: var(--red-deep); }
.field.err .hint { color: var(--red-deep); }
.field .ro { font: 400 17px/1.4 var(--body); padding: 7px 0 6px; border-bottom: 1.5px solid var(--rule); }

/* choice rows (radio-like) and chips */
.choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; cursor: pointer; }
.choice i { width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 50%; margin-top: 4px; display: block; box-sizing: border-box; }
.choice.on i { border-width: 6px; border-color: var(--green-deep); }
.choice b { font-weight: 500; display: block; }
.choice .why { color: var(--ink-3); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip { font: 500 15px/1 var(--display); padding: 9px 12px; border: 1.5px solid var(--rule); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.chip.on { background: var(--green-soft); border-color: var(--green-deep); color: var(--green-deep); }

/* live lines — long jobs printed as lines in the customer's units */
.live { margin-top: 14px; font: 400 16px/1.6 var(--body); }
.live div { padding: 3px 0; color: var(--ink-2); animation: type var(--t-fast) var(--ease) both; }
.live .now { color: var(--ink); }
.live .ok { color: var(--green-deep); }
.live .bad { color: var(--red-deep); }
@keyframes type { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* bottom tab bar — 56 px on paper-2, four words. it follows the column to the middle of a
   wide screen, and min-height lets the home-indicator inset add to the bar instead of
   squeezing the four words inside a fixed 56 px. */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; min-height: var(--tab-h); max-width: var(--col); margin-inline: auto; box-sizing: border-box; background: var(--paper-2); border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; font: 500 13px/1.3 var(--body); color: var(--ink-3); padding-bottom: env(safe-area-inset-bottom); }
/* the whole cell is the target, not just the word: the bar is 56 px but the anchor inside
   it was 29 px, and this is the app's main navigation, at thumb height. */
.tabs a { color: inherit; text-decoration: none; display: flex; align-items: center;
  justify-content: center; min-height: var(--tab-h); padding: 6px 4px; }
.tabs a.on { color: var(--green-deep); }
/* no icons in the tab bar — the four Thai words carry it. Pages still contain
   empty <i></i> elements, so hide them here rather than assume the markup is gone. */
.tabs i { display: none; }

/* Billing overview: ruled lists with explicit actions, no implied payment state. */
.billing-intro{margin:8px 0 28px;color:var(--ink-3)}
.billing-section{margin-top:32px}
.billing-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.billing-section-head h2{font-size:22px}
.billing-section-head>span,.billing-caption{font-size:14px;color:var(--ink-3)}
.billing-section-head>span{white-space:nowrap}
.billing-caption{margin:12px 0}
.billing-list{list-style:none;padding:0;margin:0}
.billing-list>li{margin:0;padding:20px 0;border-bottom:1px solid var(--rule)}
.billing-machine,.billing-order{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.billing-identity{min-width:0;overflow-wrap:anywhere}
.billing-identity h3{font-size:18px}
.billing-identity p{margin:5px 0 0;font-size:14px;color:var(--ink-3)}
.billing-identity .billing-status{color:var(--ink)}
.billing-machine-action,.billing-order-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.billing-machine-action .num,.billing-order-action .num{font-size:22px;white-space:nowrap}
.billing-machine-action small{font-size:14px;font-weight:400;color:var(--ink-3)}
.billing-list .btn{margin:0;width:auto;min-width:112px;min-height:44px;padding:11px 14px;font-size:16px}
.billing-empty{color:var(--ink-3)}
.billing-empty a{display:block;padding:10px 0}
@media(max-width:360px){.billing-machine,.billing-order{gap:12px}.billing-list .btn{min-width:100px}.billing-machine-action .num,.billing-order-action .num{font-size:20px}}

/* Store catalogue: one selected EA, bounded ledger rows and plain-text paging. */
.store-products{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.store-products li{margin:0}
.store-product{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:58px;padding:9px 12px;text-align:left;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--rule);cursor:pointer}
.store-product[aria-pressed="true"]{border-left:3px solid var(--green-deep);padding-left:9px}
.store-product-main{min-width:0;overflow-wrap:anywhere}
.store-product-main b{display:block;font-weight:600}
.store-product-main small{display:block;color:var(--ink-3);font-size:13px}
.store-product-state{flex:0 0 auto;max-width:42%;color:var(--ink-2);font-size:13px;text-align:right}
.store-empty{padding:14px 0;color:var(--ink-3);border-bottom:1px solid var(--rule)}
.store-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;color:var(--ink-3);font-size:14px}
.store-pages button{min-height:44px;padding:8px 10px;background:transparent;color:var(--green-deep);border:0;border-bottom:1px solid var(--rule);cursor:pointer}
.store-pages button:disabled{color:var(--ink-3);cursor:default}
.store-disclaimer{margin-top:28px}
.store-machine-head{margin-top:24px}
.store-machine-head h3{font-size:18px}

/* receipt */
.receipt-year{overflow-wrap:anywhere}.receipt-year h2{font-size:20px;margin:0 0 12px}.app .receipt-year dl{grid-template-columns:minmax(0,1fr) auto}.receipt-year dd{text-align:right}.receipt-year .fact{margin:12px 0 0}
.receipt-document{padding:28px 0 12px;overflow-wrap:anywhere}
  .receipt-document .receipt-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:24px}
  .receipt-document .receipt-header img{display:block;object-fit:contain;object-position:left}
  .receipt-document .receipt-header p{margin:8px 0 0;font-size:14px}
  .receipt-document .receipt-title{text-align:right}.receipt-document .receipt-title h1{font-size:32px;line-height:1.25;margin:0}
  .receipt-document .receipt-number,.receipt-document .receipt-tax-id{font-family:var(--display);font-variant-numeric:tabular-nums}
  .receipt-document .receipt-seller{padding:16px 0;border-bottom:1px solid var(--rule)}.receipt-document .receipt-seller p{margin:0}.receipt-document .receipt-seller p+p{margin-top:4px;font-size:14px}.receipt-document .receipt-seller p>span:first-child{color:var(--ink-3)}.receipt-document .receipt-seller .receipt-legacy{margin-top:12px;font-weight:500}
  .receipt-document .receipt-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 0}
  .receipt-document .receipt-meta span,.receipt-document .receipt-period>span{font-size:14px;color:var(--ink-3)}
  .receipt-document .receipt-meta p{margin:4px 0 0;font-weight:600}.receipt-document .receipt-meta>div:last-child{text-align:right}
  .receipt-document table{border-collapse:collapse;width:100%;margin:0}.receipt-document th{font-size:14px;font-weight:500;border-bottom:1px solid var(--ink);padding:12px 0;text-align:left}
  .receipt-document td{padding:20px 0;vertical-align:top}.receipt-document th:last-child,.receipt-document td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
  .receipt-document td p{margin:4px 0 0;font-size:14px;color:var(--ink-3)}
  .receipt-document td:last-child,.receipt-document dd{font-family:var(--display);font-variant-numeric:tabular-nums}
  .receipt-document .receipt-period{border-bottom:1px solid var(--ink);padding-bottom:24px}.receipt-document .receipt-period p{margin:4px 0 0;font-size:15px}
  .receipt-document .receipt-totals{max-width:360px;margin:24px 0 32px auto}.receipt-document .receipt-totals>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:6px 0}
  .receipt-document dd{margin:0;text-align:right}.receipt-document .receipt-paid{border-top:2px solid var(--ink);margin-top:12px;padding-top:16px!important;font-weight:600}.receipt-document .receipt-paid dd{font-size:32px;line-height:1.2}.receipt-document .receipt-paid small{display:block;font-size:14px;font-weight:400}
  .receipt-document footer{border-top:1px solid var(--ink);padding-top:20px}.receipt-document footer h2{font-size:16px;margin:0 0 12px}
  .receipt-document .receipt-references{margin:0}.receipt-document .receipt-references>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;margin:6px 0;font-size:14px}.receipt-document .receipt-references dd{font-family:inherit}
  .receipt-document .receipt-note{font-size:14px;color:var(--ink-3);margin:20px 0 0}
  @media(max-width:440px){.receipt-document .receipt-title h1{font-size:28px}.receipt-document .receipt-header{gap:16px}.receipt-document .receipt-header img{width:100px}.receipt-document .receipt-meta{grid-template-columns:1fr}.receipt-document .receipt-meta>div:last-child{text-align:left}.receipt-document .receipt-references>div{grid-template-columns:1fr;gap:2px;margin-bottom:12px}.receipt-document .receipt-references dd{text-align:left}.receipt-document .receipt-totals{max-width:none}}
  @media print{.receipt-document{padding:0;break-inside:avoid}.receipt-document .receipt-meta{grid-template-columns:1fr 1fr}.receipt-document .receipt-meta>div:last-child{text-align:right}.receipt-document .receipt-references>div{grid-template-columns:150px minmax(0,1fr)}.receipt-document .receipt-references dd{text-align:right}.receipt-document .receipt-totals{max-width:360px}}
  @media print{.receipt-document .receipt-header{padding-bottom:12px}.receipt-document .receipt-seller{padding:12px 0}.receipt-document .receipt-meta{padding:12px 0}.receipt-document td{padding:12px 0}.receipt-document .receipt-period{padding-bottom:12px}.receipt-document .receipt-totals{margin:16px 0 20px auto}.receipt-document footer{padding-top:12px}}
.receipt-actions{border-top:1px solid var(--ink);margin-top:24px;padding-top:16px;display:flex;flex-wrap:wrap;gap:12px}
.receipt-actions p{flex-basis:100%;margin:0}.receipt-actions .btn{width:auto;flex:1 1 200px;margin:0}
@media print{.receipt-actions,.billing-back{display:none!important}body:has(.receipt-document){background:var(--qr-plate)}body:has(.receipt-document) main.app{max-width:none;padding:0;margin:0} @page{size:A4;margin:18mm}}
.receipt-details span { overflow-wrap: anywhere; }
@media print {
  body:has(.receipt-details) .btn, body:has(.receipt-details) .tabs { display: none !important; }
  .receipt-details { break-inside: avoid; }
}
.stamp { display: inline-block; border: 2px solid var(--green); color: var(--green-ink); font: 700 18px/1 var(--display); padding: 6px 10px; border-radius: 2px; letter-spacing: .02em; margin: 8px 0 4px; }
.tear { border-top: 1px dashed var(--rule); margin: 16px calc(-1 * var(--gutter)) 0; }
.plate { background: var(--qr-plate); padding: 16px; margin: 16px auto; width: min(260px, 100%); box-sizing: border-box; border: 1px solid var(--rule); }
.plate svg, .plate img { display: block; width: 100%; height: auto; }

/* bottom sheet */
.sheet-bg { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-sheet); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: var(--col); margin-inline: auto; box-sizing: border-box; background: var(--paper); border-top: 1.5px solid var(--ink); padding: 16px var(--gutter) calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform var(--t-sheet) var(--ease); }
.sheet-open .sheet { transform: none; }
.sheet-open .sheet-bg { opacity: 1; pointer-events: auto; }

.toast { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--tab-h) + 12px); max-width: 680px; margin-inline: auto; background: var(--ink); color: var(--paper); font: 500 15px/1.4 var(--body); padding: 10px 14px; border-radius: 4px; opacity: 0; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-fast); pointer-events: none; }
.toast.on { opacity: 1; transform: none; }

/* the one dark object: the MetaTrader console */
.console { background: var(--console); color: var(--console-ink); font: 400 13px/1.4 var(--display); padding: 12px; min-height: 200px; border-radius: 2px; }

/* landing page */
.lp section { padding: 48px 0 0; }
.lp h1 { font-size: 34px; }
.lp .lead { font-size: 18px; color: var(--ink-2); max-width: 600px; }
.lp .n490 { font: 700 84px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp .btn { max-width: 420px; }
.lp .two { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
.lp .cmp { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.lp .cmp.head { color: var(--ink-3); font-size: 13px; padding: 4px 0 6px; }
.lp .cmp b { font-family: var(--display); font-weight: 600; }
.lp .quote { border-left: 1.5px solid var(--ink); padding: 4px 14px; margin: 14px 0; font-size: 15px; color: var(--ink-2); }
.lp .faq dt { font: 500 17px/1.5 var(--body); margin-top: 14px; }
.lp .faq dd { margin: 2px 0 0; color: var(--ink-2); }
.lp .topnav { display: flex; gap: 18px; font: 500 15px/1.4 var(--body); }
.lp .topnav a { color: var(--ink-2); text-decoration: none; }
.lp footer { margin-top: 56px; padding: 14px 0 40px; border-top: 1.5px solid var(--ink); font-size: 14px; color: var(--ink-3); }
.lp .shots { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 4px; scroll-snap-type: x mandatory; }
.lp .shot { flex: 0 0 240px; scroll-snap-align: start; border: 1.5px solid var(--ink); border-radius: 22px; padding: 14px 14px 0; background: var(--paper); box-sizing: border-box; overflow: hidden; }
@media (min-width: 640px) { .lp .two { grid-template-columns: 1fr 1fr; } }

@media (min-width: 720px) { .toast { left: var(--gutter); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* touch targets for the inline text links. these are words in a line, 20–23 px tall, which is
   too small to hit accurately with a thumb. growing their padding would move the layout, so the
   hit area is widened by an invisible overlay instead and nothing shifts by a pixel.
   (min-height on .btn.quiet is safe — it is already a block on its own line.) */
.lp .topnav a, .lp footer .links a, .top .r, .btn.quiet { position: relative; }
.lp .topnav a::after, .lp footer .links a::after, .top .r::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.btn.quiet { min-height: 44px; display: flex; align-items: center; }


/* the three phone shots are 240 px each, 752 px side by side, and the reading column is 680 —
   so on a phone the strip is a swipe carousel, which is right, but on a desktop with 360 px
   spare on either side the third card was simply cut in half. where there is room, the strip
   reaches a little past the column and shows all three whole. */
@media (min-width: 820px) {
  .lp .shots { width: 752px; margin-inline: -36px; }
}
/* Backoffice EA catalogue. Keep prototype and web stylesheets identical. */
/* Customer store navigation and filters use the same ledger hierarchy. */
.store-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.store-heading > a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 44px; }
.store-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.store-links { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 20px; }
.store-links a { min-height: 44px; display: flex; align-items: center; }
[data-store-licences] .billing-identity h3 a { color: var(--ink); }
.catalogue { max-width: 1040px; }
.catalogue .notice { color: var(--green-ink); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.catalogue .heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; padding: 8px 0 20px; }
.catalogue .heading .btn { margin: 0; }
.catalogue .compact { width: auto; min-width: 100px; margin: 0; padding: 10px 16px; font-size: 16px; }
.catalogue .filters { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px; gap: 12px 20px; padding: 4px 0 18px; border-bottom: 2px solid var(--ink); }
.catalogue .field { margin: 0; }
.catalogue .field input, .catalogue .field select { min-height: 44px; }
.catalogue .result-count { padding: 10px 0; }
.catalogue .entry { border-top: 1px solid var(--rule); padding: 18px 0; overflow-wrap: anywhere; }
.catalogue .entry:first-child { border-top: 0; }
.catalogue .entry-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
.catalogue .identity h2 { font-size: 20px; }
.catalogue .entry-meta { display: flex; flex-direction: column; align-items: end; white-space: nowrap; line-height: 1.4; }
.catalogue .entry-meta strong { font-weight: 600; color: var(--ink-2); }
.catalogue .entry-meta strong.enabled { color: var(--green-ink); }
.catalogue .detail-line { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0; font-size: 14px; color: var(--ink-3); }
.catalogue .entry-actions { display: flex; align-items: center; gap: 18px; }
.catalogue summary { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.catalogue .history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 16px 0; }
.catalogue .history h3 { font-size: 16px; }
.catalogue .history p { font-size: 14px; margin: 4px 0; }
.catalogue .editor { border-block: 1px solid var(--ink); padding: 18px 0; margin: 0 0 20px; }
.catalogue .editor.inline { border-bottom: 0; margin: 18px 0 0; padding-bottom: 0; }
.catalogue .editor h2 { font-size: 20px; }
.catalogue .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 14px; }
.catalogue .wide { grid-column: 1 / -1; }
.catalogue .switch { display: flex; align-items: center; gap: 10px; margin-top: 18px; cursor: pointer; }
.catalogue .switch input { width: 20px; height: 20px; accent-color: var(--green-deep); }
.catalogue .save { max-width: 320px; }
.catalogue .empty { padding: 24px 0; color: var(--ink-3); }
@media (max-width: 620px) {
  .catalogue .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue .filters .field:first-child { grid-column: 1 / -1; }
  .catalogue .history { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .catalogue .entry-main { gap: 8px; }
  .catalogue .entry-meta { font-size: 14px; }
  .catalogue .fields { grid-template-columns: 1fr; }
  .catalogue .wide { grid-column: auto; }
}
/* Authenticated MetaTrader screen: the native framebuffer, inside the existing paper layout. */
.screen-heading { margin: 24px 0 8px; }
.screen-heading h1 { margin: 0; }
.screen-toolbar { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.screen-toolbar .btn { width: auto; min-height: 44px; padding: 12px 20px; }
.screen-canvas { height: min(68vh, 720px); min-height: 320px; overflow: hidden; border-block: 1px solid var(--rule); margin-block: 16px; }
.screen-canvas.connected { background: var(--ink); }
.screen-canvas:empty::before { content: 'หน้าจอจะแสดงที่นี่เมื่อเชื่อมต่อ'; display: block; padding-block: 32px; color: var(--muted); }
@media (max-width: 600px) {
  .screen-canvas { min-height: 260px; height: 60vh; }
  .screen-toolbar .btn { flex: 1; }
}