/* ═══ เจียงใหม่ไทม์ส — kiosk shell ("the press") ═══ */

:root{
  --ink:      #14110D;   /* press black, warm */
  --ink-2:    #1E1A14;
  --ink-3:    #2B261E;
  --newsprint:#E9E1CE;   /* the paper — appears on screen only as the product */
  --news-dim: #B9B09B;
  --stamp:    #C4372B;   /* registration red — screen only, never printed */
  --stamp-txt:#DB5847;   /* same ink, legible at caption sizes on dark */
  --plate:    #8A8172;
  --rule:     rgba(233,225,206,.14);
  --rule-hi:  rgba(233,225,206,.30);

  --display: 'Trirong', Georgia, 'Times New Roman', serif;
  --ui: 'IBM Plex Sans Thai', -apple-system, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --gut: clamp(20px, 3.4vw, 54px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

/* [hidden] ของเบราว์เซอร์เป็น UA style ซึ่ง author style ชนะเสมอไม่ว่า specificity
   เท่าไหร่ — คลาสไหนตั้ง display ไว้ ตั้ง hidden=true ก็ไม่หาย (เจอกับ countdown
   ที่ค้างเลข ๑ ตอนกดถ่ายใหม่ และ dev-row ที่ซ่อนไม่ลง) บังคับทับตรงนี้ทีเดียว */
[hidden]{ display:none !important; }

body{
  background: var(--ink);
  color: var(--newsprint);
  font-family: var(--ui);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* newsprint grain over the whole press */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.045;
  background-image:
    radial-gradient(circle at 1px 1px, #fff 1px, transparent 0),
    radial-gradient(circle at 3px 4px, #fff 1px, transparent 0);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: screen;
}

/* ── registration marks ── */
.reg{ position:fixed; width:34px; height:34px; color:var(--rule-hi); z-index:60; pointer-events:none; }
.reg-tl{ top:14px; left:14px } .reg-tr{ top:14px; right:14px }
.reg-bl{ bottom:14px; left:14px } .reg-br{ bottom:14px; right:14px }

/* ── plate rail ── */
.plate-rail{
  position:fixed; top:0; left:0; right:0; height:44px; z-index:55;
  display:flex; align-items:center; gap:18px;
  padding:0 62px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--plate);
  border-bottom:1px solid var(--rule);
  background:linear-gradient(var(--ink), rgba(20,17,13,.7));
}
.plate-bar{ display:flex; gap:2px; margin-left:auto; }
.plate-bar i{ width:16px; height:9px; display:block; background:var(--plate); opacity:.28 }
.plate-bar i:nth-child(1){opacity:.10} .plate-bar i:nth-child(2){opacity:.20}
.plate-bar i:nth-child(3){opacity:.34} .plate-bar i:nth-child(4){opacity:.50}
.plate-bar i:nth-child(5){opacity:.70} .plate-bar i:nth-child(6){opacity:1}
.plate-id{ margin-left:18px; color:var(--stamp-txt) }

/* ── screens ── */
#kiosk{ height:100%; position:relative; }
.screen{
  position:absolute; inset:44px 0 0;
  display:flex; flex-direction:column; align-items:center;
  padding: clamp(16px,2.4vh,34px) var(--gut) clamp(18px,2.6vh,34px);
  gap: clamp(14px,2vh,28px);
  animation: plate-in .42s cubic-bezier(.2,.7,.3,1) both;
}
.screen[hidden]{ display:none }
@keyframes plate-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.screen-head{ text-align:center; max-width:min(94%,860px) }
.screen-head h2{
  font-family:var(--display); font-weight:900; line-height:1.3;
  font-size: clamp(28px, 3.9vh, 54px); letter-spacing:-.01em;
}
.screen-sub{ margin-top:8px; color:var(--news-dim); font-size:clamp(14px,1.8vh,19px); font-weight:300 }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--stamp-txt); margin-bottom:14px;
}

.screen-foot{
  margin-top:auto; width:100%; max-width:820px;
  display:flex; gap:14px; align-items:stretch;
}
.screen-foot .btn-primary{ flex:1 }

/* ── buttons ── */
.btn{
  font-family:var(--ui); font-weight:600; cursor:pointer;
  border:1px solid var(--rule-hi); background:transparent; color:var(--newsprint);
  border-radius:2px; padding:20px 30px; font-size:19px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:background .16s, border-color .16s, transform .08s;
  min-height:74px;
}
.btn:hover{ background:var(--ink-3) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--stamp); outline-offset:3px }
.btn-en{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; font-weight:400 }
.btn-th{ font-size:1em }

