/* iTimbang Panduan Pengguna — one stylesheet for every page, screen and print.
   Colours follow the app's tenant theme (green). */

:root {
  --hijau: #2f5d3a;
  --hijau-muda: #eaf0e9;
  --teks: #14231a;
  --kelabu: #6d7a6f;
  --garis: #d5d9d2;
  --latar: #eef0ec;
  --merah: #d0021b;
  --amber-latar: #fdf5e0;
  --amber: #8a6a12;
  --ralat-latar: #fbeceb;
  --ralat: #8f2f2a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.6 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--teks);
  background: var(--latar);
}
a { color: var(--hijau); }
code, kbd { font-family: Consolas, "Courier New", monospace; font-size: .92em; }
code { background: var(--hijau-muda); padding: 1px 5px; border-radius: 3px; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.susun { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sisi {
  background: #fff; border-right: 1px solid var(--garis);
  padding: 20px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sisi .jenama { font-weight: 800; color: var(--hijau); font-size: 20px; text-decoration: none; }
.sisi .sub { font-size: 12px; color: var(--kelabu); margin: 2px 0 18px; }
.sisi h2 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kelabu); margin: 18px 0 6px; }
.sisi ul { list-style: none; margin: 0; padding: 0; }
.sisi li a { display: block; padding: 5px 8px; border-radius: 4px; text-decoration: none; color: var(--teks); font-size: 14px; }
.sisi li a:hover { background: var(--hijau-muda); }
.sisi li a[aria-current="page"] { background: var(--hijau-muda); font-weight: 700; }
.sisi li .id { font-family: Consolas, monospace; color: var(--kelabu); font-size: 12px; margin-right: 6px; }
.sisi li .stub { color: var(--kelabu); }

main { padding: 32px 40px 80px; max-width: 980px; }
h1 { font-size: 30px; margin: 0 0 6px; }
.lead { color: var(--kelabu); margin: 0 0 28px; }

/* ── cover + contents (print only on screen they're light) ─────────────── */
.kulit { display: none; }
.kandungan { background: #fff; border: 1px solid var(--garis); padding: 16px 24px; margin-bottom: 32px; }
.kandungan h2 { font-size: 15px; margin: 0 0 8px; }
.kandungan ol { margin: 0; padding-left: 22px; }
.kandungan .stub { color: var(--kelabu); }

/* ── journey ─────────────────────────────────────────────────────────────── */
.perjalanan { margin-bottom: 56px; }
.perjalanan > header { border-bottom: 3px solid var(--hijau); margin-bottom: 20px; padding-bottom: 8px; }
.perjalanan > header .id { font-family: Consolas, monospace; background: var(--hijau); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 14px; margin-right: 8px; vertical-align: middle; }
.perjalanan > header h2 { display: inline; font-size: 24px; vertical-align: middle; }
.perjalanan > header p { margin: 8px 0 0; color: var(--kelabu); }
.perjalanan.stub > header { border-bottom-color: var(--garis); }
.perjalanan.stub .belum { background: #fff; border: 1px dashed var(--garis); padding: 14px 18px; color: var(--kelabu); }

.ringkas { background: #fff; border: 1px solid var(--garis); padding: 14px 20px; margin-bottom: 20px; }
.ringkas ol { margin: 6px 0 0; padding-left: 22px; }

/* ── step card ───────────────────────────────────────────────────────────── */
.langkah {
  background: #fff; border: 1px solid var(--garis); margin-bottom: 22px;
  padding: 18px 22px 20px; break-inside: avoid; page-break-inside: avoid;
}
.langkah > h3 { display: flex; gap: 12px; align-items: baseline; margin: 0 0 10px; font-size: 18px; }
.langkah > h3 .no {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--hijau); color: #fff; font-size: 16px; line-height: 32px; text-align: center;
}
.langkah figure { margin: 14px 0 12px; }
.langkah img { display: block; max-width: 100%; height: auto; border: 1px solid var(--garis); }
.langkah figcaption { font-size: 13px; color: var(--kelabu); margin-top: 6px; }

/* Numbered legend under a screenshot — the numbers match the red circles. */
ol.tanda { list-style: none; padding: 0; margin: 10px 0 0; }
ol.tanda > li { position: relative; padding-left: 36px; margin-bottom: 8px; min-height: 26px; }
ol.tanda > li::before {
  content: attr(data-n); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--merah); color: #fff; font: 700 13px/24px Arial, sans-serif; text-align: center;
  margin-top: 1px;
}
ol.tanda b { font-weight: 700; }

.contoh { background: var(--latar); border-left: 4px solid var(--hijau); padding: 10px 14px; margin: 12px 0 0; font-size: 14.5px; }
.contoh .tajuk { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--hijau); display: block; margin-bottom: 4px; }
.contoh dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; }
.contoh dt { font-weight: 600; }
.contoh dd { margin: 0; font-family: Consolas, monospace; }

