/* p3_jmarket.css — the journal's Market page (mockup p3_jmarket B) and Bot report page + popup (p3_jreport A), js/p3_jmarket.js.
   Sizes from the mockups (1536x1024, the journal's window measured in mockup px x 1.055 = u). The journal takes each
   mockup's window size while one of these pages is open (:has() on the page's data-tab); phones keep the full sheet. */

/* ---------------- the window: one size for every journal page, see css/p3_journal.css ---------------- */
#hb-page[data-tab="market"] { padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); }
#hb-page[data-tab="report"] { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }

/* =========================================== ตลาด =========================================== */
.p3m { color: var(--ink); }
.p3m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)); padding: 0 calc(8 * var(--u)); }
.p3m-ht h2 { margin: 0; font: 700 calc(44 * var(--u)) / 1.15 'Mitr', sans-serif; color: var(--ink); }
.p3m-ht p { margin: calc(1 * var(--u)) 0 0; font: 500 calc(22 * var(--u)) / 1.3 'Mitr', sans-serif; color: #6a6078; }
.p3m-coins { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u));
  border-radius: 99px; background: #fffaf0; border: calc(3 * var(--u)) solid #d4c6a6; }
.p3m-coins img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.p3m-coins b { font: 800 calc(22 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; font-variant-numeric: tabular-nums; }
.p3m-tabs { margin: calc(10 * var(--u)) calc(-14 * var(--u)) calc(14 * var(--u)); padding: 0 calc(14 * var(--u)); }
.p3m-tabs .kw-tab { min-width: calc(200 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: calc(23 * var(--u)); text-align: center; }

.p3m-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(364 * var(--u)); grid-template-areas: "want card" "pouch card"; grid-template-rows: auto 1fr;
  column-gap: calc(13 * var(--u)); row-gap: calc(14 * var(--u)); align-items: start; }
.p3m-want { grid-area: want; min-width: 0; }
.p3m-pouch { grid-area: pouch; min-width: 0; }
.p3m-card { grid-area: card; position: sticky; top: 0; height: calc(652 * var(--u)); display: flex; flex-direction: column; padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u));
  border-color: #1d2a55; box-shadow: inset 0 0 0 calc(4 * var(--u)) #3d7fd6, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.18); }

