/* ============================================================================
 * deck-core.css — ระบบ presentation กลางของ AI-Content (ใช้ร่วมทุกโปรเจค)
 * stage 1920×1080 ย่อ/ขยายตามจอ · slide/typography/card/chip/btn/nav/progress/reveal
 * ธีมต่อโปรเจค: override ตัวแปร --accent / --accent2 / --glow ใน <style> ของโปรเจค
 * ใช้คู่กับ deck-core.js + review-kanban.js
 * ==========================================================================*/
:root{
  --bg:#09090c; --bg2:#101016; --card:#15151c; --card2:#1b1b24; --line:#2a2a36; --line2:#3a3a4a;
  --fg:#f4f4f5; --muted:#a1a1aa; --dim:#71717a;
  --red:#e11d2e; --red2:#ff4d5e; --gold:#f5b301; --nv:#76b900;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --accent:var(--red); --accent2:var(--red2); --glow:rgba(225,29,46,.10);
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --sans:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;
}
/* ---- light theme: <html data-theme="light"> (deck-core.js ตั้งจาก ?theme=light หรือกด T) ----
   โปรเจคที่ hardcode สีมืดไว้ ให้ override เพิ่มใต้ :root[data-theme="light"] ในไฟล์ของโปรเจค */
:root[data-theme="light"]{
  --bg:#f6f6f2; --bg2:#ffffff; --card:#ffffff; --card2:#f0f0eb; --line:#e0e0d8; --line2:#c9c9c0;
  --fg:#18181b; --muted:#4b4b53; --dim:#6b6b73;
  --red2:#d4192b; --gold:#a16207; --nv:#4a7c00; --ok:#15803d; --warn:#b45309; --bad:#dc2626;
  --accent2:var(--red); --glow:rgba(225,29,46,.07);
}
:root[data-theme="light"] .slide::before{background-image:radial-gradient(rgba(0,0,0,.07) 1.2px,transparent 1.2px)}
:root[data-theme="light"] .card{background:var(--card);box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
:root[data-theme="light"] #nav{background:rgba(255,255,255,.9)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);overflow:hidden}
#viewport{position:fixed;inset:0;background:radial-gradient(1200px 600px at 80% -10%,var(--glow),transparent 60%),var(--bg)}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden;background:var(--bg);border-radius:6px}
:root[data-format="9x16"] #stage{width:1080px;height:1920px}   /* deck ที่ประกาศ data-formats="16x9 9x16" */
.slide{position:absolute;inset:0;padding:84px 110px 110px;display:flex;flex-direction:column;gap:28px;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.slide.active{opacity:1;visibility:visible}
.slide::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.2px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%)}
.slide>*{position:relative;z-index:1}
.brand{position:absolute;top:34px;right:110px;z-index:2;font-weight:800;letter-spacing:.5px;font-size:26px}
.brand i{font-style:normal;color:var(--red)}
.kicker{font-family:var(--mono),var(--sans);font-size:21px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent2);font-weight:600}
h1{font-size:92px;line-height:1.12;font-weight:800;letter-spacing:-.5px;text-wrap:balance}
h2{font-size:60px;line-height:1.18;font-weight:800;text-wrap:balance}
h3{font-size:32px;font-weight:700}
.lead{font-size:30px;line-height:1.55;color:var(--muted);max-width:1500px;text-wrap:pretty}
.lead b,.muted b{color:var(--fg);font-weight:600}
.muted{color:var(--muted)} .mono{font-family:var(--mono)}
.row{display:flex;gap:28px} .col{display:flex;flex-direction:column;gap:18px} .grow{flex:1}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 32px}
.chip{display:inline-flex;align-items:center;gap:10px;font-size:22px;padding:8px 18px;border-radius:999px;border:1px solid var(--line2);background:var(--card2);color:var(--fg);white-space:nowrap}
.tag{font-family:var(--mono);font-size:18px;padding:4px 12px;border-radius:8px;border:1px solid currentColor;display:inline-block}
.nv{color:var(--nv)} .gold{color:var(--gold)} .red{color:var(--red2)} .ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)} .acc{color:var(--accent2)}
.big{font-size:84px;font-weight:800;line-height:1;font-family:var(--mono);letter-spacing:-2px}
.btn{font:inherit;font-size:24px;color:var(--fg);background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:12px 24px;cursor:pointer;transition:all .2s}
.btn:hover{border-color:var(--accent2)}
.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.note{font-size:20px;color:var(--dim);line-height:1.5}
.pill-ok,.pill-warn,.pill-bad{font-size:20px;font-weight:700;padding:6px 14px;border-radius:10px}
.pill-ok{background:rgba(34,197,94,.14);color:var(--ok)} .pill-warn{background:rgba(245,158,11,.14);color:var(--warn)} .pill-bad{background:rgba(239,68,68,.14);color:var(--bad)}
.foot{position:absolute;left:110px;right:110px;bottom:40px;display:flex;justify-content:space-between;align-items:center;font-size:18px;color:var(--dim);z-index:2}
.opts{display:flex;flex-wrap:wrap;gap:12px}
input[type=range]{width:100%;accent-color:var(--accent)}
table.src{border-collapse:collapse;width:100%;font-size:24px}
table.src td,table.src th{border-bottom:1px solid var(--line);padding:18px 16px;text-align:left;vertical-align:top}
table.src th{color:var(--muted);font-weight:600}
/* nav (สร้างโดย deck-core.js) */
#nav{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;z-index:50;
  background:rgba(16,16,22,.85);border:1px solid var(--line);border-radius:999px;padding:6px 10px;backdrop-filter:blur(6px);font-family:var(--mono);font-size:14px}
#nav button{background:none;border:0;color:var(--fg);font-size:18px;cursor:pointer;padding:4px 10px;border-radius:999px}
#nav button:hover{background:var(--card2)}
#nav #revBtn.on{background:rgba(245,182,66,.18);color:#f5b642}
#progress{position:fixed;left:0;top:0;height:3px;background:var(--accent);z-index:60;transition:width .3s}
/* reveal */
.slide.active .rv{animation:rv .7s cubic-bezier(.22,1,.36,1) both}
.slide.active .rv:nth-child(2){animation-delay:.08s}.slide.active .rv:nth-child(3){animation-delay:.16s}
.slide.active .rv:nth-child(4){animation-delay:.24s}.slide.active .rv:nth-child(5){animation-delay:.32s}
.slide.active .rv:nth-child(6){animation-delay:.40s}
@keyframes rv{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.slide.active .rv{animation:none}.slide{transition:none}}