/* Shared by every page: colour and type tokens, buttons, the top bar, headings, the footer.
   One dark theme on purpose, like a pit wall at night, whatever the visitor's system is set to.
   The colours are the app's own: teal for SimMate, and the brake red and throttle green its charts use. */
:root {
  --bg: #070A0B; --bg-2: #0B1012; --panel: #10161A; --raise: #151C20; --ink: #E9EEEB; --muted: #96A29D; --faint: #66726E;
  --line: #1E272B; --line-2: #2B363B;
  --accent: #3CC4B8; --accent-2: #7FE3D9; --accent-soft: #10302D; --accent-ink: #04201D;
  --brake: #F06B5B; --throttle: #4AD991; --coast: #F2B34A; --board: #E9EEEB; --board-ink: #070A0B;
  --glow: 0 0 40px rgba(60, 196, 184, .25);
  --display: "Barlow Condensed", "Kanit", "Arial Narrow", sans-serif;     /* Barlow has no Thai: Thai falls through to Kanit */
  --body: "IBM Plex Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --wrap: 1180px;
  color-scheme: dark;
}

/* one language at a time: every bilingual element carries lang="en" or lang="th" */
html[data-lang="th"] [lang="en"]:not(html), html[data-lang="en"] [lang="th"]:not(html) { display: none !important }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--body); overflow-x: hidden }
a { color: var(--accent); text-underline-offset: 3px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }
img { max-width: 100%; display: block }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px }
@media (max-width: 600px) { .wrap { padding-inline: 16px } }
.num, code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
code { font-size: .88em; background: var(--raise); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 12px; font: 600 15px var(--body);
  text-decoration: none; color: var(--ink); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--panel) 70%, transparent);
  transition: transform .45s var(--spring), background-color .3s, border-color .3s; cursor: pointer }
.btn:hover { transform: translateY(-2px); border-color: var(--accent) }
.btn:active { transform: scale(.97) }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow) }
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2) }
.btn--small { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px }
.btn svg { width: 17px; height: 17px; flex: none }

/* ---------- nav: transparent over the hero, solid once the page moves, out of the way while reading down */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .5s var(--ease-out), background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent }
.nav.is-solid { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); border-color: var(--line) }
.nav.is-away { transform: translateY(-110%) }
.nav__in { display: flex; align-items: center; gap: 18px; height: 68px }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none }
.brand svg { width: 34px; height: 34px }
.brand svg rect { fill: var(--accent) }
.brand svg path { stroke: var(--accent-ink); stroke-width: 3.4; fill: none; stroke-linecap: round }
.brand b { font: 700 24px/1 var(--display); letter-spacing: .06em; text-transform: uppercase }
.brand b span { color: var(--accent) }
.links { position: relative; display: flex; gap: 2px; margin-left: 18px }
.links a { position: relative; z-index: 1; padding: 8px 13px; border-radius: 9px; color: var(--muted); font: 500 14.5px var(--body); text-decoration: none; transition: color .3s }
.links a:hover, .links a.is-on { color: var(--ink) }
.links__pill { position: absolute; top: 0; height: 100%; border-radius: 9px; background: var(--raise); border: 1px solid var(--line);
  transition: transform .5s var(--spring), width .5s var(--spring), opacity .3s; opacity: 0; pointer-events: none }
.nav__end { display: flex; align-items: center; gap: 10px; margin-left: auto }
/* the language toggle: two equal buttons and a pill that slides to the chosen one */
.lang { --cell: 46px; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--cell);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 2px; background: color-mix(in srgb, var(--panel) 60%, transparent) }
.lang::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: var(--cell); border-radius: 8px;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .55s var(--spring) }
html[data-lang="en"] .lang::before { transform: translateX(var(--cell)) }
.lang button { position: relative; z-index: 1; border: 0; background: none; color: var(--muted); font: 600 13px var(--body); padding: 5px 0;
  border-radius: 8px; cursor: pointer; transition: color .3s }
.lang button[aria-pressed="true"] { color: var(--ink) }
@media (max-width: 980px) { .links { display: none } }
@media (max-width: 520px) { .brand b { display: none } .nav__end .btn { display: none } }

/* ---------- type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent) }
h1, .h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; margin: 0; text-wrap: balance }
h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: .9 }
h1 em, .h2 em { font-style: normal; color: var(--accent) }
.h2 { font-size: clamp(36px, 5vw, 66px); line-height: .95; margin-bottom: 18px }
/* Thai stacks vowels and tone marks above and below the line; the tight display leading would cut them off */
h1:lang(th) { line-height: 1.18 }
.h2:lang(th) { line-height: 1.22 }
/* spacing letters apart pulls Thai marks away from their consonants: no tracked labels in Thai */
[lang="th"]:not(html) { letter-spacing: 0 }
.sub { color: var(--muted); font-size: 18px; max-width: 38em; margin: 0; text-wrap: pretty }
h3 { font: 600 18px/1.35 var(--body); margin: 0 0 6px }
section.block { padding-block: clamp(80px, 11vw, 140px); position: relative }
.block--alt { background: var(--bg-2) }

/* ---------- footer */
.foot { border-top: 1px solid var(--line); padding-block: 34px 48px; color: var(--faint); font-size: 14px }
.foot__in { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center }
.foot a { color: var(--muted) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .scroll-line { display: none }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important }
}

/* ---------- language switch: the old page blurs out, the other language rises in.
   View transitions where the browser has them; lang.js toggles .lang-out / .lang-in everywhere else. */
::view-transition-old(root) { animation: lang-old .26s var(--ease-in-out) both }
::view-transition-new(root) { animation: lang-new .5s var(--ease-out) both }
@keyframes lang-old { to { opacity: 0; filter: blur(8px); transform: translateY(-8px) } }
@keyframes lang-new { from { opacity: 0; filter: blur(8px); transform: translateY(10px) } }
html.lang-out main, html.lang-out .doc { opacity: 0; filter: blur(6px); transform: translateY(-6px); transition: opacity .17s, filter .17s, transform .17s }
html.lang-in main, html.lang-in .doc { animation: lang-new .5s var(--ease-out) both }

/* ---------- scrollbars: thin, rounded, no arrow buttons.
   Only the -webkit- rules in Chromium: setting the standard scrollbar-width/-color there switches these off and
   brings back the system bar with its arrows, so the standard pair is kept for browsers without them (Firefox). */
::-webkit-scrollbar { width: 12px; height: 12px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #2B363B; border-radius: 99px; border: 3px solid var(--bg); background-clip: padding-box; min-height: 48px }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box }
::-webkit-scrollbar-button { display: none; width: 0; height: 0 }
::-webkit-scrollbar-corner { background: transparent }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: #2B363B transparent } }

/* how far down the page you are: a thin teal line along the top edge, drawn by the browser from the scroll position */
.scroll-line { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; transform: scaleX(0) }
@supports (animation-timeline: scroll()) {
  .scroll-line { animation: scroll-line linear both; animation-timeline: scroll(root) }
}
@keyframes scroll-line { to { transform: scaleX(1) } }