/* RaceMaps guide pages only — theme inspired by the download-page screenshot.
   Landing index.html / index_en.html do NOT load this stylesheet.
   Colors: soft sky-blue surround, fresh white content panels, very light blue inner cards,
   navy blue type, bright sky-blue emphasis. Preserve original page layouts.
*/
:root {
  --bg:#f1f7ff;--bg0:#f1f7ff;--bg1:#f8fbff;
  --panel:#fff;--card:#fff;--card2:#f8fbff;
  --text:#142b43;--ink:#142b43;--muted:#506a83;
  --link:#1768b2;--accent:#317ec4;--accent2:#1768b2;
  --border:#dbe7f3;--line:#dbe7f3;
  --shadow:0 19px 48px rgba(30,86,143,.075);
  --shadow2:0 9px 26px rgba(30,86,143,.055);
  --radius:26px;
  --lime:#9edbff;--mint:#b9e7ff;--paper:#f1f7ff;
}
html {background:#f1f7ff;color:#142b43;scroll-behavior:smooth}
body {
  background:
    radial-gradient(950px 800px at -9% 0%,rgba(156,210,250,.58),transparent 76%),
    radial-gradient(850px 750px at 108% 9%,rgba(184,217,248,.43),transparent 76%),
    radial-gradient(1000px 750px at 30% 100%,rgba(195,225,250,.25),transparent 78%),
    linear-gradient(125deg,#e7f4ff 0%,#f9fbff 52%,#edf5fc 100%) !important;
  color:#142b43;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
* {overflow-wrap:break-word}
a{color:#1768b2;text-decoration:none}
a:hover{color:#155694}
:focus-visible{outline:3px solid #4296d6;outline-offset:3px}

/* White rounded content panels, like the two QR store cards. */
header,.card,nav,.section,.kpi .box {
  color:#142b43;
  background:#fff !important;
  border:1px solid #dce8f4;
  border-radius:28px;
  box-shadow:0 20px 48px rgba(30,86,143,.078);
}
header{padding:clamp(26px,3.6vw,43px);margin-bottom:21px}
.card,nav,.section{padding:clamp(20px,2.4vw,29px)}
header .grid .card,header .grid nav {
  background:#f8fbff !important;
  border:1px solid #dce8f4;
  border-radius:21px;
  box-shadow:0 8px 22px rgba(27,66,112,.045);
}
header .grid .card li,header .grid nav li,
header .grid .card h2,header .grid nav h2{color:#1d3853}
header .grid nav a{color:#226eb1}
header .grid .card .note{background:#eef7ff;color:#2c506c}

/* Staff SOP header is two adjacent cards: make both light, not dark navy. */
.hero>.card:first-child{
  background:#fff !important;
  color:#142b43;
  border:1px solid #dce8f4;
  border-radius:28px;
  box-shadow:0 20px 48px rgba(30,86,143,.078);
}
.hero>.card:first-child::before,.card::before{background:none !important}
.hero>.card:first-child .h1{color:#123455}
.hero>.card:first-child .sub{color:#526c82}
.hero>.card:first-child .cols .col li,
.hero>.card:first-child .cols .col ul{color:#34536b}
.hero>.card:first-child .cols .col h3{color:#23669b}
.hero>.card:first-child .callout{
  background:#edf6ff;color:#365c79;
  border:1px solid #c8e2f5;
}
.hero>.card:first-child .callout b{color:#1d5a8c}
.hero>.card:first-child .kpi .box{
  background:#f7fbff !important;color:#325677;box-shadow:none;
}
.hero>.card:first-child .kpi .box b{color:#1c659b}
.hero>.card:first-child a{color:#1768b2}

/* Typography: bigger forest-green headings, readable gray-green support text. */
header h1,header .h1,.hero .h1{
  color:#142b43;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Segoe UI",sans-serif;
  font-size:clamp(31px,3.7vw,45px);
  font-weight:850;
  letter-spacing:-.038em;
  line-height:1.2;
}
header .sub,header p,header .muted,.hero .sub{color:#546c83;font-size:16px;line-height:1.65}
.section h2,.section h3,.card h2,.card h3,nav h2{color:#163f65}
.section>h2,section>h2{font-size:clamp(23px,2.6vw,31px);line-height:1.28;letter-spacing:-.025em}
.card.steps h3,.section h3{font-size:clamp(19px,2.05vw,24px);line-height:1.38;letter-spacing:-.015em}
.card li,.section li,.steps li,nav li,.card p,.section p,.callout,.note,.warn,.ok {line-height:1.75}
.card li,.section li,.steps li{font-size:16.5px;margin-bottom:8px}
.card ol,.card ul,.section ol,.section ul{padding-left:1.48em}
.card.steps li+li{margin-top:10px}
nav .toc a,.toc a{color:#2169a9;font-size:16px;line-height:1.58}
nav .toc li{margin-bottom:9px}
.section h2,.section h3,nav h2{margin-bottom:13px}
section>h2,.card>h2{border-left:4px solid #79bce8;padding-left:14px}
.kpi .box b{color:#1e6499}

/* Dark App Store button and lime Google Play button visual language. */
.badge,.pill,.hero>.card:first-child .pill,.hero>.card:first-child .badge{
  color:#285b84;background:#e8f5ff;border:1px solid #c8e6fc;
  box-shadow:none;border-radius:999px;
}
.pageLink,.lang-link,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:#183c65;
  border:1px solid #183c65;
  border-radius:12px;
  box-shadow:none;
  line-height:1.45;font-size:14.5px;font-weight:750;text-decoration:none;
}
.pageLink:hover,.lang-link:hover,.btn:hover{
  background:#285984;color:#fff;border-color:#285984;text-decoration:none;
}
.pageLink.active,.lang-link.active{
  color:#153957;background:#9edbff;border-color:#83cafa;
}
.pageLink small{color:inherit;opacity:.88}
.pageLinks{gap:10px}
.pageLink{min-height:42px}
.note,.ok{background:#edf7ff;color:#365877}
.warn{background:#fff6e6;color:#65441e}
/* Remove the thick left accent border from informational boxes across all guides. */
.note,.warn,.ok,.callout{border-left:0 !important}

/* Inner media cards: soft ivory behind screenshots and captions. */
figure.shot,.thumb,.preview-card,.video-card{
  background:#f8fbff;
  border:1px solid #dce8f4;
  box-shadow:0 8px 23px rgba(30,86,143,.055);
  border-radius:19px;
}
img.ss,.thumb img{background:#e7f2fb}
figure.shot figcaption,.thumb span,figcaption{
  color:#546a80;font-size:13.5px;line-height:1.65;
}
.thumb:hover{background:#eef7ff}
.small,footer{font-size:13.5px;line-height:1.6;color:#677f95}

/* Light ivory surfaces for nested cards, avoid blue/purple remnants. */
.cols .col{border-color:#dae6f2}
.callout,.note{border-radius:13px}

@media(max-width:680px){
  body{font-size:16px;line-height:1.73}
  header{padding:23px 17px;border-radius:22px}
  .card,nav,.section{padding:19px 16px;border-radius:20px}
  .hero>.card:first-child{border-radius:22px}
  header h1,header .h1,.hero .h1{font-size:clamp(27px,6.5vw,35px)}
  .card li,.section li,.steps li{font-size:15.5px}
  .pageLink,.lang-link,.btn{font-size:13.5px}
  figure.shot figcaption,.thumb span,figcaption{font-size:13px}
}

/* V2 readability merge: keep the cleaner blue V2 cards, borrow the original
   guide's nearly-black text contrast, and make navigation less distracting. */
:root {
  --text:#0b1220;
  --ink:#0b1220;
  --muted:#475569;
  --shadow:0 9px 26px rgba(30,86,143,.055);
  --shadow2:0 5px 18px rgba(30,86,143,.04);
}
html,body{color:#0b1220}
header,.card,nav,.section,.kpi .box,.hero>.card:first-child{
  color:#0b1220;
  box-shadow:0 9px 26px rgba(30,86,143,.055);
}
header h1,header .h1,.hero .h1,
.section h2,.section h3,.card h2,.card h3,nav h2{
  color:#0b1220;
}
header .grid .card li,header .grid nav li,
.hero>.card:first-child .cols .col li,
.hero>.card:first-child .cols .col ul{
  color:#182536;
}
header .sub,header p,header .muted,.hero .sub,
figure.shot figcaption,.thumb span,figcaption{
  color:#475569;
}
.pageLink,.lang-link,.btn{
  color:#21456a;
  background:#fff;
  border:1px solid #cddfee;
  box-shadow:none;
}
.pageLink:hover,.lang-link:hover,.btn:hover{
  color:#164a7a;
  background:#edf6ff;
  border-color:#91c9ee;
}
.pageLink.active,.lang-link.active,
.pageLink[aria-current="page"],.lang-link[aria-current="page"]{
  color:#103a65;
  background:#bde6ff;
  border-color:#8ac7ef;
  font-weight:800;
}
figure.shot,.thumb,.preview-card,.video-card{
  box-shadow:0 5px 16px rgba(30,86,143,.04);
}
/* Preserve the requested border-free information boxes. */
.note,.warn,.ok,.callout{border-left:0 !important}

@media print{
  html,body{background:#fff !important}
  header,.card,nav,.section,figure.shot,.thumb{box-shadow:none}
}