/* Dakok web theme - v0.1 (draft)
   For Dakok web pages: workshop guides, training manuals, demo landing pages.
   Palette and type come from Dakok_Proposal_Template_v1.0.docx so web and document read as one house style.
   Self-contained: works on S3/CloudFront and inside the ADA viewer (no CDN script, no runtime fetch). */

:root {
  --dk-navy: #1f3564;
  --dk-navy-deep: #18263f;
  --dk-blue: #2e6da4;
  --dk-sky: #4f81bd;
  --dk-ink: #2f3542;
  --dk-muted: #5d6676;       /* DOCX uses #6B7484; darkened so it passes 4.5:1 on the off-white web surfaces */
  --dk-rule: #d3d8e0;
  --dk-rule-strong: #9ba5b4;
  --dk-band: #e4e8ee;
  --dk-paper: #f6f7f9;       /* content surface: off-white, not pure #fff */
  --dk-panel: #eceff3;       /* top bar, chapter rail, footer */
  --dk-desk: #e7eaef;
  --dk-ok: #2f7d4f;
  --dk-warn: #a35a00;
  --dk-tip-ink: #256640;     /* callout labels: darker than --dk-ok/--dk-warn so they pass 4.5:1 on the tinted fill */
  --dk-warn-ink: #874a00;
  --dk-callout-mix: 12%;     /* share of the type colour in a callout fill */
  --dk-heading: #1f3564;     /* headings, active items, accent text */
  --dk-fill: #1f3564;        /* solid fills: step numbers, table header, buttons */
  --dk-on-fill: #ffffff;
  --dk-on-ok: #ffffff;
  --dk-select: rgba(31, 53, 100, .08);
  --dk-frame: rgba(31, 53, 100, .10);
  --dk-zebra: #eef1f5;
  --dk-pop: 0 8px 24px rgba(24, 38, 63, .14);
  --dk-shot-border: #9ba5b4;
  color-scheme: light;

  /* Bars exactly as Word renders them in the DOCX (VML fallback colours) */
  --dk-bar-head: linear-gradient(90deg, #254872, #3a6ba5 50%, #4780c5);           /* header1: short bar, top-left */
  --dk-bar-foot: linear-gradient(90deg, #1f497d, #00157e 90%, #4f81bd);           /* footer1: full-width bar */
  --dk-bar: var(--dk-bar-head);
  --dk-font: "Sarabun", "TH Sarabun New", "Noto Sans Thai", "Segoe UI", Arial, sans-serif;
  --dk-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dk-size: 17px;
  --dk-rail: 288px;
  --dk-measure: 860px;
  --dk-top: 64px;
}

/* ---------- Dark theme ----------
   Follows the device setting until the reader picks one with the theme button (dakok-web.js sets data-theme). */
:root[data-theme="dark"] {
  /* Dark: deep Dakok navy surfaces, not black. Text accents use saturated brand blues
     (not pastel); solid fills use a deeper blue so white text on them stays above 4.5:1. */
  --dk-desk: #0a1120;
  --dk-panel: #0f1829;
  --dk-paper: #142039;
  --dk-band: #1c2c4b;
  --dk-zebra: #182742;
  --dk-rule: #26385c;
  --dk-rule-strong: #3a5280;
  --dk-ink: #e4eaf5;
  --dk-muted: #a3b1c9;
  --dk-heading: #8db8ff;
  --dk-blue: #6fa6ff;
  --dk-fill: #2f6bc1;
  --dk-on-fill: #ffffff;
  --dk-select: rgba(111, 166, 255, .16);
  --dk-frame: rgba(255, 255, 255, .07);
  --dk-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -12px rgba(0, 0, 0, .6);
  --dk-pop: 0 10px 28px rgba(0, 0, 0, .5);
  --dk-shot-border: #6b86b8;   /* brighter than --dk-rule-strong so screenshots keep a visible edge on navy */
  --dk-ok: #63c792;
  --dk-warn: #e6a54e;
  --dk-tip-ink: #63c792;
  --dk-warn-ink: #e6a54e;
  --dk-callout-mix: 20%;     /* navy needs more tint than off-white to read as coloured */
  --dk-warn-bg: #3b2c10;     /* amber mixed into navy turns grey, so warnings get an explicit deep amber */
  --dk-on-ok: #0a1120;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark: deep Dakok navy surfaces, not black. Text accents use saturated brand blues
       (not pastel); solid fills use a deeper blue so white text on them stays above 4.5:1. */
    --dk-desk: #0a1120;
    --dk-panel: #0f1829;
    --dk-paper: #142039;
    --dk-band: #1c2c4b;
    --dk-zebra: #182742;
    --dk-rule: #26385c;
    --dk-rule-strong: #3a5280;
    --dk-ink: #e4eaf5;
    --dk-muted: #a3b1c9;
    --dk-heading: #8db8ff;
    --dk-blue: #6fa6ff;
    --dk-fill: #2f6bc1;
    --dk-on-fill: #ffffff;
    --dk-select: rgba(111, 166, 255, .16);
    --dk-frame: rgba(255, 255, 255, .07);
    --dk-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -12px rgba(0, 0, 0, .6);
    --dk-pop: 0 10px 28px rgba(0, 0, 0, .5);
    --dk-shot-border: #6b86b8;
    --dk-ok: #63c792;
    --dk-warn: #e6a54e;
    --dk-tip-ink: #63c792;
    --dk-warn-ink: #e6a54e;
    --dk-callout-mix: 20%;
    --dk-warn-bg: #3b2c10;
    --dk-on-ok: #0a1120;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dk-top) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--dk-font);
  font-size: var(--dk-size);
  line-height: 1.7;
  color: var(--dk-ink);
  background: var(--dk-desk);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--dk-blue); }
:focus-visible { outline: 2px solid var(--dk-blue); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.dkw-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--dk-panel);
  border-bottom: 1px solid var(--dk-rule);
}
/* Same gradient as the DOCX header bar, but full width: a short bar looks unfinished on a wide screen */
.dkw-top::before { content: ""; display: block; height: 6px; background: var(--dk-bar-head); }
.dkw-top-inner {
  height: var(--dk-top);
  display: flex; align-items: center; gap: 18px;
  padding: 0 24px;
}
.dkw-top .dkw-logo { height: 30px; width: auto; display: block; }
.dkw-top .dkw-site {
  padding-left: 18px; border-left: 1px solid var(--dk-rule);
  line-height: 1.25;
}
.dkw-site b { display: block; color: var(--dk-heading); font-size: 17px; }
.dkw-site span { color: var(--dk-muted); font-size: 14px; }
.dkw-top .dkw-partner { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dkw-partner img { height: 36px; width: auto; }
.dkw-logo-slot {
  height: 36px; padding: 0 14px; display: grid; place-items: center;
  border: 1px dashed var(--dk-rule-strong); color: var(--dk-muted); font-size: 13px;
}

/* ---------- Layout: floating chapter menu + content ---------- */
/* Menu, content and the step list are separate framed panels on the desk background,
   not a full-height sidebar. --dk-gap is both the gutter and the sticky offset. */
:root {
  --dk-gap: 24px; --dk-sticky: calc(var(--dk-top) + 7px + var(--dk-gap));
  --dk-radius: 10px;
}
:root { --dk-shadow: 0 1px 2px rgba(24, 38, 63, .06), 0 10px 28px -10px rgba(24, 38, 63, .18); }
.dkw-layout {
  display: grid;
  grid-template-columns: var(--dk-rail) minmax(0, 1fr);
  gap: var(--dk-gap);
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--dk-gap);
}
/* Floating modules: soft radius and a two-layer shadow. No coloured strips or side bars. */
.dkw-rail, .dkw-toc, .dkw-main {
  background: var(--dk-paper);
  border: 1px solid var(--dk-frame);
  border-radius: var(--dk-radius);
  box-shadow: var(--dk-shadow);
}
/* Scrolls only when the list is taller than the screen; the scrollbar appears on hover/focus only */
.dkw-rail, .dkw-toc { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.dkw-rail::-webkit-scrollbar, .dkw-toc::-webkit-scrollbar { width: 0; }
.dkw-rail:hover, .dkw-rail:focus-within, .dkw-toc:hover, .dkw-toc:focus-within { scrollbar-width: thin; scrollbar-color: var(--dk-rule-strong) transparent; }
.dkw-rail:hover::-webkit-scrollbar, .dkw-toc:hover::-webkit-scrollbar { width: 6px; }
.dkw-rail::-webkit-scrollbar-thumb, .dkw-toc::-webkit-scrollbar-thumb { background: var(--dk-rule-strong); border-radius: 3px; }
.dkw-rail {
  position: sticky; top: var(--dk-sticky);
  max-height: calc(100vh - var(--dk-sticky) - var(--dk-gap));
  padding: 0 0 12px;
}
/* Panel title: the <summary> on desktop (inert), the toggle on small screens */
.dkw-rail summary, .dkw-toc h2 {
  position: sticky; top: 0; z-index: 1;
  display: block; margin: 0; padding: 15px 18px 11px;
  background: var(--dk-paper);
  border-bottom: 1px solid var(--dk-rule);
  font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--dk-heading);
  list-style: none; pointer-events: none;
}
.dkw-rail summary::-webkit-details-marker { display: none; }
.dkw-rail h2 {
  margin: 16px 18px 6px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dk-muted);
}
.dkw-rail ol { list-style: none; margin: 0; padding: 0 8px; counter-reset: ch var(--dk-start, 0); }
.dkw-rail li { counter-increment: ch; }
.dkw-rail a {
  display: grid; grid-template-columns: 28px 1fr; gap: 6px;
  padding: 6px 10px; font-size: 15px; line-height: 1.4;
  color: var(--dk-ink); text-decoration: none;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.dkw-rail a::before { content: counter(ch, decimal-leading-zero); color: var(--dk-muted); font-variant-numeric: tabular-nums; }
.dkw-rail a:hover { background: var(--dk-band); color: var(--dk-heading); }
.dkw-rail a[aria-current="page"] {
  background: var(--dk-select);
  color: var(--dk-heading); font-weight: 600;
}
.dkw-rail a[aria-current="page"]::before { color: var(--dk-heading); }
@media (prefers-reduced-motion: reduce) { .dkw-rail a { transition: none; } }

.dkw-main { min-width: 0; }
.dkw-layout.no-rail .dkw-main { border: 0; border-radius: 0; box-shadow: none; }
/* Course home: the page itself is one framed panel, centred on the desk */
body > .dkw-main { max-width: 1160px; margin: var(--dk-gap) auto; }
.dkw-content { max-width: var(--dk-measure); margin: 0 auto; padding: 44px 40px 72px; }

/* ---------- Chapter opening ---------- */
.dkw-kicker { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--dk-blue); letter-spacing: .04em; }
.dkw-content h1 { margin: 0; font-size: 36px; line-height: 1.25; color: var(--dk-heading); }
.dkw-lead { margin: 14px 0 0; font-size: 19px; color: var(--dk-muted); }
.dkw-opening { padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--dk-rule); }

