/* KOMPONEN TAB & SEGMEN — SATU lembaran gaya dikongsi (pusingan 142). Dimuat oleh app & pendaratan (index.html, selepas rupa.css /
   kira.css / pendaratan.css) dan halaman awam yang mempunyai segmen (kalkulator — scripts/seo/halaman.mjs). Token warna daripada rupa.css
   (app) / seo.css (awam) — nilai yang SAMA (ujian-palet.mjs); setiap var() bersandaran supaya halaman tanpa token tetap terbaca.
   Markup (public/tab.js, $S/p142/serah/tab-antara-muka.md):
     TAB    <div class="tabBar" role="tablist" aria-label="…"><button type="button" role="tab" aria-selected="true" aria-controls="…">…
     SEGMEN <div class="tabBar" role="radiogroup" aria-label="…"><button type="button" role="radio" aria-checked="true">…
   Pengubah (bukan komponen baharu): .padat (teks 13px) · .sama (lebar sama, 2–4 pilihan) · .ikonAtas (ikon di atas label < 560px) ·
   .balut (membalut ke baris baharu ≥ 640px; katalog pendaratan). Keadaan dibaca daripada ARIA sahaja (aria-selected/aria-checked).
   Pengawal: ujian-tab142-satu.mjs (statik) & kategori "tab" semak-reka (scripts/periksa-reka.mjs) — tiada kelas varian tab/segmen lain. */
