/* ============================================================
   Shared stylesheet for the Go teaching workspace.
   Every lesson and reference doc links this file.
   Design goals: readable Thai + code, prints cleanly, dark mode.
   ============================================================ */

:root {
  --bg:        #fdfcfa;
  --bg-soft:   #f4f1ec;
  --ink:       #1f2328;
  --ink-soft:  #55606b;
  --rule:      #ddd6cc;
  --accent:    #7c4dff;
  --accent-dk: #5c2fd6;
  --ok:        #1a7f4b;
  --ok-bg:     #e7f6ed;
  --bad:       #c0392b;
  --bad-bg:    #fdeceb;
  --warn:      #a8620a;
  --warn-bg:   #fdf3e3;
  --analogy:    #6b4fbb;
  --analogy-bg: #f1ecfd;
  --code-bg:   #22212c;
  --code-ink:  #e6e6f0;
  --maxw:      46rem;

  --font-text: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #16171b;
    --bg-soft:  #1e2026;
    --ink:      #e8e6e3;
    --ink-soft: #a3a8b0;
    --rule:     #33363d;
    --accent:   #a98bff;
    --analogy:   #b9a3ff;
    --analogy-bg:#241f36;
    --accent-dk:#c4b0ff;
    --ok:       #6ee7a8;
    --ok-bg:    #16321f;
    --bad:      #ff8b7d;
    --bad-bg:   #3a1d1a;
    --warn:     #ffc46b;
    --warn-bg:  #38290f;
    --code-bg:  #101018;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3rem 1.25rem 6rem;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

main, header, footer { max-width: var(--maxw); margin-inline: auto; }

/* ---------- Typography ---------- */

h1 {
  font-size: 2.1rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

h2 {
  font-size: 1.35rem;
  margin: 3rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}

h3 { font-size: 1.08rem; margin: 2rem 0 0.5rem; }

p  { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

a { color: var(--accent-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

strong { font-weight: 650; }

.kicker {
  font-family: var(--font-code);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.standfirst {
  font-size: 1.1rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-family: var(--font-code);
}

/* ---------- Code ---------- */

code {
  font-family: var(--font-code);
  font-size: 0.87em;
  background: var(--bg-soft);
  padding: 0.12em 0.36em;
  border-radius: 4px;
  /* ชื่อยาว ๆ อย่าง TESTCONTAINERS_DOCKER_SOCKET_OVERRIDE ต้องตัดบรรทัดได้
     ไม่งั้นบนจอมือถือมันดันขอบขวาจนทั้งหน้าเลื่อนแนวนอน */
  overflow-wrap: anywhere;
}

pre {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1rem 1.1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
/* ในบล็อกโค้ดไม่ตัดบรรทัด — ให้เลื่อนแนวนอนในกล่องตัวเองตามเดิม */
pre code { background: none; padding: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }

/* minimal syntax tint — applied by hand with spans */
.k  { color: #ff79c6; }  /* keyword  */
.s  { color: #8ee87a; }  /* string   */
.c  { color: #6f7787; }  /* comment  */
.n  { color: #7ad0ff; }  /* number/type */
.f  { color: #ffd479; }  /* func name */

/* ---------- Callouts ---------- */

.note, .warn, .win, .analogy, .jargon {
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  margin: 0 0 1.3rem;
  font-size: 0.95rem;
}
.note { background: var(--bg-soft);  border-left: 3px solid var(--ink-soft); }
.warn { background: var(--warn-bg);  border-left: 3px solid var(--warn); }
.win  { background: var(--ok-bg);    border-left: 3px solid var(--ok); }
/* กล่อง "เทียบให้เห็นภาพ" — ใช้เปรียบเทียบเรื่องเทคนิคกับของที่เจอในชีวิตจริง
   ต้องมองแยกจาก .note ได้ทันที เพราะผู้เรียนมือใหม่จะไล่หากล่องนี้ก่อน */
.analogy { background: var(--analogy-bg); border-left: 3px solid var(--analogy); }
.analogy > :last-child { margin-bottom: 0; }
/* กล่อง "ศัพท์ที่ต้องรู้" — ติดป้ายศัพท์เทคนิค *หลัง* อธิบายและยกตัวอย่างเสร็จแล้ว
   เพื่อให้ผู้เรียนเอาไปคุยกับ dev คนอื่นและกับ AI ได้ตรงคำ */
.jargon { background: var(--bg-soft); border-left: 3px solid var(--accent); }
.jargon > :last-child { margin-bottom: 0; }
/* ⚠️ ต้องมี overflow-wrap ที่นี่ด้วย ไม่ใช่แค่ที่ code{}
   เพราะ <dt> ใส่ font-code เองโดยไม่ได้ห่อ <code> ศัพท์ยาว ๆ ที่ไม่มีจุดให้ตัด
   อย่าง React.ButtonHTMLAttributes<HTMLButtonElement> (452px) จะดันขอบขวา
   จนทั้งหน้าเลื่อนแนวนอนบนจอ 380px (เจอจริงในบท 71) */
.jargon dt { font-family: var(--font-code); font-weight: 650; color: var(--accent-dk); margin-top: 0.5rem; overflow-wrap: anywhere; }
.jargon dt:first-of-type { margin-top: 0; }
.jargon dd { margin: 0.15rem 0 0; }
.note > :last-child, .warn > :last-child, .win > :last-child { margin-bottom: 0; }

.label {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  opacity: 0.85;
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}
th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th { font-weight: 650; background: var(--bg-soft); }
.table-wrap { overflow-x: auto; }

/* ---------- Memory diagram ---------- */

.diagram {
  font-family: var(--font-code);
  font-size: 0.78rem;
  line-height: 1.45;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 1.3rem;
}

/* ---------- Live demo (HTML/CSS lessons) ----------
   โค้ดชุดเดียวกับที่โชว์ในกล่อง <pre> ข้างบน เอามาเรนเดอร์จริงให้เห็นผล
   เนื้อในอยู่ใน <template> แล้ว assets/demo.js ย้ายไปใส่ <iframe> ให้

   <div class="demo" data-h="180">
     <template><style>…</style>…markup…</template>
   </div>

   ต้องเป็น iframe เพราะ lesson.css ตั้งสไตล์ p/a/ul/button/input ไว้หมดแล้ว
   ถ้าเรนเดอร์ในหน้าตรง ๆ ตัวอย่างจะโดนสไตล์ของหน้าทับจนสอนผิด
   ปิด JS แล้วกล่องจะไม่โผล่ (ตั้งใจ) เพราะโค้ดชุดเดียวกันอยู่ใน <pre> อยู่แล้ว
   ------------------------------------------------ */
.demo { margin: 0 0 1.3rem; }
.demo:not(.is-live) { display: none; }
.demo .demo-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #ffffff;
  /* iframe เป็น replaced element — ไม่มี line-height มาดันความสูงเกินที่วัดไว้ */
  vertical-align: top;
}
.demo::after {
  content: "ผลลัพธ์จริง";
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
@media print {
  /* iframe พิมพ์ออกมาไม่ได้เรื่องในเบราว์เซอร์ส่วนใหญ่ — ตัดทิ้งดีกว่าได้กล่องว่าง */
  .demo { display: none !important; }
}

/* ---------- Side-by-side comparison ----------
   วางโค้ด/เนื้อหาสองฝั่งเทียบกัน ยุบเหลือคอลัมน์เดียวบนจอแคบ

   <div class="compare">
     <div class="side"><h4>หัวข้อซ้าย</h4><pre>…</pre></div>
     <div class="side"><h4>หัวข้อขวา</h4><pre>…</pre></div>
   </div>

   ใส่ class "bad" / "good" ที่ .side เพื่อระบายสีขอบเตือน/ยืนยัน
   ------------------------------------------------ */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.3rem;
}
.compare .side { min-width: 0; display: flex; flex-direction: column; }
.compare .side > h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
}
.compare .side.bad  > h4 { color: var(--bad); border-color: var(--bad); }
.compare .side.good > h4 { color: var(--ok);  border-color: var(--ok); }
/* pre ต้องยืดเต็มคอลัมน์เพื่อให้สองฝั่งสูงเท่ากัน — ใช้ flex ไม่ใช่ height:100%
   เพราะ height:100% คิดจากความสูงของ .side ทั้งก้อน (รวม h4) โค้ดจึงล้นทับข้อความข้างล่าง */
.compare .side > pre { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.compare .side > p:last-child { margin-bottom: 0; }

@media (max-width: 44rem) {
  .compare { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .compare .side { break-inside: avoid; }
}

/* ---------- Predict-the-output card ---------- */

.predict {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
  background: var(--bg-soft);
}
.predict > pre { margin-bottom: 0.8rem; }
.predict .ask { font-weight: 650; margin-bottom: 0.7rem; }

button.reveal, button.opt {
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.12s, border-color 0.12s;
}

button.reveal {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
}
button.reveal:hover { background: var(--accent-dk); }

/* เฉลยที่ซ่อนไว้ — ใช้ได้ทั้งใน .predict และ .task (ปุ่ม reveal ท้ายภารกิจ) */
.predict .answer,
.task .answer {
  display: none;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule);
}
.predict.open .answer,
.task.open .answer { display: block; }
.predict.open button.reveal,
.task.open button.reveal { display: none; }

.task button.reveal { margin-top: 0.4rem; }

/* ---------- Quiz ---------- */

.quiz {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
}
.quiz .q { font-weight: 650; margin-bottom: 0.8rem; }
.quiz .opts { display: flex; flex-direction: column; gap: 0.45rem; }

button.opt {
  text-align: left;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 0.55rem 0.8rem;
  font-family: var(--font-code);
  font-size: 0.85rem;
}
button.opt:hover:not(:disabled) { border-color: var(--accent); }
button.opt:disabled { cursor: default; opacity: 0.55; }
button.opt.correct   { background: var(--ok-bg);  border-color: var(--ok);  color: var(--ok);  opacity: 1; font-weight: 650; }
button.opt.incorrect { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); opacity: 1; }

.quiz .explain {
  display: none;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.93rem;
}
.quiz.answered .explain { display: block; }

/* ---------- Score bar ---------- */

.scorebar {
  position: sticky;
  bottom: 0;
  margin: 3rem auto 0;
  max-width: var(--maxw);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-family: var(--font-code);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scorebar .track { flex: 1; height: 6px; background: var(--rule); border-radius: 99px; margin: 0 1rem; overflow: hidden; }
.scorebar .fill  { height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }

/* ---------- Task / exercise block ---------- */

.task {
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.6rem;
}
.task h3 { margin-top: 0; }
.task ol { margin-bottom: 0; }

/* ---------- ติ๊กว่าเรียนบทนี้จบแล้ว ----------
   การ์ดนี้ถูกแทรกด้วย assets/quiz.js ไม่ต้องเขียนใน HTML ของบทเรียน
   ------------------------------------------------ */

.done-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 3rem 0 0;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 0.9rem;
}
.done-card label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 600;
}
.done-card input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.done-card a { font-size: 0.85rem; text-decoration: none; }
.done-card a:hover { text-decoration: underline; }
.done-card.is-done {
  border-color: var(--ok);
  background: var(--ok-bg);
}
.done-card.is-done label { color: var(--ok); }

/* ---------- Nav ---------- */

.done-card + .nav { margin-top: 1.2rem; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-size: 0.88rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  margin-top: 3.5rem;
}

/* ---------- Footer ของทั้งเว็บ ---------- */

.site-foot {
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.site-foot p { margin-bottom: 0.5rem; }

.sources { font-size: 0.88rem; color: var(--ink-soft); }
.sources li { margin-bottom: 0.55rem; }

/* ---------- Print ---------- */

@media print {
  :root {
    --bg: #fff; --bg-soft: #f6f6f6; --ink: #000; --ink-soft: #444;
    --rule: #bbb; --code-bg: #f2f2f2; --code-ink: #111;
  }
  body { padding: 0; font-size: 11pt; }
  button, .scorebar, .done-card { display: none !important; }
  .predict .answer, .task .answer, .quiz .explain { display: block !important; }
  pre { border: 1px solid #ccc; }
  h2 { break-after: avoid; }
  .quiz, .predict, .task, table { break-inside: avoid; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}