.dkw-content h2 { margin: 44px 0 10px; font-size: 25px; line-height: 1.3; color: var(--dk-heading); }
.dkw-content h3 { margin: 0; font-size: 20px; line-height: 1.35; color: var(--dk-heading); }
.dkw-content p { margin: 0 0 12px; }
.dkw-content ul, .dkw-content ol { margin: 0 0 12px; padding-left: 24px; }
.dkw-content li { margin: 4px 0; }

/* "What this chapter covers" - a ruled block, not a card */
.dkw-goal { border-top: 2px solid var(--dk-heading); border-bottom: 1px solid var(--dk-rule); padding: 14px 0 6px; margin: 0 0 8px; }
.dkw-goal > b { display: block; color: var(--dk-heading); font-size: 18px; margin-bottom: 4px; }

/* ---------- Steps: the order is real, so the number is shown ---------- */
.dkw-steps { list-style: none; margin: 0; padding: 0; counter-reset: step var(--dk-step-start, 0); }
.dkw-step { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; padding: 26px 0; border-bottom: 1px solid var(--dk-rule); }
.dkw-step::before {
  content: counter(step);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--dk-fill); color: var(--dk-on-fill); font-weight: 700; font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.dkw-step > * { grid-column: 2; }
.dkw-step > h3 { grid-row: 1; align-self: center; min-height: 44px; display: flex; align-items: center; }
.dkw-step > :nth-child(2) { margin-top: 8px; }

