/* คู่มือ RouteDee — one stylesheet for every chapter.
 *
 * Thai first: Sarabun is the face the app itself loads for Thai, so the manual
 * and the screenshots in it read as one thing. Latin fallbacks are there for the
 * field names and JSON keys, which stay in English because that is literally
 * what the reader types.
 *
 * Line length is capped at ~68 characters of Thai. Thai has no spaces between
 * words and wraps at phrase boundaries, so a long measure is much harder to
 * track back across than it is in English.
 */

:root {
  --ink: #1d1d1f;
  --ink-2: #4a4a4f;
  --ink-3: #77777f;
  --bg: #fbfbfd;
  --surface: #ffffff;
  --line: #e6e6ec;
  --accent: #0071e3;
  --accent-bg: #eef6ff;
  --warn-bg: #fff8e6;
  --warn-line: #f0d089;
  --stop-bg: #fdeeee;
  --stop-line: #e9b4b4;
  --code-bg: #f4f4f7;
  --radius: 14px;
  --measure: 34rem;
}

/* No dark palette here, deliberately. Nothing else in the product has one —
 * plan.css, driver.html and about.html define no prefers-color-scheme block at
 * all — so on a machine set to dark the manual was the single black page in a
 * white product. Worse, every figure in it is a screenshot of that white app, so
 * dark mode turned each chapter into a black page pasted with white rectangles.
 * The manual matches what it documents; when the app grows a dark theme, this is
 * where the manual's goes. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Sarabun", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.85; /* Thai needs more than Latin: the marks sit above and below */
  -webkit-font-smoothing: antialiased;

  /* Three columns, and the prose keeps its measure in the middle one. A single
     centred column at this line length left two empty thirds of a wide screen,
     which read as an unfinished page rather than as a calm one — but widening
     the prose to fill them would have cost the thing the measure is for. So the
     margins get the navigation instead: chapters on the left, this chapter's
     sections on the right.
     The side columns are 1fr whether or not a rail is in them, so the rails can
     be appended after the HTML has parsed (manual-nav.js) without the prose
     moving under the reader. */
  display: grid;
  grid-template-columns: 1fr minmax(0, 47rem) 1fr;
  column-gap: 1.5rem;
  align-items: start;
}

.wrap { grid-column: 2; padding: 0 20px 5rem; min-width: 0; }

/* The contents page has no rails — it *is* the contents — so it takes the whole
   width and lets its cards spread out instead of sitting in a 47rem channel with
   two empty thirds beside it. A chapter page keeps the middle column. */
/* justify-self, not `margin-inline: auto`. Auto margins make a grid item
   shrink-to-fit instead of stretching, so the cards sized themselves to their
   own content — 644px of a 1600px window — and the page came out narrower than
   before it spanned every column. */
body:not([data-chapter]) .wrap {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 74rem;
  justify-self: center;
}

/* ── Chrome, rendered by manual-nav.js ────────────────────────────────── */

.manual-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-3);
}
.manual-top a { color: var(--ink-3); text-decoration: none; }
.manual-top a:hover { color: var(--accent); }
.manual-top .manual-top-name { font-weight: 600; color: var(--ink-2); }
/* Static in the markup, so it comes before the breadcrumb manual-nav.js appends
   to this bar; `order` puts it back at the end where it reads as an exit rather
   than as the first thing in the trail. */
.manual-top-home { order: 1; margin-inline-start: auto; color: var(--accent) !important; }

.chapter-eyebrow {
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.35rem;
}

h1 {
  font-size: 2rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  max-width: var(--measure);
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0 0 2.5rem;
}

h2 {
  font-size: 1.3rem;
  margin: 2.4rem 0 0.9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  scroll-margin-top: 1.5rem; /* for the on-this-page links */
}
/* A chip rather than a grey numeral: the section numbers are the spine of a
   chapter, and at 400 weight in caption grey they read as debris. */
h2 .h2-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75em;
  height: 1.75em;
  border-radius: 9px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1;
}

h3 { font-size: 1.05rem; margin: 2rem 0 0.6rem; max-width: var(--measure); }

p, li { max-width: var(--measure); }
p { margin: 0 0 0.95rem; }
ul, ol { padding-inline-start: 1.4rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.35rem; }

strong { font-weight: 600; }

