/* YOUR BIZX Investor Simulator — dark-first investor wizard. */

/* ---------- Theme tokens ---------- */
/* Dark is the primary theme: near-black page, white cards, brand blue. */
:root{
  --bg:#101317;
  --page-text:#e6e9ee;
  --brand:#2f6fd0;

  /* Sampled from the YOUR BIZX wordmark. */
  --wordmark:#e6e9ee;
  --wordmark-accent:#ff6b60;

  /* Orange for the Thai-words amount. The wordmark coral reads at only 2.79:1
     on a white card; this deeper tone clears WCAG AA at 5.18:1. */
  --warm:#c2410c;
  --heading:#1e5cb8;
  --lede:#c3d0e4;
  --eyebrow:#8fa8cc;

  --card:#ffffff;
  --card-text:#12213f;
  --card-body:#31435f;
  --card-muted:#5b7093;
  --line:#e3e9f2;

  --accent:#1b4d9b;
  --accent-text:#ffffff;
  --accent-soft:#e8eef9;

  --locked:#c9ccd1;
  --locked-text:#4a5160;
  --ok:#1b6b3f;
  --warn:#8a5100;

  --progress-off:#1b2740;
  --radius:14px;
}

.light{
  --bg:#eef3fa;
  --page-text:#12213f;
  --brand:#1b4d9b;
  --heading:#12325f;
  --lede:#41577d;
  --eyebrow:#5b7093;

  --card:#ffffff;
  --progress-off:#c7d5e8;
  --wordmark:#12213f;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}

[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg);
  color:var(--page-text);
  font:15px/1.6 "Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

button,input{font:inherit}

/* Thai runs have no spaces to break on, so long service names would otherwise
   push the page wider than a phone screen. */
.lede,.option-name,.option-alias,.option-desc,.option-meta,.use-badge,.tag-badge,.mini-badge,.source-note,.row dt,.score-note{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Headings do have spaces to break at, so they only break a word that cannot
   fit on its own line. */
h1{overflow-wrap:break-word}

/* Chrome segments Thai at dictionary word boundaries, which would split a
   phrase like อะไรได้บ้าง across lines. Keep marked phrases whole. */
.nowrap{white-space:nowrap}

h1,h2,p{margin:0}

.app{max-width:840px;margin:auto;padding:22px 18px 56px}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  color:var(--brand);
  font-size:13px;
  font-weight:800;
  letter-spacing:.09em;
}

.wordmark{letter-spacing:.06em}
.wordmark-your{color:var(--wordmark)}
.wordmark-bizx{color:var(--wordmark-accent)}

.brand-sep{color:var(--brand);opacity:.6}
.brand-sub{color:var(--brand)}

.topbar-actions{display:flex;gap:9px;align-items:center}

.icon-btn,
.pill-btn{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--card-text);
  cursor:pointer;
  border-radius:999px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.icon-btn{width:44px}
.pill-btn{padding:0 20px;font-weight:600}

.icon-btn:hover,
.pill-btn:hover{border-color:var(--accent)}

/* Half-filled circle: the light/dark switch. */
.icon-theme{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid var(--card-text);
  background:linear-gradient(90deg,var(--card-text) 0 50%,transparent 50% 100%);
}

/* ---------- Progress ---------- */
.progress{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:24px 0 30px;
}

.seg{height:4px;border-radius:2px;background:var(--progress-off)}
.seg.done{background:var(--accent)}
.seg.current{background:var(--brand)}

/* ---------- Step header ---------- */
.eyebrow{
  color:var(--eyebrow);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  margin-bottom:12px;
}

h1{
  color:var(--heading);
  font-size:clamp(34px,7vw,52px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:14px;
}

.lede{
  color:var(--lede);
  font-size:18px;
  line-height:1.65;
  margin-bottom:24px;
  max-width:56ch;
}
.lede strong{color:var(--brand)}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  color:var(--card-text);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:14px;
}

.card-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:14px;
  color:var(--card-text);
}

.muted{color:var(--card-muted)}

/* ---------- 01 Capital ---------- */
.field-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--card-text);
  margin-bottom:10px;
}

#capital{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--card-text);
  font-size:17px;
  letter-spacing:.02em;
}

#capital:focus{outline:2px solid var(--accent);outline-offset:1px}

.capital-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}

.amount{
  font-size:clamp(24px,4.4vw,30px);
  font-weight:800;
  color:var(--accent);
  line-height:1.25;
}

.thai-money{
  color:var(--warm);
  font-size:20px;
  font-weight:700;
  line-height:1.4;
  margin-top:2px;
}