.tabBar{display:flex;align-items:stretch;gap:4px;box-sizing:border-box;min-width:0;max-width:100%;margin:10px 0;padding:4px;
  background:var(--kertas3,#EBE6DA);border-radius:999px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline:24px}
.tabBar::-webkit-scrollbar{display:none}
.tabBar>[role=tab],.tabBar>[role=radio]{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  min-width:44px;min-height:44px;margin:0;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--pudar,#615B74);
  font:inherit;font-size:14px;font-weight:650;line-height:1.2;letter-spacing:0;text-align:center;text-decoration:none;text-transform:none;
  white-space:normal;overflow-wrap:normal;max-width:100%;
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:background-color var(--gerak,.18s) ease,color var(--gerak,.18s) ease,box-shadow var(--gerak,.18s) ease}
@media(hover:hover){.tabBar>[role=tab]:not([aria-selected=true]):hover,.tabBar>[role=radio]:not([aria-checked=true]):hover,.tabBar>label:hover>input:not(:checked)+span{color:var(--dakwat,#1D1930)}}
.tabBar>[aria-selected=true],.tabBar>[aria-checked=true]{background:var(--kertas2,#FFFDF9);color:var(--cop,#3F2A86);
  box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 0 0 1px var(--garis,#DDD6C8)}
/* Label sebaris (lebar max-content dalam jalur menatal); label yang LEBIH lebar daripada jalur (cth. "🏢 Perniagaan & akaun 20" pada 320px)
   dihadkan kepada lebar bar & membalut di antara perkataan — tidak pernah terpotong/tersorok separuh di luar jalur. */
/* Fokus papan kekunci DI DALAM butang (bar menatal mendatar memotong cincin luar). */
.tabBar>[role=tab]:focus-visible,.tabBar>[role=radio]:focus-visible{outline:2px solid var(--cop,#3F2A86);outline-offset:-3px;box-shadow:none}
.tabBar>[role=tab]:disabled,.tabBar>[role=radio]:disabled,.tabBar>[aria-disabled=true]{opacity:.5;cursor:not-allowed}
/* Ikon (emoji / ikon("…")) & kiraan. */
.tabBar>[role=tab]>[aria-hidden=true],.tabBar>[role=radio]>[aria-hidden=true]{flex:none;font-size:1.05em;line-height:1}
.tabBar .tabN{flex:none;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--kertas2,#FFFDF9);color:var(--pudar,#615B74);
  font-size:11.5px;font-weight:800;font-style:normal;line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}
.tabBar>[aria-selected=true] .tabN,.tabBar>[aria-checked=true] .tabN{background:var(--cop,#3F2A86);color:var(--atas-cop,#FFFFFF)}
/* Segmen dengan radio ASLI (<label><input type="radio"><span>…</span></label> dalam .tabBar[role=radiogroup]) — rupa SAMA; papan
   kekunci & keadaan oleh pelayar (:checked), tanpa :has() (iOS 15.0–15.3). */
.tabBar>label{position:relative;flex:1 0 auto;display:flex;min-width:44px;min-height:44px;cursor:pointer}
:where(.tabBar)>label{margin:0;padding:0}
.tabBar>label>input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tabBar>label>span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;padding:4px 14px;border-radius:999px;
  color:var(--pudar,#615B74);font-size:14px;font-weight:650;line-height:1.2;text-align:center;
  transition:background-color var(--gerak,.18s) ease,color var(--gerak,.18s) ease,box-shadow var(--gerak,.18s) ease}
.tabBar>label>input:checked+span{background:var(--kertas2,#FFFDF9);color:var(--cop,#3F2A86);box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 0 0 1px var(--garis,#DDD6C8)}
.tabBar>label>input:focus-visible+span{outline:2px solid var(--cop,#3F2A86);outline-offset:-3px}
.tabBar.sama>label{flex:1 1 0;min-width:0}
/* Petunjuk tepi bila jalur melimpah (data-limpah oleh tab.js): tepi yang masih ada tab dipudarkan — tiada skrol mendatar halaman. */
.tabBar[data-limpah~=kanan]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.tabBar[data-limpah~=kiri]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);mask-image:linear-gradient(90deg,transparent,#000 32px)}
.tabBar[data-limpah="kiri kanan"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}

/* ── Tema gelap (tanpa "kontras tinggi" — blok kontras di bawah mengambil alih): trek lebih GELAP daripada kad (kertas) bersempadan garis, item terpilih TERANGKAT (kertas3) — hierarki terang/gelap sama
   seperti tema terang (pilihan "timbul" dari trek), bukan cip lebih gelap daripada trek. ── */
@media screen and (prefers-color-scheme:dark) and (prefers-contrast:no-preference){
  :root:not([data-tema=terang]) .tabBar{background:var(--kertas,#110F1A);box-shadow:inset 0 0 0 1px var(--garis,#352D47)}
  :root:not([data-tema=terang]) .tabBar>[aria-selected=true],:root:not([data-tema=terang]) .tabBar>[aria-checked=true],
  :root:not([data-tema=terang]) .tabBar>label>input:checked+span{background:var(--kertas3,#251F33);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px var(--garis,#352D47)}
}
@media screen and (prefers-contrast:no-preference){
  :root[data-tema=gelap] .tabBar{background:var(--kertas,#110F1A);box-shadow:inset 0 0 0 1px var(--garis,#352D47)}
  :root[data-tema=gelap] .tabBar>[aria-selected=true],:root[data-tema=gelap] .tabBar>[aria-checked=true],
  :root[data-tema=gelap] .tabBar>label>input:checked+span{background:var(--kertas3,#251F33);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px var(--garis,#352D47)}
}

/* ── Pengubah ── */
.tabBar.padat>[role=tab],.tabBar.padat>[role=radio]{padding:0 10px;font-size:13px}
.tabBar.sama>[role=tab],.tabBar.sama>[role=radio]{flex:1 1 0;min-width:0;padding:4px 8px;white-space:normal;overflow-wrap:normal}
@media(max-width:559px){
  .tabBar.ikonAtas{border-radius:18px}
  .tabBar.ikonAtas>[role=tab],.tabBar.ikonAtas>[role=radio]{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;min-height:56px;padding:6px 4px;
    border-radius:14px;font-size:12.5px;line-height:1.15;white-space:normal;overflow-wrap:normal}
  .tabBar.ikonAtas>*>[aria-hidden=true]{font-size:18px}
}
@media(max-width:359px){.tabBar.ikonAtas>[role=tab],.tabBar.ikonAtas>[role=radio]{font-size:11.5px;padding:6px 2px}}
@media(min-width:640px){.tabBar.balut{flex-wrap:wrap;overflow:visible;border-radius:22px;-webkit-mask-image:none;mask-image:none}
  .tabBar.balut>[role=tab],.tabBar.balut>[role=radio]{flex:0 1 auto}}

/* ── Teks besar (Tetapan › Paparan) ── */
body.besar .tabBar>[role=tab],body.besar .tabBar>[role=radio],body.besar .tabBar>label>span{font-size:16px}
body.besar .tabBar>[role=tab],body.besar .tabBar>[role=radio],body.besar .tabBar>label{min-height:50px}
body.besar .tabBar.ikonAtas>[role=tab],body.besar .tabBar.ikonAtas>[role=radio]{font-size:14px}
/* ── Kontras tinggi: sempadan & tab terpilih berisi warna cop ── */
@media(prefers-contrast:more){
  .tabBar{background:var(--kertas,#F6F3EC);box-shadow:inset 0 0 0 1px var(--dakwat,#1D1930)}
  .tabBar>[role=tab],.tabBar>[role=radio],.tabBar>label>span{color:var(--dakwat,#1D1930)}
  .tabBar>[aria-selected=true],.tabBar>[aria-checked=true],.tabBar>label>input:checked+span{background:var(--cop,#3F2A86);color:var(--atas-cop,#FFFFFF);box-shadow:none}
}
@media(forced-colors:active){
  .tabBar{border:1px solid CanvasText;-webkit-mask-image:none;mask-image:none}
  .tabBar>[aria-selected=true],.tabBar>[aria-checked=true],.tabBar>label>input:checked+span{outline:2px solid Highlight;outline-offset:-2px}
}
/* ── Kurangkan gerakan ── */
@media(prefers-reduced-motion:reduce){.tabBar>[role=tab],.tabBar>[role=radio],.tabBar>label>span{transition:none}}
/* ── Cetak: hanya label tab/pilihan semasa, tanpa trek & pudar ── */
@media print{
  .tabBar{display:block;margin:0 0 8px;padding:0;background:none;box-shadow:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .tabBar>[role=tab],.tabBar>[role=radio],.tabBar>label{display:none}
  .tabBar>[aria-selected=true],.tabBar>[aria-checked=true],.tabBar>label:has(>input:checked){display:inline-flex;min-height:0;padding:0;background:none;box-shadow:none;color:#000;font-weight:700}
  .tabBar>label>span{background:none;box-shadow:none;color:#000}
  :where(.tabBar)>label>span{padding:0}
}