.btn-primary{
  background:var(--newsprint); color:var(--ink); border-color:var(--newsprint);
}
.btn-primary:hover{ background:#fff; border-color:#fff }
.btn-primary .btn-en{ opacity:.5 }
.btn-primary:disabled{
  background:transparent; color:var(--plate); border-color:var(--rule);
  cursor:not-allowed;
}
.btn-primary:disabled:hover{ background:transparent }
.btn-ghost{ flex:0 0 auto; padding:20px 26px; font-weight:400; color:var(--news-dim) }
.btn-huge{ width:100%; max-width:820px; min-height:104px; font-size:26px; letter-spacing:.01em }
.btn-sim{ margin-top:20px; min-height:60px; font-size:16px; opacity:.85 }

/* ═══ 1 · attract ═══
   The live sheet sits on the press as a framed plate rather than a full-bleed
   wallpaper — it reads as machinery, and the type below stays on clean ink. */
[data-screen="attract"]{ justify-content:center; gap:clamp(20px,3.2vh,46px) }
.attract-view{
  width:100%; max-width:min(880px,88vw); aspect-ratio:4/3;
  border:1px solid var(--rule-hi); background:var(--ink-2);
  position:relative; overflow:hidden; flex:0 1 auto; min-height:0;
}
/* ข้อความอยู่ใน DOM ไม่ใช่ใน content: ของ CSS — ไม่งั้นแปลไม่ได้ */
.plate-label{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plate); background:var(--ink); padding:6px 12px;
  border-top:1px solid var(--rule); border-right:1px solid var(--rule);
}
.attract-view canvas{ width:100%; height:100%; object-fit:cover; opacity:.82 }
.attract-copy{ text-align:center }
.masthead-lg{
  font-family:var(--display); font-weight:900; line-height:1.24;
  font-size:clamp(44px, 7vh, 100px); letter-spacing:-.025em;
}
.masthead-lg span{ font-weight:400; font-style:italic; letter-spacing:-.01em }
.masthead-sub{
  margin-top:12px; font-family:var(--mono); font-size:clamp(10px,1.4vh,13px);
  letter-spacing:.3em; text-transform:uppercase; color:var(--news-dim);
  padding-top:14px; border-top:1px solid var(--rule); display:inline-block;
}
.attract-lead{
  margin-top:clamp(18px,2.8vh,36px); font-size:clamp(17px,2.1vh,25px);
  font-weight:300; line-height:1.6; color:var(--newsprint);
}
.attract-lead span{
  display:inline-block; margin-top:10px; font-family:var(--mono);
  font-size:.6em; letter-spacing:.1em; color:var(--plate); text-transform:uppercase;
}

/* ═══ 2 · pick a front page ═══
   การ์ดคือใบจริงย่อส่วน มีรูปของลูกค้าอยู่ในนั้น ไม่ใช่คำบรรยายว่าจะได้อะไร */