.nota, .silap { padding: 10px 14px; margin: 12px 0 0; font-size: 14.5px; border: 1px solid; }
.nota { background: var(--amber-latar); border-color: #e0c97a; }
.silap { background: var(--ralat-latar); border-color: #e7b9b5; }
.nota > .tajuk, .silap > .tajuk { font-weight: 700; display: block; margin-bottom: 2px; }
.nota > .tajuk::before { content: "ⓘ "; }
.silap > .tajuk::before { content: "⚠ "; }
.silap table { border-collapse: collapse; width: 100%; margin-top: 6px; background: #fff; }
.silap th, .silap td { border: 1px solid #e7b9b5; padding: 8px 10px; vertical-align: top; text-align: left; font-size: 14px; }
.silap th { background: #f7dcd9; width: 26%; }

/* Printed slip, reproduced as text */
.slip { max-width: 100%; overflow-x: auto; }

/* ── landing ─────────────────────────────────────────────────────────────── */
.peranan { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.peranan a { display: block; background: #fff; border: 1px solid var(--garis); padding: 18px; text-decoration: none; color: var(--teks); }
.peranan a:hover { border-color: var(--hijau); }
.peranan b { display: block; font-size: 19px; color: var(--hijau); }
.peranan span { font-size: 14px; color: var(--kelabu); }

.versi { font-size: 12px; color: var(--kelabu); margin-top: 40px; }

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .susun { grid-template-columns: 1fr; }
  .sisi { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--garis); }
  main { padding: 20px 16px 60px; }
  .langkah { padding: 14px 14px 16px; }
  h1 { font-size: 24px; }
}

/* ── print: A4 portrait ─────────────────────────────────────────────────── */
@page {
  size: A4 portrait;
  margin: 15mm;
}
@media print {
  body { background: #fff; font-size: 11pt; line-height: 1.45; }
  .susun { display: block; }
  .sisi, .kandungan-skrin, .tiada-cetak { display: none !important; }
  main { padding: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }

  .kulit {
    display: flex; flex-direction: column; justify-content: center;
    height: 250mm; break-after: page; text-align: left;
  }
  .kulit .jenama { font-size: 28pt; font-weight: 800; color: var(--hijau); }
  .kulit h1 { font-size: 30pt; margin: 8mm 0 3mm; }
  .kulit p { font-size: 13pt; color: #333; margin: 0; }
  .kulit .versi { margin-top: 20mm; font-size: 10pt; }

  .kandungan { border: 0; padding: 0; break-after: page; }
  .kandungan h2 { font-size: 16pt; }

  .perjalanan { break-before: page; margin: 0; }
  .perjalanan.stub { break-before: auto; margin-bottom: 8mm; break-inside: avoid; }
  .perjalanan > header { break-after: avoid; }
  main > h1, main > .lead { display: none; }

  .langkah { border: 1px solid #999; padding: 4mm 5mm; margin-bottom: 5mm; }
  .langkah img { border-color: #999; max-height: 92mm; width: auto; max-width: 100%; margin: 0 auto; }
  .langkah figure { break-inside: avoid; margin: 3mm 0; }
  .langkah .slip img { max-height: 90mm; }
  /* Tall form shots sit left of their legend, so the card fits one page. */
  .langkah figure:has(img.tinggi) { float: left; width: 50%; margin: 1mm 5mm 2mm 0; }
  .langkah img.tinggi { max-height: 150mm; }
  .langkah:has(img.tinggi) .contoh, .langkah:has(img.tinggi) .nota,
  .langkah:has(img.tinggi) .silap, .langkah:has(img.tinggi) ol.tanda,
  .langkah:has(img.tinggi) > p { overflow: hidden; }
  .langkah:has(img.tinggi) .silap { clear: both; }
  .langkah::after { content: ""; display: block; clear: both; }
  .contoh:not(.senarai) dl { display: flex; flex-wrap: wrap; gap: 0 5mm; }
  .contoh dt::after { content: ":"; }
  .contoh dd { margin-right: 3mm; }
  ol.tanda > li { margin-bottom: 1.5mm; }
  .nota, .silap, .contoh { margin-top: 2.5mm; padding: 2mm 3mm; }
  .langkah > h3 .no { background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  ol.tanda > li::before, .contoh, .nota, .silap, .silap th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .contoh { border-left-color: #000; }
}