/* A term list — "รถ 1 คัน — เราให้ไว้ 3 คัน…" — where the label opens the item
 * and the rest of it explains that label. The label was 600 in the same ink as
 * the sentence it introduced, so nothing separated the two and the list read as
 * a paragraph with bold words in it.
 *
 * The contrast comes from stepping the explanation back rather than from
 * shouting the label: caption ink for the gloss, full ink at 700 for the term.
 * Shouting louder would have been the obvious move and the wrong one — the
 * labels are already the darkest thing on the line.
 *
 * :has() scopes this to items that actually open with a label, so emphasis
 * inside a sentence (…แต่ผูกกับ<strong>ประเภทรถของคลังนั้น</strong>) is left
 * alone. Where :has() is missing the list simply reads as it did before.
 */
li:has(> strong:first-child) {
  color: var(--ink-2);
  margin-bottom: 0.6rem;
}
li:has(> strong:first-child) > strong:first-child {
  color: var(--ink);
  font-weight: 700;
}

/* A step's title gets its own line rather than a colour step: in a term list the
   gloss is secondary, but in a walk-through the sentence after the title is the
   instruction itself and must not be dimmed. Every one of these titles is a
   phrase rather than the opening of the sentence — "ใส่คลังก่อน", "กดวางแผน
   เส้นทาง" — so breaking after it costs nothing and makes the steps scannable. */
.steps > li > p:first-of-type > strong:first-child {
  display: block;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.callout-title { font-weight: 700; }
a { color: var(--accent); }

/* Field names, JSON keys and van-type names: English inside Thai prose, so they
   get a face that makes the switch obvious rather than accidental. */
code, .ui {
  font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}
.ui {
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent);
  /* A control's name is one thing to look for on screen, so it must not break
     across two lines — "+ เพิ่ม / ประเภทรถ" reads as two buttons. */
  white-space: nowrap;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.7;
}
pre code { background: none; padding: 0; font-size: 1em; }

/* ── Steps ────────────────────────────────────────────────────────────── */

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 2.6rem;
  margin-bottom: 1.6rem;
  max-width: var(--measure);
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ── Figures ──────────────────────────────────────────────────────────── */

figure { margin: 1.3rem 0 1.7rem; }
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  /* Lifted off the page: a screenshot with a hairline border on a near-white
     background disappears into it, and half of these figures *are* near-white
     panels. */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.07);
}
/* A screenshot of a whole panel is tall by nature — three van-type cards do not
   fit in a squat box. Capping its height shrank it to 227px wide, which is a
   picture of text nobody can read, so these run at column width and are simply
   long. Scrolling past a legible figure beats squinting at a tidy one. */
figure.tall img { width: 100%; }
figcaption {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-3);
  max-width: var(--measure);
}

/* ── Callouts ─────────────────────────────────────────────────────────── */

.note, .warn, .stop {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.8rem 0;
}
.note { background: var(--accent-bg); border-color: transparent; }
.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.stop { background: var(--stop-bg); border-color: var(--stop-line); }
.note > :last-child, .warn > :last-child, .stop > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 0.5rem; }

/* ── Contents ─────────────────────────────────────────────────────────── */

/* Cards in a grid, because five parts of three chapters as one long list of
   rows was mostly the gaps between them — and a table of contents is the one
   page whose whole job is to show the shape of the thing at a glance. */
.contents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
  /* Each card as tall as its own part. Stretched to the tallest in the row, a
     part of three chapters got the height of a part of four and a hole under it. */
  align-items: start;
}
.part {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 1.1rem 1.15rem 1.2rem;
}
.part-title {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 0 0 0.7rem;
  max-width: none;
}
.chapter-list { list-style: none; padding: 0; margin: 0; }
.chapter-list li { margin: 0 0 0.15rem; max-width: none; }
.chapter-list a, .chapter-list span {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
}
.chapter-list a:hover { background: var(--accent-bg); color: var(--accent); }
.chapter-list .num {
  flex: 0 0 1.6rem;
  text-align: end;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.chapter-list a .num { color: var(--accent); font-weight: 600; }
.chapter-list .soon { color: var(--ink-3); }
.soon-tag { font-size: 0.72rem; color: var(--ink-3); align-self: center; margin-inline-start: auto; white-space: nowrap; }

/* ── The hero on a chapter, and on the book ───────────────────────────── */

/* The head of a chapter as one block instead of four stacked paragraphs: an
   eyebrow, a title, a lede and a button, each floating on its own, is what made
   the top of every page look like a draft. */
.chapter-hero, .book-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-bg) 0%, rgba(238, 246, 255, 0) 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.7rem 1.8rem 1.5rem;
  margin: 0 0 2rem;
}
.chapter-hero > :last-child, .book-hero > :last-child { margin-bottom: 0; }
.chapter-hero .chapter-eyebrow { margin-bottom: 0.15rem; }
.chapter-hero h1, .book-hero h1 { margin-bottom: 0.6rem; }
.chapter-hero .lede, .book-hero .lede { margin-bottom: 1.2rem; }
.hero-hint { font-size: 0.9rem; color: var(--ink-3); max-width: var(--measure); margin: 0.8rem 0 0; }