/* Live preview of the licenses the entered capital reaches. */
.eligible{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.eligible-head{
  font-size:12px;
  font-weight:700;
  color:var(--card-muted);
  margin-bottom:10px;
}

.eligible-badges{display:flex;flex-wrap:wrap;gap:6px}

.mini-badge{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  max-width:100%;
}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid transparent;
  border-radius:10px;
  padding:13px 22px;
  cursor:pointer;
  font-weight:600;
}

.btn.primary{background:var(--accent);color:var(--accent-text)}
.btn.primary:hover{filter:brightness(1.12)}

.btn.ghost{background:var(--card);color:var(--card-text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}

.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}

.btn.block{width:100%;margin-top:6px}

/* ---------- Card grids (02 + 03) ---------- */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.option{
  background:var(--card);
  color:var(--card-text);
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:20px;
  cursor:pointer;
  text-align:left;
  width:100%;
  display:flex;
  flex-direction:column;
  transition:border-color .15s,background .15s;
}

.option:hover:not(.locked){border-color:var(--accent)}

/* The option is a <button>; its spans need to stack. */
.option > span{display:block}

.option.selected{background:var(--accent-soft);border-color:var(--accent)}

.option.locked{
  background:var(--locked);
  color:var(--locked-text);
  cursor:not-allowed;
  border-color:transparent;
}

.option-status{
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--ok);
  margin-bottom:12px;
}

.option.locked .option-status{color:var(--warn)}

/* Step 03 reuses the option card, but its label is a category, not a status. */
#models .option-status{color:var(--card-muted)}

.option-name{
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  line-height:1.45;
  margin-bottom:6px;
}

.option.locked .option-name{color:var(--locked-text)}

.option-alias{
  font-size:12.5px;
  font-weight:700;
  color:var(--card-text);
  margin-bottom:12px;
}

.option.locked .option-alias{color:var(--locked-text)}

.option-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--card-body);
  margin-bottom:16px;
}

.option.locked .option-desc{color:var(--locked-text)}

/* Badge row. Overrides the stacking rule above so pills sit side by side and
   wrap together. Labels are mixed Thai/Latin, so no letter-spacing — that only
   helps all-caps Latin. */
.option > .badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:14px;
}

.use-badge,
.tag-badge{
  max-width:100%;
  border-radius:999px;
  padding:5px 12px;
  font-size:12px;
  line-height:1.5;
}

/* Primary: the concrete business this license permits. */
.use-badge{
  background:var(--accent);
  color:var(--accent-text);
  font-weight:700;
}

/* Secondary: which BOT family the card belongs to. Only tags that can be
   sourced to a BOT document belong here. */
.tag-badge{
  background:transparent;
  border:1.5px solid var(--accent);
  color:var(--accent);
  font-weight:600;
  padding:3.5px 10px;
}

.option.locked .use-badge{background:var(--locked-text);color:var(--locked)}
.option.locked .tag-badge{border-color:var(--locked-text);color:var(--locked-text)}

/* Pin the capital line to the bottom so cards in a row stay aligned. */
.option-meta{
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  margin-top:auto;
  padding-top:4px;
}

.option-meta strong{font-weight:800}

.option.locked .option-meta{color:var(--locked-text)}
.option.locked .option-meta{color:var(--locked-text)}

/* Separates BOT-sourced facts from YOUR BIZX product copy, on screen rather
   than only in the README. */
.source-note{
  margin-top:14px;
  color:var(--eyebrow);
  font-size:12px;
  line-height:1.7;
  max-width:78ch;
}

/* ---------- Step navigation ---------- */
.stepnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
}

.stepnav-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.count{color:var(--lede);font-size:13px}

/* ---------- 04 Readiness ---------- */
.score-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

.score-ring{
  flex:none;
  width:92px;
  height:92px;
  border-radius:50%;
  border:3px solid var(--accent);
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:800;
  color:var(--accent);
}

.score-title{font-size:19px;font-weight:700;color:var(--card-text);margin-bottom:6px}
.score-note{font-size:13px;color:var(--card-muted);max-width:52ch}

.rows{margin:0}

.row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-top:1px solid var(--line);
}

.rows .row:first-child{border-top:0}

.row dt{color:var(--card-text);font-size:14px}
.row dd{margin:0;font-weight:700;color:var(--accent);font-size:14px;text-align:right}
.row dd.muted{font-weight:400;color:var(--card-muted)}

#sumServices{margin-top:16px;border-top:1px solid var(--line)}

/* ---------- Footer ---------- */
.disclaimer{
  margin-top:30px;
  color:var(--eyebrow);
  font-size:11.5px;
  line-height:1.7;
}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .capital-foot{align-items:stretch}
  .capital-foot .btn{width:100%}
  .stepnav{flex-direction:column-reverse;align-items:stretch}
  .stepnav .btn{width:100%}
  .stepnav-left{justify-content:space-between}
  .score-card{gap:16px}
}