/* ==========================================================================
   PACOdex — User Guide page styles
   Revision: 261113.r1
   Loaded only by guide.html, on top of style.css (which owns the theme
   tokens, header, footer and buttons). Everything here uses those tokens,
   so dark and light mode both work with no extra rules.
   ========================================================================== */

/* ---------- Guide hero ---------- */
.g-hero {
  position: relative;
  padding: 120px 0 36px;
  text-align: center;
}
.g-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.1;
  margin: 18px 0 14px;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.g-hero__lead {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 2.1vw, 1.1rem);
}
.g-hero__meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--dim);
}
.g-hero__meta b { color: var(--muted); font-weight: 600; }

/* ---------- Layout: sticky contents + body ---------- */
.g-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 80px;
}
.g-toc {
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 16px;
}
.g-toc h2 {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}
.g-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.g-toc li { counter-increment: toc; }
.g-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.g-toc a::before {
  content: counter(toc);
  flex: none;
  width: 1.4em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
.g-toc a:hover { background: var(--surface-2); color: var(--text); }
.g-toc a[aria-current="true"] {
  background: var(--surface-2);
  color: var(--heading);
  font-weight: 600;
}
.g-toc a[aria-current="true"]::before { color: var(--link-accent); }

/* ---------- Sections ---------- */
.g-sec { scroll-margin-top: 92px; padding: 10px 0 44px; }
.g-sec + .g-sec { border-top: 1px solid var(--border); padding-top: 44px; }
.g-sec h2 {
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 3.4vw, 1.95rem);
  color: var(--heading);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.g-sec h3 {
  font-family: var(--font-head);
  font-size: 1.08rem;
  color: var(--heading);
  margin: 30px 0 10px;
}
.g-sec > p, .g-sec li { color: var(--muted); }
.g-sec__intro { font-size: 1.02rem; margin: 0 0 24px; }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 52px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: var(--grad-btn);
}
/* connector line between steps */
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 10px;
  width: 1px;
  background: var(--border-strong);
}
.steps > li > b,
.steps > li > strong {
  display: block;
  color: var(--heading);
  font-family: var(--font-head);
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.steps > li p { margin: 0 0 8px; }
.steps ul { margin: 8px 0 0; padding-left: 18px; }
.steps ul li { margin-bottom: 5px; }

/* ---------- UI label chips ---------- */
.ui {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--heading);
  font-family: var(--font-head);
  font-size: 0.86em;
  font-weight: 600;
  white-space: nowrap;
}
.path { color: var(--heading); font-weight: 600; white-space: nowrap; }

/* ---------- Callouts ---------- */
.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--indigo-lite);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 0.94rem;
  color: var(--muted);
}
.note b { color: var(--heading); }
.note p { margin: 0; }
.note p + p { margin-top: 8px; }
.note--tip { border-left-color: var(--amber); }
.note--warn { border-left-color: var(--red); }
.note--warn b { color: var(--red); }
:root[data-theme="light"] .note--warn b { color: #C01B32; }

/* ---------- Field / glossary tables ---------- */
.g-table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 0.93rem; }
.g-table th, .g-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.g-table th {
  font-family: var(--font-head);
  color: var(--heading);
  font-weight: 600;
  white-space: nowrap;
}
.g-table td { color: var(--muted); }
.g-table tbody tr:last-child th, .g-table tbody tr:last-child td { border-bottom: 0; }
.g-table--wrap th { white-space: normal; }

.g-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Screen tour cards ---------- */
.tour { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.tour__item {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
}
.tour__item h3 { margin: 10px 0 6px; font-size: 1rem; }
.tour__item p { margin: 0; font-size: 0.91rem; color: var(--muted); }
.tour__ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-btn);
}
.tour__ic .icon { width: 19px; height: 19px; }

/* ---------- Top strip: back link + language switcher ---------- */
.g-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  text-align: left;
}
.g-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 6px 0;
}
.g-back:hover { color: var(--text); }
.g-back .icon-sm { transform: rotate(180deg); }

.g-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
}
.g-lang a {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.g-lang a:hover { color: var(--text); background: var(--surface-2); }
.g-lang a[aria-current="page"] {
  color: #fff;
  background: var(--grad-btn);
  font-weight: 600;
}

/* ---------- CJK typography ----------
   Inter and Outfit carry no Chinese glyphs, and a CJK webfont would add
   megabytes to a guide page. Fall back to the platform's own UI face and
   open the leading a little, which Chinese text needs to stay readable. */
:root[lang="zh-CN"] body,
:root[lang="zh-CN"] .g-sec h2,
:root[lang="zh-CN"] .g-sec h3,
:root[lang="zh-CN"] .steps > li > b,
:root[lang="zh-CN"] .ui,
:root[lang="zh-CN"] .g-table th {
  font-family: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;
}
:root[lang="zh-CN"] body { line-height: 1.8; }
:root[lang="zh-CN"] .g-hero h1,
:root[lang="zh-CN"] .logo { font-family: "Outfit", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
:root[lang="zh-CN"] .g-hero h1 { letter-spacing: 0; }
/* Latin product names and UI chips inside Chinese text keep their tracking */
:root[lang="zh-CN"] .g-table th { white-space: normal; }

/* Malay runs longer than English — let nav and chips wrap rather than clip */
:root[lang="ms-MY"] .g-lang a { font-size: 0.8rem; padding: 5px 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .g-layout { grid-template-columns: 1fr; gap: 26px; }
  .g-toc { position: static; }
  .g-toc ol { columns: 2; column-gap: 14px; }
}
@media (max-width: 640px) {
  .g-topbar { flex-direction: column; align-items: center; gap: 14px; }
  .g-lang { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 560px) {
  .g-hero { padding-top: 104px; }
  .g-toc ol { columns: 1; }
  .steps > li { padding-left: 44px; }
  .steps > li::before { width: 30px; height: 30px; font-size: 0.88rem; }
  .steps > li:not(:last-child)::after { left: 15px; top: 36px; }
}