/* the week's buys */
.p3m-today .p3m-want, .p3m-bkl { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: #fff7e1; border: calc(3 * var(--u)) solid #f2c14a; }
.p3m-wh { font: 700 calc(24 * var(--u)) / 1.3 'Mitr', sans-serif; margin: 0 calc(4 * var(--u)) calc(10 * var(--u)); }
.p3m-wh span { color: #b8741a; }
.p3m-wrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.p3m-wc { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: calc(169 * var(--u));
  padding: calc(24 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); color: var(--ink); overflow: hidden;
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.08); font-family: 'Mitr', sans-serif; }
.p3m-wc > img { width: calc(92 * var(--u)); height: calc(88 * var(--u)); object-fit: contain; margin-bottom: auto; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(42, 36, 53, 0.25)); }
.p3m-wc b { max-width: 100%; font: 600 calc(16 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3m-wc b.long { font-size: calc(14 * var(--u)); letter-spacing: -0.01em; }
.p3m-wp { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font: 800 calc(25 * var(--u)) / 1.1 'Baloo 2', 'Mitr', sans-serif; font-variant-numeric: tabular-nums; }
.p3m-wp img { width: calc(27 * var(--u)); height: calc(27 * var(--u)); object-fit: contain; }
.p3m-wc:hover { filter: brightness(1.04); }
.p3m-wc.sel { box-shadow: 0 0 0 calc(4 * var(--u)) #7fcaf8, inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.08); }
.t-lav { background: linear-gradient(#efe5ff, #cdb6f7); }
.t-sky { background: linear-gradient(#eaf6ff, #b9dcfa); }
.t-cream { background: linear-gradient(#fffbf2, #efe4cb); }
.p3m-rib { position: absolute; left: 0; top: 0; z-index: 1; padding: calc(2 * var(--u)) calc(16 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u)); font: 800 calc(16 * var(--u)) / 1.1 'Baloo 2', 'Mitr', sans-serif; font-style: normal;
  color: var(--ink); background: linear-gradient(#ffe68e, #f2b632); border-right: calc(2.5 * var(--u)) solid var(--ink); border-bottom: calc(2.5 * var(--u)) solid var(--ink);
  border-bottom-right-radius: calc(12 * var(--u)); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }

/* the pouch */
.p3m-ph { font: 700 calc(24 * var(--u)) / 1.3 'Mitr', sans-serif; margin: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); }
.p3m-ph small { font: 500 calc(17 * var(--u)) 'Mitr', sans-serif; color: #7a6f86; margin-left: calc(6 * var(--u)); }
.p3m-sort { display: flex; gap: calc(4 * var(--u)); margin: 0 0 calc(8 * var(--u)); padding: 0 calc(4 * var(--u)) calc(4 * var(--u)); border-bottom: calc(2 * var(--u)) solid #d9cbae; }
.p3m-sort button { cursor: pointer; padding: calc(1 * var(--u)) calc(10 * var(--u)); border: 0; border-radius: 99px; background: transparent; color: #6a6078; font: 600 calc(16 * var(--u)) / 1.4 'Mitr', sans-serif; }
.p3m-sort button:first-child { margin-right: auto; }
.p3m-sort button:hover { background: rgba(127, 202, 248, 0.25); }
.p3m-sort button.on { background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; }
.p3m-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.p3m-pc { cursor: pointer; display: grid; grid-template-columns: calc(98 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(6 * var(--u)); min-width: 0; min-height: calc(160 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #8f826d; box-sizing: border-box; }
.p3m-pc:hover { background: #fffdf6; }
.p3m-pc.sel { border-color: #3b8fdc; box-shadow: 0 0 0 calc(3 * var(--u)) #a9dbff; background: #fff; }
.p3m-pc .ic { width: calc(98 * var(--u)); height: calc(98 * var(--u)); object-fit: contain; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(42, 36, 53, 0.2)); }
.p3m-pc .t { min-width: 0; display: flex; flex-direction: column; }
.p3m-pc .t b { font: 600 calc(18 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#journal .p3m-pc .t small { font: 400 calc(16 * var(--u)) / 1.25 'Mitr', sans-serif; color: #7a6f86; }
.p3m-pc .pr { display: flex; align-items: center; justify-content: space-between; margin-top: calc(2 * var(--u)); padding-right: calc(10 * var(--u)); }
.p3m-pc .pr em { font: 800 calc(27 * var(--u)) / 1.1 'Baloo 2', 'Mitr', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.p3m-pc .mini { display: flex; justify-content: space-between; padding-right: calc(14 * var(--u)); font: 500 calc(16 * var(--u)) / 1.2 'Baloo 2', 'Mitr', sans-serif; color: #6a6078; font-variant-numeric: tabular-nums; }
.p3m-sell { margin-top: calc(6 * var(--u)); height: calc(38 * var(--u)) !important; font-size: calc(19 * var(--u)) !important; padding: 0 calc(8 * var(--u)) !important; width: 100%; }
.p3m-sell.armed, .p3m-btns .armed { animation: p3m-pulse 0.8s ease-in-out infinite alternate; }
@keyframes p3m-pulse { to { filter: brightness(1.15); transform: scale(1.03); } }
em.up, .p3m-big.up em { color: #1e8a3a; } em.down, .p3m-big.down em { color: #c0392b; }
.p3m-ar { display: inline-block; width: calc(24 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.p3m-ar.up { background: #38b54a; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 0 var(--ink)); }
.p3m-ar.down { background: #e2483a; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.p3m-ar.eq { height: calc(6 * var(--u)); border-radius: 99px; background: #4b5577; }
.p3m-note { margin-top: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #e7f3ff; border: calc(3 * var(--u)) solid #9ccbf0; font: 400 calc(16 * var(--u)) / 1.45 'Mitr', sans-serif; color: #2f4a66; }
.p3m-q { display: inline-grid; place-items: center; flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #efe4c9; border: calc(3 * var(--u)) solid #cdbf9f;
  color: #9a8d74; font: 800 calc(24 * var(--u)) / 1 'Baloo 2', sans-serif; }
.p3m-none { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) dashed #d4c6a6;
  color: #7a6f86; font: 500 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif; }
.p3m-none.big { flex-direction: column; text-align: center; padding: calc(40 * var(--u)) calc(20 * var(--u)); font-size: calc(19 * var(--u)); }
.p3m-none.big .p3m-q { width: calc(64 * var(--u)); height: calc(64 * var(--u)); font-size: calc(36 * var(--u)); }

/* the dark card of the picked material */
.p3m-dtop { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.p3m-dic { position: relative; flex: none; display: grid; place-items: center; width: calc(112 * var(--u)); height: calc(118 * var(--u)); border-radius: calc(16 * var(--u)); border: calc(3 * var(--u)) solid #0f1428; overflow: hidden;
  box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.1); }
.p3m-dic img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(42, 36, 53, 0.25)); }
.p3m-dname { min-width: 0; display: flex; flex-direction: column; }
.p3m-dname b { font: 700 calc(32 * var(--u)) / 1.15 'Mitr', sans-serif; color: #fff; overflow-wrap: anywhere; }
.p3m-dname small { font: 500 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; color: #c9cdea; margin-top: calc(4 * var(--u)); }
.p3m-big { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)); }
.p3m-big img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; }
.p3m-big em { font: 800 calc(46 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.p3m-card .p3m-big.up em { color: #8ff08a; } .p3m-card .p3m-big.down em { color: #ff9a8a; }
.p3m-dl { display: grid; grid-template-columns: auto 1fr; column-gap: calc(22 * var(--u)); row-gap: calc(4 * var(--u)); margin: calc(16 * var(--u)) 0 0; padding: calc(14 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u));
  border-top: calc(2 * var(--u)) solid #46508a; border-bottom: calc(2 * var(--u)) solid #46508a; font: 500 calc(21 * var(--u)) / 1.35 'Mitr', sans-serif; }
.p3m-dl dt { color: #c9cdea; } .p3m-dl dd { margin: 0; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.p3m-dl dd small { font-weight: 400; color: #ff9a8a; font-size: calc(16 * var(--u)); }
.p3m-chh { margin: calc(14 * var(--u)) calc(6 * var(--u)) 0; font: 700 calc(21 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff; }
.p3m-chart { display: flex; align-items: stretch; gap: calc(8 * var(--u)); height: calc(124 * var(--u)); margin: calc(6 * var(--u)) calc(6 * var(--u)) 0; padding-bottom: calc(2 * var(--u)); }
.p3m-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.p3m-bar span { font: 600 calc(13 * var(--u)) / 1.2 'Baloo 2', sans-serif; color: #c9cdea; white-space: nowrap; }
.p3m-bar i { display: block; width: 100%; max-width: calc(30 * var(--u)); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; background: linear-gradient(#c6e6ff, #7fbdf2); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.25); }
.p3m-bar.now i { background: linear-gradient(#ffe68e, #f2b632); }
.p3m-bar.now span { color: #ffd873; }
.p3m-bar.none i { height: calc(4 * var(--u)); border-radius: 99px; background: repeating-linear-gradient(90deg, #4c5690 0 calc(4 * var(--u)), transparent calc(4 * var(--u)) calc(7 * var(--u))); box-shadow: none; }
.p3m-bar small { width: 100%; margin-top: calc(3 * var(--u)); padding-top: calc(3 * var(--u)); border-top: calc(3 * var(--u)) solid #7a86c4; text-align: center; font: 500 calc(13 * var(--u)) / 1.2 'Mitr', sans-serif; color: #9ca1c4; white-space: nowrap; }
.p3m-bar.now small { color: #ffd873; }
.p3m-chnote { display: block; margin: calc(6 * var(--u)) calc(6 * var(--u)) 0; font: 400 calc(15 * var(--u)) / 1.35 'Mitr', sans-serif; color: #9ca1c4; }
.p3m-foot { margin-top: auto; padding-top: calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.p3m-btns { display: flex; gap: calc(12 * var(--u)); }
.p3m-btns .kw-btn { flex: 1; height: calc(62 * var(--u)); font-size: calc(26 * var(--u)); border-radius: calc(16 * var(--u)); padding: 0 calc(8 * var(--u)); }
.p3m-quote { text-align: center; font: 400 calc(15 * var(--u)) / 1.3 'Mitr', sans-serif; color: #9ca1c4; }
.p3m-quote b { color: #ffd873; font-weight: 600; }
.p3m-walk { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 216, 115, 0.1); border: calc(2 * var(--u)) dashed rgba(255, 216, 115, 0.5); }
.p3m-walk small { font: 400 calc(16 * var(--u)) / 1.3 'Mitr', sans-serif; color: #ffe7a6; text-align: center; }
.p3m-walk .kw-btn { height: calc(42 * var(--u)); font-size: calc(18 * var(--u)); }
.p3m-walk.pulse { animation: p3m-flash 0.4s ease-in-out 3 alternate; }
@keyframes p3m-flash { to { background: rgba(255, 216, 115, 0.35); border-color: #ffd873; } }
.p3m-why { padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 154, 138, 0.12); color: #ffc2b8; font: 400 calc(16 * var(--u)) / 1.4 'Mitr', sans-serif; }
.p3m-src { padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(127, 202, 248, 0.1); color: #dfe3ff; font: 400 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif; }
.p3m-src b { color: #9fd0ff; font-weight: 600; margin-right: calc(4 * var(--u)); }
.p3m-cempty { align-items: center; justify-content: center; text-align: center; gap: calc(14 * var(--u)); }
.p3m-cempty .p3m-q { width: calc(76 * var(--u)); height: calc(76 * var(--u)); font-size: calc(42 * var(--u)); background: #2f365c; border-color: #4c5690; color: #9ca1c4; }
.p3m-cempty p { margin: 0; color: #c9cdea; font: 400 calc(18 * var(--u)) / 1.5 'Mitr', sans-serif; }

/* the broker and the player shops */
.p3m-lead { margin: calc(-4 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); font: 400 calc(16 * var(--u)) / 1.45 'Mitr', sans-serif; color: #6a6078; }
.p3m-list { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.p3m-lr { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #8f826d; }
.p3m-lr.done { opacity: 0.7; }
.p3m-lic { flex: none; display: grid; place-items: center; width: calc(66 * var(--u)); height: calc(66 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(#eaf6ff, #b9dcfa); border: calc(3 * var(--u)) solid var(--ink); }
.p3m-lic img { width: 84%; height: 84%; object-fit: contain; }
.p3m-lr .t { flex: 1; min-width: 0; }
.p3m-lr .t b { display: block; font: 600 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; }
#journal .p3m-lr .t small { display: block; font: 400 calc(16 * var(--u)) / 1.35 'Mitr', sans-serif; color: #7a6f86; }
.p3m-lr .kw-btn { height: calc(42 * var(--u)); font-size: calc(18 * var(--u)); }
.p3m-pbar { height: calc(12 * var(--u)); margin-top: calc(5 * var(--u)); border-radius: 99px; background: #e2d6bb; border: calc(2 * var(--u)) solid #cdbf9f; overflow: hidden; }
.p3m-pbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2b632, #ff8a3c); }
.p3m-sicons { display: flex; gap: calc(4 * var(--u)); margin-top: calc(4 * var(--u)); }
.p3m-sicons img, .p3m-sicons canvas { width: calc(34 * var(--u)); height: calc(34 * var(--u)); object-fit: contain; border-radius: calc(8 * var(--u)); background: #efe4c9; }
.p3m-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(92 * var(--u)), 1fr)); gap: calc(8 * var(--u)); }
.p3m-cell { position: relative; cursor: pointer; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); }
.p3m-cell img { width: 76%; height: 76%; object-fit: contain; }
.p3m-cell b { position: absolute; right: calc(5 * var(--u)); bottom: calc(1 * var(--u)); font: 800 calc(17 * var(--u)) / 1.2 'Baloo 2', sans-serif; color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.p3m-cell.sel { box-shadow: 0 0 0 calc(4 * var(--u)) #7fcaf8; }
.p3m-fl { display: block; margin: calc(12 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); font: 600 calc(18 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff; }
.p3m-fl small { font-weight: 400; color: #9ca1c4; font-size: calc(15 * var(--u)); }
.p3m-step { display: flex; gap: calc(6 * var(--u)); align-items: center; }
.p3m-in { flex: 1; min-width: 0; height: calc(44 * var(--u)); padding: 0 calc(10 * var(--u)); border: calc(3 * var(--u)) solid #0f1428; border-radius: calc(12 * var(--u)); background: #fffaf0; color: var(--ink);
  font: 700 calc(22 * var(--u)) 'Baloo 2', 'Mitr', sans-serif; text-align: center; box-sizing: border-box; }
.p3m-sb { cursor: pointer; flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid #0f1428; background: linear-gradient(#7fcaf8, #3b8fdc);
  color: #fff; font: 800 calc(24 * var(--u)) / 1 'Baloo 2', sans-serif; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
.p3m-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.p3m-chip { cursor: pointer; flex: none; height: calc(36 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 99px; border: calc(2.5 * var(--u)) solid #6d78b8; background: #2f365c; color: #eef0ff; font: 500 calc(16 * var(--u)) 'Mitr', sans-serif; }
.p3m-chip:hover { background: #3a4270; }
.p3m-bkcard .p3m-dl { margin-top: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(6 * var(--u)); border-bottom: 0; }
.p3m-sp.fast { color: #8ff08a; } .p3m-sp.mid { color: #ffd873; } .p3m-sp.slow { color: #ffb36b; } .p3m-sp.none { color: #ff9a8a; }
.p3m-wide { flex: 1; }
.p3m-state { margin-top: calc(4 * var(--u)); font: 700 calc(26 * var(--u)) / 1.2 'Mitr', sans-serif; color: #9ca1c4; }
.p3m-state.on { color: #8ff08a; }
.p3m-ul { margin: calc(16 * var(--u)) 0 0; padding: calc(12 * var(--u)) calc(6 * var(--u)) 0 calc(28 * var(--u)); border-top: calc(2 * var(--u)) solid #46508a; color: #dfe3ff; font: 400 calc(18 * var(--u)) / 1.6 'Mitr', sans-serif; }
.p3m-ul li::marker { color: #ffd873; }
.p3m-broker .p3m-card, .p3m-shops .p3m-card { height: auto; min-height: calc(560 * var(--u)); }

/* =========================================== สรุปบอท =========================================== */
.p3r { color: var(--ink); }
.p3r-strip { position: relative; margin-bottom: calc(16 * var(--u)); }
.p3r-strip > img { display: block; width: 100%; height: calc(207 * var(--u)); object-fit: cover; object-position: 50% 74%; box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(19 * var(--u)); background: #141a33; }
.p3r-cap { position: absolute; left: 50%; bottom: calc(-8 * var(--u)); transform: translateX(-50%); max-width: 90%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: calc(2 * var(--u)) calc(30 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid var(--ink); font: 600 calc(21 * var(--u)) / 1.45 'Mitr', sans-serif; color: var(--ink); }
.p3r-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(11 * var(--u)); }
.p3r-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: calc(146 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); box-sizing: border-box;
  border-radius: calc(16 * var(--u)); background: #f3e9d3; border: calc(3 * var(--u)) solid #dccca9; text-align: center; }
.p3r-tile img { height: calc(58 * var(--u)); max-width: 80%; object-fit: contain; }
.p3r-tile b { font: 800 calc(35 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #c9742b; font-variant-numeric: tabular-nums; margin-top: calc(2 * var(--u)); }
.p3r-tile span { font: 600 calc(20 * var(--u)) / 1.15 'Mitr', sans-serif; color: var(--ink); }
.p3r-tile small { font: 400 calc(17 * var(--u)) / 1.1 'Mitr', sans-serif; color: #4f4660; }
.p3r-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.p3r-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u)); height: calc(78 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: calc(16 * var(--u));
  border: calc(3 * var(--u)) solid var(--ink); overflow: hidden; box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.1); }
.p3r-pill.p3r-lv { background: linear-gradient(#b6e2ff, #5fb0f0); }
.p3r-pill.p3r-job { background: linear-gradient(#e8dcff, #a98ef0); }
.p3r-face { width: calc(70 * var(--u)); height: calc(70 * var(--u)); flex: none; border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink); background: #e4f2ff; box-sizing: border-box; }
.p3r-book { width: calc(78 * var(--u)); height: calc(70 * var(--u)); object-fit: contain; flex: none; }
.p3r-pt { font: 800 calc(40 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(7 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.p3r-pt i { font-style: normal; }
.p3r-pt em { font-style: normal; color: #ffd84a; }
.p3r-pill small { font: 600 calc(18 * var(--u)) 'Mitr', sans-serif; color: var(--ink); background: rgba(255, 255, 255, 0.6); border-radius: 99px; padding: 0 calc(10 * var(--u)); }
.p3r-pill s, .p3r-drop s { position: absolute; text-decoration: none; color: #fff; font-size: calc(26 * var(--u)); line-height: 1; text-shadow: 0 0 calc(6 * var(--u)) rgba(255, 255, 255, 0.9); pointer-events: none; }
.p3r-pill .sp1 { left: calc(14 * var(--u)); top: calc(8 * var(--u)); font-size: calc(18 * var(--u)); }
.p3r-pill .sp2 { right: calc(22 * var(--u)); top: calc(6 * var(--u)); color: #ffe68e; }
.p3r-pill .sp3 { right: calc(10 * var(--u)); bottom: calc(8 * var(--u)); font-size: calc(18 * var(--u)); }
.p3r-dh { margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); padding-left: calc(8 * var(--u)); border-left: calc(4 * var(--u)) solid #cdbf9f; font: 700 calc(28 * var(--u)) / 1.2 'Mitr', sans-serif; }
.p3r-dh b { font-weight: 700; }
.p3r-drops { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.p3r-drop { position: relative; display: flex; align-items: center; gap: calc(18 * var(--u)); min-height: calc(64 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(30 * var(--u));
  border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d9c9a6; overflow: hidden; }
.p3r-drop.rare { min-height: calc(74 * var(--u)); background: linear-gradient(90deg, #fff3c4, #ffe7a0 60%, #fff3c4); border-color: #e8b93a; box-shadow: inset 0 0 calc(18 * var(--u)) rgba(255, 255, 255, 0.7); }
.p3r-drop canvas { flex: none; width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
.p3r-drop.rare canvas { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
.p3r-drop .t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: calc(14 * var(--u)); flex-wrap: wrap; }
.p3r-drop .t b { font: 700 calc(29 * var(--u)) / 1.2 'Mitr', sans-serif; }
#journal .p3r-drop .t small, .p3r-drop .t small { font: 400 calc(16 * var(--u)) / 1.2 'Mitr', sans-serif; color: #7a6f86; }
.p3r-drop .sp1 { left: calc(110 * var(--u)); top: calc(6 * var(--u)); color: #ffe68e; text-shadow: 0 0 calc(5 * var(--u)) #fff; }
.p3r-drop .sp2 { right: calc(34 * var(--u)); top: calc(5 * var(--u)); color: #fff; font-size: calc(30 * var(--u)); }
.p3r-drop .sp3 { right: calc(70 * var(--u)); bottom: calc(5 * var(--u)); color: #fff; font-size: calc(20 * var(--u)); }
.p3r-more { padding: calc(4 * var(--u)) calc(10 * var(--u)); color: #7a6f86; font: 400 calc(16 * var(--u)) 'Mitr', sans-serif; }
.p3r-nodrop { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) dashed #d4c6a6;
  color: #7a6f86; font: 500 calc(18 * var(--u)) 'Mitr', sans-serif; }
.p3r-dark { margin-top: calc(10 * var(--u)); padding: calc(5 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; }
.p3r-line { display: flex; align-items: center; gap: calc(14 * var(--u)); min-height: calc(46 * var(--u)); }
.p3r-line + .p3r-line { border-top: calc(2 * var(--u)) solid #3a4170; }
.p3r-lic { flex: none; display: flex; gap: calc(6 * var(--u)); width: calc(96 * var(--u)); }
.p3r-lic img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; }
.p3r-line p { margin: 0; color: #eef0ff; font: 400 calc(19 * var(--u)) / 1.45 'Mitr', sans-serif; }
.p3r-line p b { color: #fff; font-weight: 600; }
.p3r-note { margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #e7f3ff; border: calc(3 * var(--u)) solid #9ccbf0; font: 400 calc(16 * var(--u)) / 1.45 'Mitr', sans-serif; color: #2f4a66; }
.p3r-ok { display: flex; justify-content: center; margin-top: calc(10 * var(--u)); }
.p3r-ok .kw-btn { min-width: calc(230 * var(--u)); height: calc(58 * var(--u)); font-size: calc(25 * var(--u)); border-radius: calc(16 * var(--u)); }
.p3r-prev { margin: calc(22 * var(--u)) 0 calc(10 * var(--u)); padding-top: calc(12 * var(--u)); border-top: calc(3 * var(--u)) dashed #d4c6a6; font: 700 calc(24 * var(--u)) 'Mitr', sans-serif; color: #6a6078; }
.p3r.live .p3r-strip > img { filter: saturate(1.1); }
/* the empty state */
.p3r-empty .p3r-strip > img { filter: brightness(0.75) saturate(0.9); }
.p3r-ecard { padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); border-radius: calc(18 * var(--u)); background: #fff7e1; border: calc(3 * var(--u)) solid #f2c14a; text-align: center; }
.p3r-ecard > b { display: block; font: 700 calc(26 * var(--u)) / 1.3 'Mitr', sans-serif; }
.p3r-ecard > p { margin: calc(6 * var(--u)) auto calc(14 * var(--u)); max-width: calc(760 * var(--u)); color: #6a6078; font: 400 calc(18 * var(--u)) / 1.55 'Mitr', sans-serif; }
.p3r-tile.ghost { background: #fffaf0; border-style: dashed; }
.p3r-tile.ghost img { opacity: 0.75; height: calc(56 * var(--u)); }
.p3r-tile.ghost b { color: #b9ad94; }
.p3r-ecard .p3r-tiles .p3r-tile.ghost { min-height: calc(146 * var(--u)); }
.p3r-pill.ghost { opacity: 0.6; filter: saturate(0.6); border-style: dashed; }
.p3r-pill.ghost .p3m-q { width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: calc(30 * var(--u)); background: #fffaf0; }
.p3r-ebtns { display: flex; justify-content: center; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); flex-wrap: wrap; }
.p3r-ebtns .kw-btn { height: calc(52 * var(--u)); font-size: calc(21 * var(--u)); padding: 0 calc(22 * var(--u)); }

/* "เยี่ยม! ไปต่อ" sits on the window's bottom edge (the mockup): the window lets it out; its corners keep their round */
html:not(.mob-port) #journal .hb-win:has(#hb-page[data-tab="report"]), html:not(.mob-port) .rp-pop.p3r-pop .rp-win { overflow: visible; }
html:not(.mob-port) #journal .hb-win:has(#hb-page[data-tab="report"]) .kw-title, html:not(.mob-port) .rp-pop.p3r-pop .kw-title { border-radius: calc(19 * var(--u)) calc(19 * var(--u)) 0 0; }
html:not(.mob-port) #journal .hb-win:has(#hb-page[data-tab="report"]) .hb-tabs { border-bottom-left-radius: calc(19 * var(--u)); }
html:not(.mob-port) #hb-page[data-tab="report"] .p3r-ok, html:not(.mob-port) .rp-pop.p3r-pop .p3r-ok { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(-34 * var(--u)); margin: 0; pointer-events: none; }
html:not(.mob-port) .p3r-ok .kw-btn { pointer-events: auto; box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.18), 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.3), 0 0 0 calc(4 * var(--u)) #f7efdc; }
html:not(.mob-port) #hb-page[data-tab="report"] { padding-bottom: calc(34 * var(--u)); }
html:not(.mob-port) .rp-pop.p3r-pop .rp-body { padding-bottom: calc(36 * var(--u)); }

/* the pop-up (report.js's .rp-pop) */
.rp-pop.p3r-pop .rp-win { width: calc(960 * var(--u)); max-width: 96vw; max-height: 94vh; }
.rp-pop.p3r-pop .rp-body { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }

/* =========================================== phones held upright =========================================== */
html.mob-port .p3m-head { padding: 0 calc(4 * var(--u)); }
html.mob-port .p3m-ht h2 { font-size: calc(36 * var(--u)); }
html.mob-port .p3m-ht p { font-size: calc(18 * var(--u)); }
html.mob-port .p3m-tabs { margin-left: calc(-12 * var(--u)); margin-right: calc(-12 * var(--u)); }
html.mob-port .p3m-tabs .kw-tab { min-width: 0; flex: 1 1 auto; height: calc(46 * var(--u)); }
html.mob-port .p3m-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "want" "card" "pouch"; grid-template-rows: auto; }
html.mob-port .p3m-card { position: static; height: auto !important; min-height: 0 !important; }
html.mob-port .p3m-wrow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(146 * var(--u)); overflow-x: auto; scrollbar-width: none; padding-bottom: calc(4 * var(--u)); }
html.mob-port .p3m-wrow::-webkit-scrollbar { display: none; }
html.mob-port .p3m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.mob-port .p3m-pc { grid-template-columns: calc(78 * var(--u)) minmax(0, 1fr); }
html.mob-port .p3m-pc .ic { width: calc(78 * var(--u)); height: calc(78 * var(--u)); }
html.mob-port .p3m-sort { flex-wrap: wrap; }
html.mob-port .p3m-sort button:first-child { margin-right: 0; }
html.mob-port .p3m-chart { height: calc(110 * var(--u)); }
html.mob-port .p3r-strip > img { height: calc(170 * var(--u)); }
html.mob-port .p3r-cap { font-size: calc(18 * var(--u)); padding: calc(2 * var(--u)) calc(16 * var(--u)); }
html.mob-port .p3r-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.mob-port .p3r-pills { grid-template-columns: minmax(0, 1fr); }
html.mob-port .p3r-drop { padding-left: calc(12 * var(--u)); }
html.mob-port .p3r-drop .t b { font-size: calc(24 * var(--u)); }
html.mob-port .p3r-lic { width: auto; flex-direction: column; }
html.mob-port .rp-pop.p3r-pop .rp-win { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
html.mob-port .rp-pop.p3r-pop { --u: calc(100vw / 500); }

/* ---------- small screens (1280 x 720 and less): the smallest labels stop at 11 px (as css/uifix.css does) ---------- */
html:not(.mob-port) .p3m-bar span, html:not(.mob-port) .p3m-bar small, html:not(.mob-port) .p3m-chnote, html:not(.mob-port) .p3m-quote,
html:not(.mob-port) .p3m-wc b, html:not(.mob-port) .p3m-rib, html:not(.mob-port) .p3m-sort button, html:not(.mob-port) .p3m-pc .mini,
html:not(.mob-port) #journal .p3m-pc .t small, html:not(.mob-port) .p3m-lead, html:not(.mob-port) #journal .p3r-drop .t small,
html:not(.mob-port) .p3m-walk small, html:not(.mob-port) .p3m-fl small { font-size: max(11px, calc(16 * var(--u))); }
html:not(.mob-port) .p3m-bar span, html:not(.mob-port) .p3m-bar small { font-size: max(10px, calc(13 * var(--u))); }
html:not(.mob-port) .p3m-wc b.long { font-size: max(10.5px, calc(14 * var(--u))); }