/* ---------- Screenshots ---------- */
.dkw-shot { margin: 16px 0 6px; }
.dkw-shot img { display: block; width: 100%; border: 1px solid var(--dk-shot-border); }
.dkw-shot figcaption { margin-top: 8px; font-size: 14.5px; color: var(--dk-muted); }

/* ---------- Prompt to copy ---------- */
.dkw-prompt { position: relative; margin: 14px 0; background: var(--dk-band); border: 1px solid color-mix(in oklab, var(--dk-blue) 55%, transparent); border-radius: 10px; }
.dkw-prompt-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0 18px; font-size: 13.5px; font-weight: 700; color: var(--dk-blue); letter-spacing: .04em; }
.dkw-prompt pre {
  margin: 0; padding: 6px 18px 16px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--dk-font); font-size: 16px; line-height: 1.65; color: var(--dk-ink);
}
.dkw-copy {
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0;
  padding: 5px 14px; border: 1px solid var(--dk-heading); background: var(--dk-paper); color: var(--dk-heading);
  border-radius: 6px; cursor: pointer;
}
.dkw-copy:hover { background: var(--dk-fill); color: var(--dk-on-fill); }
.dkw-copy[data-state="done"] { border-color: var(--dk-ok); background: var(--dk-ok); color: var(--dk-on-ok); }