/* ── The two rails, appended by manual-nav.js ─────────────────────────── */

.manual-rail, .manual-onpage {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 22px 12px 3rem;
  font-size: 0.84rem;
  line-height: 1.5;
  /* Hidden until the window is wide enough to hold one without squeezing the
     prose. The grid keeps the middle column centred either way, so appearing
     and disappearing moves nothing the reader is looking at. */
  display: none;
}
.rail-title {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin: 0 0 0.6rem;
  padding-inline-start: 0.5rem;
}
.rail-part { margin: 0 0 0.9rem; }
.rail-part-title { color: var(--ink-3); font-size: 0.74rem; padding-inline-start: 0.5rem; margin-bottom: 0.2rem; }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { margin: 0; max-width: none; }
.rail-list a, .rail-list span {
  display: flex;
  gap: 0.45rem;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-2);
}
.rail-list a:hover { background: var(--accent-bg); color: var(--accent); }
.rail-list .num { color: var(--ink-3); flex: 0 0 1.1rem; text-align: end; font-variant-numeric: tabular-nums; }
.rail-list .soon { color: #b6b6bf; }
.rail-list .is-here {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
.rail-list .is-here .num { color: var(--accent); }

.manual-onpage a {
  display: block;
  padding: 0.26rem 0.6rem;
  border-inline-start: 2px solid var(--line);
  color: var(--ink-3);
  text-decoration: none;
}
.manual-onpage a:hover { color: var(--accent); }
.manual-onpage a.is-reading { border-inline-start-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Placed by hand, not by auto-flow: the rails are appended after .wrap, so
   letting the grid place them put the chapter list in the right-hand column and
   the section list on a second row underneath. */
.manual-rail { grid-row: 1; grid-column: 1; justify-self: end; }
.manual-onpage { grid-row: 1; grid-column: 3; justify-self: start; }

@media (min-width: 1240px) { .manual-rail { display: block; width: 15rem; } }
@media (min-width: 1560px) { .manual-onpage { display: block; width: 14rem; } }

/* ── Prev / next ──────────────────────────────────────────────────────── */

.manual-foot {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.manual-foot a {
  flex: 1;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}
.manual-foot a span { display: block; font-size: 0.82rem; color: var(--ink-3); }
.manual-foot .next { text-align: end; }
/* The contents link is the fallback, not the destination — it should not compete
   with a real neighbouring chapter for width. */
.manual-foot .contents { flex: 0 1 auto; text-align: center; color: var(--ink-3); }

/* ── Back to the product ──────────────────────────────────────────────── */

/* A chapter that someone reached from a search is a page with no way out: every
   other link in the manual points further into the manual. This is the one that
   answers "what is this thing" for a reader who arrived here first and has never
   seen the product. */
.product-cta {
  margin: 3.5rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-bg);
  max-width: var(--measure);
}
.product-cta > :last-child { margin-bottom: 0; }
.product-cta-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--ink);
}
.product-cta-go {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.product-cta-go:hover { text-decoration: underline; }

/* ── "Open this in the app" ───────────────────────────────────────────── */

.open-in-app {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
}
.open-in-app:hover { filter: brightness(1.06); }
a.open-in-app { text-decoration: none; }
.open-in-app.small {
  padding: 0.35rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 500;
  background: var(--accent-bg);
  color: var(--accent);
}
/* Full size, because it is a real offer and not a footnote — but outlined, so
   that where the two sit together the one needing an account still reads as the
   primary and this reads as the one you can take right now. */
.open-in-app.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.open-in-app.secondary:hover { background: var(--accent-bg); filter: none; }

.open-error { color: #b3261e; font-size: 0.88rem; margin-inline-start: 0.6rem; }
.try-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }

/* The JSON section is for someone driving the API, and it is the app's own
   Simple/Advanced split applied to the manual: shut by default, so a dispatcher
   reading about a chiller never has to scroll past a payload. */
details.advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.4rem 1.15rem;
  margin: 2rem 0;
}
details.advanced > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.7rem 0;
  list-style: none;
}
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "▸ "; color: var(--ink-3); }
details.advanced[open] > summary::before { content: "▾ "; }
details.advanced > summary .advanced-tag {
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-inline-start: 0.5rem;
}
details.advanced[open] { padding-bottom: 1rem; }