.tpl-grid{
  display:flex; gap:clamp(12px,1.6vw,22px); width:100%; max-width:1000px;
  justify-content:center; align-items:flex-start; flex:1; min-height:0;
}
.tpl-card{
  flex:1 1 0; min-width:0; max-width:340px;
  background:transparent; border:0; padding:0; cursor:pointer; color:inherit;
  font-family:var(--ui); display:flex; flex-direction:column; gap:12px;
  position:relative; transition:transform .12s;
}
.tpl-card:hover{ transform:translateY(-3px) }
.tpl-card:focus-visible{ outline:2px solid var(--stamp); outline-offset:5px }
.tpl-mini{
  width:100%; overflow:hidden; border:1px solid var(--rule);
  background:var(--newsprint); transition:border-color .14s, box-shadow .14s;
  position:relative;
}
/* ใบถูก scale ด้วย transform จากมุมซ้ายบน กล่องจึงต้องถูกตั้งขนาดเอง */
.tpl-mini > .paper, .paper-fit > .paper{ position:absolute; top:0; left:0 }
.paper-fit{ position:relative; overflow:hidden; flex:0 0 auto }
.tpl-card[aria-pressed="true"] .tpl-mini{
  border-color:var(--newsprint);
  box-shadow:0 0 0 3px var(--newsprint), 0 16px 34px rgba(0,0,0,.55);
}
.tpl-card[aria-pressed="true"]::after{
  content:'เลือกแล้ว'; position:absolute; top:0; right:0; z-index:2;
  background:var(--stamp); color:#fff; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; padding:6px 10px;
}
.tpl-name{ display:flex; flex-direction:column; gap:3px; text-align:left }
.tpl-name b{ font-family:var(--display); font-weight:900; font-size:clamp(17px,2.1vh,23px); line-height:1.35 }
.tpl-name i{
  font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stamp-txt);
}

/* ═══ 3 · shoot ═══
   The plate is 5:3 because the printed photo is 5:3. What you frame here is
   exactly the crop that reaches the sheet — no surprise between the two. */
.screen-shoot{ padding-top:clamp(14px,2vh,28px) }
.shoot-stage{
  position:relative; flex:1; width:100%;
  display:flex; align-items:center; justify-content:center; min-height:0;
}
.shoot-plate{
  position:relative; width:100%; max-width:min(1100px,100%);
  aspect-ratio:5/3; max-height:100%; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--rule-hi);
}
#liveCanvas{ width:100%; height:100%; object-fit:cover; display:block }
.shoot-corners{ position:absolute; inset:0; pointer-events:none }
.shoot-corners::before, .shoot-corners::after{
  content:''; position:absolute; width:30px; height:30px; border:3px solid var(--stamp);
}
.shoot-corners::before{ top:10px; left:10px; border-right:0; border-bottom:0 }
.shoot-corners::after{ bottom:10px; right:10px; border-left:0; border-top:0 }
.shoot-hint{
  position:absolute; bottom:0; left:0;
  font-size:15px; font-weight:300; background:var(--ink);
  padding:10px 20px; border-top:1px solid var(--rule); border-right:1px solid var(--rule);
}
.shoot-nocam{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:12px; color:var(--stamp-txt);
  background:rgba(20,17,13,.94); padding:9px 16px; border:1px solid var(--stamp); z-index:3;
}
.countdown{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(20,17,13,.55); z-index:2;
}
.countdown span{
  font-family:var(--display); font-weight:900; font-size:min(26vh,240px); line-height:1;
  color:var(--newsprint); animation:dot-pop .55s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes dot-pop{ 0%{ transform:scale(.45); opacity:0 } 26%{ transform:scale(1.06); opacity:1 } 40%,100%{ transform:scale(1); opacity:1 } }
.btn-shutter{ font-size:23px }

/* ═══ 4 · review ═══ */
.review-body{
  display:flex; gap:clamp(20px,3vw,48px); width:100%; max-width:1100px; flex:1;
  align-items:center; justify-content:center; flex-wrap:wrap; min-height:0;
}
.paper-preview{
  flex:1 1 440px; max-width:640px; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.6));
}
.qty-panel{ flex:1 1 300px; max-width:400px; min-width:0 }
.qty-label{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--plate) }
.qty-label span{ display:block; opacity:.5; margin-top:2px }
.qty-stepper{ display:flex; align-items:center; gap:10px; margin:16px 0 }
.qty-btn{
  width:78px; height:78px; flex:0 0 auto; font-size:34px; line-height:1;
  background:var(--ink-2); color:var(--newsprint); border:1px solid var(--rule-hi);
  border-radius:2px; cursor:pointer; font-family:var(--ui);
}
.qty-btn:hover{ background:var(--ink-3) }
.qty-btn:focus-visible{ outline:2px solid var(--stamp); outline-offset:3px }
.qty-num{
  flex:1; text-align:center; font-family:var(--display); font-weight:900;
  font-size:64px; line-height:1;
}
.qty-hint{ font-size:14px; font-weight:300; color:var(--news-dim); line-height:1.7 }
.price-sheet{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:13px;
}
.price-sheet div{ display:flex; justify-content:space-between; padding:7px 0; color:var(--plate) }
.price-sheet div.total{ color:var(--newsprint); font-size:19px; border-top:1px solid var(--rule); margin-top:8px; padding-top:14px }