/* ---------- Notes: a solid rounded fill tinted by type, no side rule ---------- */
.dkw-tip, .dkw-warn, .dkw-note { margin: 14px 0 6px; padding: 12px 16px; border: 1px solid var(--dk-rule-strong); border-radius: 10px; font-size: 16px; background: var(--dk-band); }
/* thin edge in the type colour; translucent so it sits correctly on light and dark fills */
.dkw-tip  { border-color: color-mix(in oklab, var(--dk-ok) 55%, transparent); }
.dkw-warn { border-color: color-mix(in oklab, var(--dk-warn) 55%, transparent); }
.dkw-note { border-color: color-mix(in oklab, var(--dk-rule-strong) 80%, transparent); }
.dkw-tip  { background: color-mix(in oklab, var(--dk-ok) var(--dk-callout-mix), var(--dk-paper)); }
.dkw-warn { background: var(--dk-warn-bg, color-mix(in oklab, var(--dk-warn) var(--dk-callout-mix), var(--dk-paper))); }
.dkw-note { background: color-mix(in oklab, var(--dk-rule-strong) var(--dk-callout-mix), var(--dk-paper)); color: var(--dk-muted); }
.dkw-tip > :last-child, .dkw-warn > :last-child, .dkw-note > :last-child { margin-bottom: 0; }
.dkw-tip::before, .dkw-warn::before, .dkw-note::before { display: block; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.dkw-tip::before  { content: "เคล็ดลับ"; color: var(--dk-tip-ink); }
.dkw-warn::before { content: "ข้อควรระวัง"; color: var(--dk-warn-ink); }
.dkw-note::before { content: "หมายเหตุ"; color: var(--dk-muted); }

/* Definition list for options / menu items */
.dkw-defs { margin: 10px 0 12px; }
.dkw-defs dt { font-weight: 700; color: var(--dk-heading); margin-top: 10px; }
.dkw-defs dd { margin: 2px 0 0; }

/* UI labels the learner clicks */
.dkw-ui { font-weight: 600; color: var(--dk-heading); background: var(--dk-band); padding: 0 6px; border: 1px solid var(--dk-rule); white-space: nowrap; }
code, kbd { font-family: var(--dk-mono); font-size: .88em; background: var(--dk-band); padding: 1px 5px; }

/* ---------- Tables (same as the document theme) ---------- */
.dkw-table-wrap { overflow-x: auto; margin: 10px 0 18px; }
.dkw-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.dkw-table th, .dkw-table td { border: 1px solid var(--dk-rule-strong); padding: 7px 12px; text-align: left; vertical-align: top; }
.dkw-table thead th { background: var(--dk-fill); color: var(--dk-on-fill); }
.dkw-table tbody tr:nth-child(even) td { background: var(--dk-zebra); }

/* ---------- Previous / next ---------- */
.dkw-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--dk-rule); }
.dkw-pager a { display: block; padding: 10px 0; text-decoration: none; color: var(--dk-heading); font-weight: 600; }
.dkw-pager a span { display: block; font-size: 14px; font-weight: 400; color: var(--dk-muted); }
.dkw-pager .dkw-next { text-align: right; grid-column: 2; }

/* DOCX footer: right-aligned notice, then a full-width gradient bar at the very bottom */
.dkw-foot { padding: 16px 40px 0; border-top: 1px solid var(--dk-rule); font-size: 14px; color: var(--dk-ink); background: var(--dk-panel); text-align: right; }
.dkw-foot::after { content: ""; display: block; height: 14px; margin: 16px -40px 0; background: var(--dk-bar-foot); }

/* ---------- Small screens: rail collapses into a disclosure ---------- */
/* =====================================================================
   Layout variants
   1  Course home (.dkw-home) + chapter pages with the chapter rail
   2  Chapter rail + "In this chapter" step list on the right (.dkw-layout.has-toc)
   3  No rail: chapter bar under the top bar (.dkw-chapterbar + .dkw-layout.no-rail)
   ===================================================================== */

/* Chapter position: "บทที่ 6 จาก 17" */
.dkw-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 15px; color: var(--dk-muted); }
.dkw-progress b { color: var(--dk-blue); font-weight: 700; }
.dkw-progress .dkw-meter { flex: 0 0 140px; height: 4px; background: var(--dk-band); }
.dkw-progress .dkw-meter i { display: block; height: 100%; background: var(--dk-fill); }

/* ---------- 1. Course home ---------- */
.dkw-home { max-width: 1080px; margin: 0 auto; padding: 52px 40px 72px; }
.dkw-home h1 { margin: 0; font-size: 40px; line-height: 1.2; color: var(--dk-heading); }
.dkw-home .dkw-lead { max-width: 720px; }
.dkw-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--dk-rule); border-bottom: 1px solid var(--dk-rule); }
.dkw-facts li { padding: 12px 28px 12px 0; margin-right: 28px; border-right: 1px solid var(--dk-rule); }
.dkw-facts li:last-child { border-right: 0; }
.dkw-facts span { display: block; font-size: 13.5px; color: var(--dk-muted); }
.dkw-facts b { color: var(--dk-heading); }
.dkw-start { display: inline-block; margin-top: 24px; padding: 10px 22px; background: var(--dk-fill); color: var(--dk-on-fill); font-weight: 600; text-decoration: none; }
.dkw-start:hover { background: var(--dk-blue); }
.dkw-start-alt { margin-left: 12px; background: transparent; color: var(--dk-heading); box-shadow: inset 0 0 0 1px var(--dk-heading); }
.dkw-start-alt:hover { background: var(--dk-select); }
@media (max-width: 600px) { .dkw-start-alt { margin-left: 0; } }

.dkw-groups { margin-top: 48px; }
.dkw-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 32px; padding: 22px 0; border-top: 2px solid var(--dk-heading); }
.dkw-group + .dkw-group { border-top-width: 1px; border-top-color: var(--dk-rule-strong); }
.dkw-group h2 { margin: 0; font-size: 21px; color: var(--dk-heading); line-height: 1.35; }
.dkw-group h2 span { display: block; font-size: 14px; font-weight: 400; color: var(--dk-muted); }
.dkw-group ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; counter-reset: ch var(--dk-start, 0); }
.dkw-group li { counter-increment: ch; break-inside: avoid; }
.dkw-group a { display: grid; grid-template-columns: 34px 1fr; padding: 7px 0; color: var(--dk-ink); text-decoration: none; border-bottom: 1px solid var(--dk-rule); }
.dkw-group a::before { content: counter(ch, decimal-leading-zero); color: var(--dk-muted); font-variant-numeric: tabular-nums; }
.dkw-group a:hover { color: var(--dk-heading); }
.dkw-group a:hover::before { color: var(--dk-heading); }

/* ---------- 2. "In this chapter" step list ---------- */
.dkw-layout.has-toc { grid-template-columns: var(--dk-rail) minmax(0, 1fr) 248px; }
.dkw-toc {
  position: sticky; top: var(--dk-sticky);
  max-height: calc(100vh - var(--dk-sticky) - var(--dk-gap)); overflow-y: auto;
  padding: 0 0 14px;
}
.dkw-toc ol { list-style: none; margin: 10px 8px 0; padding: 0; counter-reset: t; }
.dkw-toc li { counter-increment: t; }
.dkw-toc a { display: grid; grid-template-columns: 22px 1fr; padding: 5px 10px; font-size: 14.5px; line-height: 1.4; color: var(--dk-muted); text-decoration: none; border-radius: 6px; }
.dkw-toc a::before { content: counter(t); font-variant-numeric: tabular-nums; }
.dkw-toc a:hover { color: var(--dk-heading); }
.dkw-toc a[aria-current="step"] { color: var(--dk-heading); font-weight: 600; background: var(--dk-select); }
@media (max-width: 1279px) {
  .dkw-layout.has-toc { grid-template-columns: var(--dk-rail) minmax(0, 1fr); }
  .dkw-toc { display: none; }
}

/* ---------- Hide / show the side panels (buttons are added by dakok-web.js) ----------
   Written for every learner, including older ones: each button says in words what it does,
   the arrow points where the panel goes, and targets are at least 40px tall. */
.dkw-collapse, .dkw-reveal {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--dk-rule-strong); border-radius: 8px;
  background: var(--dk-paper); color: var(--dk-heading);
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; pointer-events: auto;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dkw-collapse svg, .dkw-reveal svg { flex: none; width: 18px; height: 18px; }
.dkw-collapse:hover, .dkw-reveal:hover { background: var(--dk-fill); border-color: var(--dk-heading); color: var(--dk-on-fill); }
.dkw-rail summary, .dkw-toc h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dkw-rail summary .dkw-collapse, .dkw-toc h2 .dkw-collapse { min-height: 34px; padding: 0 10px; font-size: 14.5px; margin: -6px -6px -6px 0; }

/* When a panel is hidden, a bar at the top of the content holds the button that brings it back.
   It stays on screen while scrolling, so the way back is never lost. */
.dkw-showbar {
  position: sticky; top: calc(var(--dk-top) + 7px); z-index: 5;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--dk-paper);
  border-bottom: 1px solid var(--dk-rule); border-radius: var(--dk-radius) var(--dk-radius) 0 0;
}
.dkw-showbar[hidden], .dkw-reveal[hidden] { display: none; }
.dkw-showbar .dkw-reveal-toc { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .dkw-collapse, .dkw-reveal { transition: none; } }

.dkw-layout.rail-hidden .dkw-rail, .dkw-layout.toc-hidden .dkw-toc { display: none; }
.dkw-layout.rail-hidden { grid-template-columns: minmax(0, 1fr); }
.dkw-layout.has-toc.rail-hidden { grid-template-columns: minmax(0, 1fr) 248px; }
.dkw-layout.has-toc.toc-hidden { grid-template-columns: var(--dk-rail) minmax(0, 1fr); }
.dkw-layout.has-toc.rail-hidden.toc-hidden { grid-template-columns: minmax(0, 1fr); }
/* Hiding a panel hands its width to the content: the reading column widens, so screenshots get bigger */
.dkw-layout.rail-hidden, .dkw-layout.has-toc.toc-hidden { --dk-measure: 1120px; }
.dkw-layout.has-toc.rail-hidden.toc-hidden, .dkw-layout.rail-hidden:not(.has-toc) { --dk-measure: 1320px; }
@media (max-width: 1279px) {
  .dkw-reveal-toc { display: none !important; }
  .dkw-layout.has-toc.rail-hidden { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 3. No rail: chapter bar ---------- */
.dkw-layout.no-rail { grid-template-columns: minmax(0, 1fr); }
.dkw-chapterbar {
  position: sticky; top: calc(var(--dk-top) + 7px); z-index: 9;
  background: var(--dk-panel); border-bottom: 1px solid var(--dk-rule);
}
.dkw-chapterbar-inner { max-width: var(--dk-measure); margin: 0 auto; padding: 0 40px; height: 52px; display: flex; align-items: center; gap: 16px; }
.dkw-chapterbar .dkw-progress { margin: 0 0 0 auto; }
.dkw-picker { position: relative; }
.dkw-picker summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: 1px solid var(--dk-rule-strong); background: var(--dk-paper);
  font-weight: 600; color: var(--dk-heading); max-width: 46vw;
}
.dkw-picker summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkw-picker summary::-webkit-details-marker { display: none; }
.dkw-picker summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dkw-picker[open] summary::after { transform: translateY(2px) rotate(225deg); }
.dkw-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: min(760px, 92vw); max-height: 70vh; overflow-y: auto;
  padding: 8px 20px 16px; background: var(--dk-paper); border: 1px solid var(--dk-rule-strong);
  box-shadow: var(--dk-pop);
}
.dkw-picker-panel .dkw-group { grid-template-columns: 1fr; gap: 6px; padding: 14px 0 6px; }
.dkw-picker-panel .dkw-group h2 { font-size: 16px; }
.dkw-picker-panel a[aria-current="page"] { color: var(--dk-heading); font-weight: 700; }
.dkw-stepnav { display: flex; gap: 6px; }
.dkw-stepnav a { display: grid; place-items: center; width: 44px; height: 36px; border: 1px solid var(--dk-rule-strong); color: var(--dk-heading); text-decoration: none; font-weight: 700; background: var(--dk-paper); }
.dkw-stepnav a:hover { background: var(--dk-fill); color: var(--dk-on-fill); }