/* ═══ 5 · pay ═══ */
.pay-body{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:6px }
.qr-plate{ padding:20px; background:var(--newsprint); border-radius:2px }
.qr{ width:min(38vh,300px); aspect-ratio:1; image-rendering:pixelated }
.pay-total{ font-family:var(--display); font-weight:900; font-size:clamp(40px,6vh,72px); margin-top:22px }
.pay-note{ text-align:center; font-size:15px; font-weight:300; color:var(--news-dim); line-height:1.8 }

/* ═══ 6 · printing + digital copy ═══
   ใบกระดาษกับไฟล์ดิจิทัลคือของสองชิ้นจากรายการเดียว — แท่นพิมพ์บอกว่ากำลังทำงานอยู่
   ส่วน QR คือสิ่งเดียวที่ลูกค้าต้องลงมือทำ เลยให้มันเป็นพระเอก */
.press{
  position:relative; width:100%; max-width:720px; height:74px; flex:0 0 auto;
  overflow:hidden; border:1px solid var(--rule); background:var(--ink-2);
}
.press-sheet{
  position:absolute; top:10px; height:52px; width:38px; background:var(--newsprint);
  animation:feed 2.4s linear infinite;
}
.press-sheet.s2{ animation-delay:1.2s }
@keyframes feed{ from{ left:-8% } to{ left:104% } }
.press-roller{
  position:absolute; inset:auto 0 0 0; height:10px;
  background:repeating-linear-gradient(90deg,var(--ink-3) 0 8px,var(--ink-2) 8px 16px);
  border-top:1px solid var(--rule);
}
.press-label{
  position:absolute; left:0; top:0; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plate); background:var(--ink); padding:5px 11px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.done-body{
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.grab{ width:100%; max-width:460px; text-align:center }
.grab-title{ font-family:var(--display); font-weight:900; font-size:clamp(25px,3.2vh,36px); line-height:1.3 }
.grab-sub{ font-size:15px; font-weight:300; color:var(--news-dim); margin:10px 0 20px; line-height:1.7 }
.grab .qr-plate{ display:inline-block; padding:18px; background:var(--newsprint); border-radius:2px }
.grab canvas{ display:block; width:min(38vh,300px); height:auto; image-rendering:pixelated }
.grab-note{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--plate);
  margin-top:16px; line-height:1.7; word-break:break-all;
}
.grab-note.ready{ color:var(--stamp-txt) }
@media (prefers-reduced-motion:reduce){ .press-sheet{ animation:none; left:30% } }

.ticket{ font-family:var(--mono); font-size:14px; letter-spacing:.16em; color:var(--plate); text-transform:uppercase }
.ticket strong{ color:var(--stamp-txt); font-size:22px; letter-spacing:.1em }

/* ═══ dev bar ═══ */
#devbar{
  position:fixed; right:0; bottom:0; z-index:80; width:min(290px,80vw);
  font-family:var(--mono); font-size:11px; color:var(--plate);
}
#devToggle{
  width:100%; background:var(--ink-3); color:var(--plate); border:1px solid var(--rule);
  border-right:0; border-bottom:0; padding:7px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
}
.dev-body{
  background:var(--ink-2); border:1px solid var(--rule); border-right:0; border-bottom:0;
  padding:14px; display:flex; flex-direction:column; gap:11px;
}
#devbar.closed .dev-body{ display:none }
.dev-row{ display:flex; flex-direction:column; gap:5px }
.dev-row label{ letter-spacing:.1em; text-transform:uppercase; font-size:10px }
.dev-row b{ color:var(--newsprint); font-weight:500 }
.dev-row input[type=range]{ width:100%; accent-color:var(--stamp) }
.seg{ display:flex; gap:4px }
.seg button{
  flex:1; padding:6px; background:transparent; color:var(--plate);
  border:1px solid var(--rule); cursor:pointer; font-family:var(--mono); font-size:11px;
}
.seg button.on{ background:var(--newsprint); color:var(--ink); border-color:var(--newsprint) }
.ink-meter{ height:7px; background:var(--ink); border:1px solid var(--rule) }
.ink-meter span{ display:block; height:100%; width:0; background:var(--stamp); transition:width .3s }
.dev-ink{ position:relative }
.dev-ink b{ position:absolute; right:0; top:0; font-size:11px }
.dev-actions{ flex-direction:row; gap:5px }
.dev-actions button{
  flex:1; padding:8px 4px; background:var(--ink-3); color:var(--newsprint);
  border:1px solid var(--rule); cursor:pointer; font-family:var(--mono); font-size:10px;
}
.dev-actions button:hover{ background:var(--rule) }
.dev-note{ line-height:1.6; opacity:.62; font-size:10px }