@media (max-width: 960px) {
  .dkw-home { padding: 32px 20px 56px; }
  .dkw-home h1 { font-size: 31px; }
  .dkw-group { grid-template-columns: 1fr; gap: 8px; }
  .dkw-group ol { columns: 1; }
  .dkw-facts li { border-right: 0; padding-right: 0; }
  .dkw-chapterbar-inner { padding: 0 16px; }
  .dkw-chapterbar .dkw-progress .dkw-meter { display: none; }
  .dkw-picker-panel .dkw-group ol { columns: 1; }
}

@media (max-width: 960px) {
  :root { --dk-gap: 12px; }
  /* Every layout variant collapses to one column. The has-toc / *-hidden variants are listed
     explicitly: their two-class selectors outrank a bare .dkw-layout and kept the rail column. */
  .dkw-layout, .dkw-layout.rail-hidden,
  .dkw-layout.has-toc, .dkw-layout.has-toc.rail-hidden, .dkw-layout.has-toc.toc-hidden,
  .dkw-layout.has-toc.rail-hidden.toc-hidden { grid-template-columns: minmax(0, 1fr); padding: var(--dk-gap); }
  .dkw-layout .dkw-toc { display: none; }
  /* Small screens already fold the menu into a disclosure, so the hide buttons are not needed */
  .dkw-collapse, .dkw-reveal, .dkw-showbar { display: none !important; }
  .dkw-layout.rail-hidden .dkw-rail { display: block; }
  .dkw-rail { position: static; max-height: none; padding: 0; }
  .dkw-rail summary {
    position: relative; display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 12px; cursor: pointer; pointer-events: auto; border-bottom: 0;
  }
  .dkw-rail details[open] summary { border-bottom: 1px solid var(--dk-rule); }
  .dkw-rail summary::after { content: "+"; font-size: 22px; line-height: 1; }
  .dkw-rail details[open] summary::after { content: "-"; }
  .dkw-rail details[open] { padding-bottom: 14px; }
  .dkw-content { padding: 28px 20px 56px; }
  .dkw-content h1 { font-size: 29px; }
  .dkw-top-inner { padding: 0 16px; gap: 12px; }
  .dkw-top .dkw-site span, .dkw-partner { display: none; }
  .dkw-foot { padding: 14px 20px 0; }
  .dkw-foot::after { margin: 14px -20px 0; }
}
/* ---------- Components used by the converted workshop chapters ---------- */
/* Step number taken from the source, so numbering survives sections that interrupt the list */
.dkw-step[data-n]::before { content: attr(data-n); }
/* Note label override, e.g. data-label="Quick Desktop" */
.dkw-tip[data-label]::before, .dkw-warn[data-label]::before, .dkw-note[data-label]::before { content: attr(data-label); }
.dkw-content h4 { margin: 20px 0 6px; font-size: 18px; color: var(--dk-heading); }
.dkw-content hr { border: 0; border-top: 1px solid var(--dk-rule); margin: 16px 0; }
.dkw-content blockquote { margin: 12px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--dk-rule-strong); color: var(--dk-ink); }
.dkw-prompt-text { padding: 6px 18px 16px; font-size: 16px; line-height: 1.65; color: var(--dk-ink); }
.dkw-prompt-text p:last-child { margin-bottom: 0; }

/* A link the learner must open or copy */
.dkw-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 12px; padding: 8px 10px 8px 14px; background: var(--dk-band); border: 1px solid var(--dk-rule); border-radius: 8px; }
.dkw-link a { font-weight: 600; word-break: break-all; }
.dkw-link .dkw-copy { margin-left: auto; }

/* Chapter facts under the title (product, theme, level) */
.dkw-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.dkw-meta li { margin: 0; padding: 3px 12px; border: 1px solid var(--dk-rule-strong); border-radius: 999px; font-size: 14.5px; color: var(--dk-muted); }

/* Side-by-side labelled items (menu zones and the like) */
/* One feature of the product: heading, explanation, screenshot */
.dkw-feature { padding: 4px 0 18px; border-bottom: 1px solid var(--dk-rule); }
.dkw-feature h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 6px; }
.dkw-feature h3 .dkw-ui { font-size: 14px; }
.dkw-feature .dkw-lead { margin: -4px 0 10px; font-size: 17px; }
/* "In this chapter": section headings and step numbers from the page */
.dkw-toc a[data-n]::before { content: attr(data-n); }
.dkw-toc .dkw-toc-group { counter-increment: none; }
.dkw-toc .dkw-toc-group a { grid-template-columns: 1fr; margin-top: 8px; font-weight: 700; color: var(--dk-ink); }
.dkw-toc .dkw-toc-group a::before { content: none; }
.dkw-toc .dkw-toc-group:first-child a { margin-top: 0; }
.dkw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; margin: 12px 0 18px; }
.dkw-grid > div { padding: 12px 0; border-top: 2px solid var(--dk-heading); }
.dkw-grid .dkw-label { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--dk-blue); }
.dkw-grid h4 { margin: 2px 0 4px; }
.dkw-grid p { margin: 0; }

/* An example of what Quick produces */
.dkw-sample { margin: 14px 0; padding: 16px 20px; background: var(--dk-band); border: 1px solid var(--dk-rule); border-radius: 8px; }
.dkw-sample::before { content: "ตัวอย่างผลลัพธ์"; display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--dk-blue); }
.dkw-sample h5 { margin: 12px 0 4px; font-size: 16.5px; color: var(--dk-heading); }

/* A file the learner downloads before the steps */
.dkw-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 14px 18px; background: var(--dk-band); border: 1px solid var(--dk-rule); border-radius: 8px; }
.dkw-download p { margin: 0; }
.dkw-download a.dkw-button, .dkw-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 8px; background: var(--dk-fill); color: var(--dk-on-fill); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dkw-button:hover { filter: brightness(1.1); }

/* ---------- Light / dark switch (added by dakok-web.js) ----------
   Both choices are always visible and the current one is filled in, so nobody has to work out
   what a single "switch to ..." label means. */
.dkw-theme {
  margin-left: auto;
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--dk-rule-strong); border-radius: 999px;
  background: var(--dk-band);
}
.dkw-theme button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dk-muted);
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dkw-theme button svg { flex: none; width: 18px; height: 18px; }
.dkw-theme button:hover { color: var(--dk-heading); }
.dkw-theme button[aria-pressed="true"] { background: var(--dk-fill); color: var(--dk-on-fill); cursor: default; }
.dkw-theme + .dkw-partner { margin-left: 0; }
@media (max-width: 520px) { .dkw-theme button { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .dkw-theme button { transition: none; } }

/* ---------- Back to home ----------
   Labelled button in the top bar (chapter pages) plus the first entry of the chapter menu.
   Text + icon, same size as the other controls, so it reads as a button for every learner. */
.dkw-homebtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--dk-rule-strong); border-radius: 999px;
  background: var(--dk-paper); color: var(--dk-heading);
  font-size: 15.5px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.dkw-homebtn svg, .dkw-rail-home svg { flex: none; width: 18px; height: 18px; }