/* the paper only exists on screen inside the preview; full page is print-only */
#paperMount{ position:fixed; left:-99999px; top:0 }

@media print{
  #kiosk, #devbar, body::after, .reg, .plate-rail{ display:none !important }
  #paperMount{ position:static; left:auto }
  html,body{ overflow:visible; background:#fff; height:auto }
}

/* landscape desktop: keep it usable while designing */
/* portrait kiosk: one column of decisions, biggest thing first */
@media (max-aspect-ratio:3/4){
  .tpl-grid{ align-items:center }

  .review-body{ flex-direction:column; flex-wrap:nowrap; gap:clamp(16px,2.4vh,32px) }
  .paper-preview{ flex:1 1 auto; width:100%; max-width:100% }
  .qty-panel{ flex:0 0 auto; width:100%; max-width:640px; margin:0 auto }
  .qty-panel .qty-label{ display:none }
  .qty-stepper{ margin:0 0 14px }
  .price-sheet{ margin-top:16px; padding-top:14px }
}

/* narrow screens: the press rail must stay one line */
@media (max-width:620px){
  .plate-rail{ padding:0 44px; font-size:9px; gap:10px; letter-spacing:.1em }
  .plate-bar{ display:none }
  .plate-id{ margin-left:auto }
  .reg{ width:24px; height:24px }
}

/* จอแคบ: การ์ดเรียงลง แต่ยังต้องเห็นใบจริง เลยวางใบไว้ข้างชื่อ */
@media (max-width:720px){
  .tpl-grid{ flex-direction:column; align-items:stretch; justify-content:center }
  .tpl-card{ flex:0 0 auto; max-width:100%; flex-direction:row; align-items:center; gap:16px }
  .tpl-mini{ flex:0 0 132px; width:132px }
  .tpl-name{ flex:1; min-width:0 }
  .tpl-card[aria-pressed="true"]::after{ top:auto; bottom:0; right:0 }
}

/* จอสั้น (โน้ตบุ๊กแนวนอน): อย่าให้ใบสูงจนดันปุ่มตกจอ */
@media (max-height:820px) and (min-width:721px){
  .tpl-mini{ max-height:52vh }
}

/* ── ผู้ใช้เลือกภาษาเอง ไม่ใช่ตั้งไว้ในแถบ dev ── */
.lang-pick{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(18px,2.6vh,32px);
}
.lang-pick button{
  font-family:var(--ui); font-size:17px; font-weight:600; cursor:pointer;
  background:transparent; color:var(--news-dim);
  border:1px solid var(--rule); border-radius:2px; padding:12px 24px;
  transition:color .15s, border-color .15s, background .15s;
}
.lang-pick button:hover{ color:var(--newsprint); border-color:var(--rule-hi) }
.lang-pick button:focus-visible{ outline:2px solid var(--stamp); outline-offset:3px }
.lang-pick button[aria-pressed="true"]{
  background:var(--newsprint); color:var(--ink); border-color:var(--newsprint);
}

/* จอตู้ก็ต้องเปลี่ยนฟอนต์ตามภาษา ไม่ใช่แค่ใบกระดาษ */
html[data-lang="zh"]{
  --display: 'Noto Serif SC', 'Songti SC', serif;
  --ui: 'Noto Sans SC', 'PingFang SC', sans-serif;
}