.dkw-homebtn:hover { background: var(--dk-fill); color: var(--dk-on-fill); border-color: var(--dk-fill); }
.dkw-rail-home {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 10px 4px; padding: 9px 12px; border-radius: 6px;
  border: 1px solid var(--dk-rule); color: var(--dk-heading);
  font-weight: 700; text-decoration: none;
  transition: background-color .15s ease;
}
/* Must beat ".dkw-rail a" (grid + chapter counter), which otherwise numbers this link "00" */
.dkw-rail a.dkw-rail-home { display: flex; padding: 9px 12px; color: var(--dk-heading); font-weight: 700; }
.dkw-rail a.dkw-rail-home::before { content: none; }
.dkw-rail-home:hover { background: var(--dk-select); }
@media (max-width: 960px) { .dkw-rail-home { margin: 10px 16px 4px; } }
@media (max-width: 600px) { .dkw-top .dkw-site { display: none; } .dkw-homebtn { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .dkw-homebtn, .dkw-rail-home { transition: none; } }
@media print { .dkw-homebtn, .dkw-rail-home { display: none; } }

/* Dakok logo: official black artwork on light, official white artwork on dark (both from the CMP app assets).
   A customer logo keeps its own colours and sits on a white tile on dark (template rule: never recolour it). */
.dkw-logo-on-dark { display: none !important; }
:root[data-theme="dark"] .dkw-logo-on-light { display: none !important; }
:root[data-theme="dark"] .dkw-logo-on-dark { display: block !important; }
:root[data-theme="dark"] .dkw-partner img { background: #fff; padding: 4px 8px; border-radius: 6px; box-sizing: content-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dkw-logo-on-light { display: none !important; }
  :root:not([data-theme="light"]) .dkw-logo-on-dark { display: block !important; }
  :root:not([data-theme="light"]) .dkw-partner img { background: #fff; padding: 4px 8px; border-radius: 6px; box-sizing: content-box; }
}

@media print {
  .dkw-top, .dkw-rail, .dkw-pager, .dkw-copy, .dkw-toc, .dkw-chapterbar, .dkw-showbar { display: none; }
  .dkw-layout { display: block; }
  body, .dkw-main { background: #fff; }
  :root, :root[data-theme] { color-scheme: light; --dk-ink: #2f3542; --dk-muted: #5d6676; --dk-tip-ink: #256640; --dk-warn-ink: #874a00; --dk-callout-mix: 12%; --dk-warn-bg: #f6ece0; --dk-heading: #1f3564; --dk-fill: #1f3564; --dk-band: #e4e8ee; --dk-zebra: #eef1f5; --dk-rule: #d3d8e0; --dk-rule-strong: #9ba5b4; --dk-shot-border: #9ba5b4; --dk-paper: #fff; }
  .dkw-theme { display: none; }
  .dkw-main { border: 0; box-shadow: none; }
  .dkw-layout { padding: 0; }
  .dkw-step, .dkw-shot { break-inside: avoid; }
}

/* ---------- Slides ---------- */
/* Default (no JS, phone, print): slides stack as ordinary sections with a rule between them. */
.dkw-slide { padding: 28px 0; border-top: 1px solid var(--dk-rule); }
.dkw-slide:first-child { border-top: 0; }
.dkw-slide > :first-child, .dkw-slide-text > :first-child { margin-top: 0; }
.dkw-slide-media { display: grid; gap: 12px; }
.dkw-slide-media .dkw-shot { margin: 0; }
.dkw-slides-bar, .dkw-slides-progress { display: none; }

@media screen and (min-width: 960px) {
  .dkw-slides.is-deck { margin: 18px 0 26px; }
  .dkw-slides-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  .dkw-slides-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 16px;
    border: 1px solid var(--dk-rule-strong); border-radius: 999px;
    background: var(--dk-paper); color: var(--dk-heading); font-family: inherit;
    font-size: 15.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .dkw-slides-btn:hover { background: var(--dk-fill); color: var(--dk-on-fill); border-color: var(--dk-fill); }
  .dkw-slides-btn:disabled { opacity: .45; cursor: default; }
  .dkw-slides-btn:disabled:hover { background: var(--dk-paper); color: var(--dk-heading); border-color: var(--dk-rule-strong); }
  .dkw-slides-count { min-width: 72px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dk-heading); }
  .dkw-slides-spacer { flex: 1; }
  .dkw-slides-progress { display: block; height: 3px; margin: 0 0 12px; background: var(--dk-rule); }
  .dkw-slides-progress > span { display: block; height: 100%; width: 0; background: var(--dk-fill); }

  .dkw-slides.is-deck .dkw-slides-stage {
    border: 1px solid var(--dk-rule); border-radius: var(--dk-radius); background: var(--dk-band); padding: 0;
  }
  .dkw-slides.is-deck .dkw-slide { aspect-ratio: 16 / 9; padding: 40px 48px; border: 0; display: none; overflow: visible; }
  .dkw-slides.is-deck .dkw-slide.is-current { display: flex; flex-direction: column; justify-content: center; }
  .dkw-slides.is-deck .dkw-slide--center { text-align: center; align-items: center; }
  .dkw-slides.is-deck .dkw-slide--center h2 { font-size: 34px; }
  .dkw-slides.is-deck .dkw-slide--center p { font-size: 19px; max-width: 46ch; }
  .dkw-slides.is-deck .dkw-slide--split.is-current {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center;
  }
  .dkw-slides.is-deck .dkw-slide--nomedia.is-current { display: flex; }

  .dkw-slides:fullscreen { background: var(--dk-paper); padding: 24px 40px; display: flex; flex-direction: column; overflow: auto; }
  .dkw-slides:fullscreen .dkw-slides-stage { flex: 1; display: flex; }
  .dkw-slides:fullscreen .dkw-slide { aspect-ratio: auto; min-height: 100%; width: 100%; font-size: 1.3em; }
  .dkw-slides:fullscreen .dkw-slide h2 { font-size: 36px; }
  .dkw-slides:fullscreen .dkw-slide--center h2 { font-size: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .dkw-slides.is-deck .dkw-slide.is-current { animation: dkw-slide-in .18s ease-out; }
}
@keyframes dkw-slide-in { from { opacity: 0; } to { opacity: 1; } }

@media print {
  .dkw-slides-bar, .dkw-slides-progress { display: none !important; }
  .dkw-slide { display: block !important; break-inside: avoid; }
}