/* Dasar: reset, tipografi, tombol, kontrol form, chip, utilitas. Hanya memakai token. */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: topbar yang menempel tidak menutupi elemen yang sedang fokus. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
a, button, input, select, summary { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 2px; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--subtle); padding: .05em .35em; border-radius: var(--r-sm); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: var(--sp-3); top: var(--sp-3); z-index: 100;
    background: var(--brand); color: var(--on-brand); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md); transform: translateY(-200%); text-decoration: none;
}
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }
.num, .panel__note, .pick__n { font-variant-numeric: tabular-nums; }

/* ---------- Tombol ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--control-h); padding: 0 var(--sp-4);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink);
    font-size: var(--fs-base); font-weight: 500; text-decoration: none; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--subtle); }
.btn:active { background: var(--line); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand); filter: brightness(1.2); }
.btn--primary:active { background: var(--brand); filter: brightness(1.35); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--icon { width: var(--control-h); padding: 0; position: relative; border-color: transparent; background: transparent; font-size: 1.1rem; color: var(--muted); }
.btn--icon:hover { color: var(--ink); }
.btn--block { width: 100%; }

/* ---------- Kontrol form ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field > label { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.input, .select select {
    width: 100%; height: var(--control-h); padding: 0 var(--sp-3);
    border: 1px solid var(--line-control); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink);
    transition: border-color var(--dur) var(--ease);
}
.input:hover, .select select:hover:not(:disabled) { border-color: var(--ink); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: var(--sp-8); cursor: pointer; }
.select::after {
    content: ""; position: absolute; right: var(--sp-3); top: 50%;
    width: .45rem; height: .45rem; margin-top: -.35rem;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg); pointer-events: none;
}
.select select:disabled { background: var(--subtle); color: var(--muted); border-color: var(--line-strong); cursor: not-allowed; }
.select:has(select:disabled)::after { opacity: .4; }

/* ---------- Chip & titik status ---------- */
/* Chip berbentuk label persegi kecil (bukan pil): pil dipakai tombol-bukan, status adalah label. */
.chip {
    display: inline-flex; align-items: center; gap: .3em;
    padding: .1rem .45rem; border-radius: var(--r-sm);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
    background: var(--unk-soft); color: var(--unk-ink);
}
.chip--ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip--to { background: var(--to-soft); color: var(--to-ink); }
.chip--tso { background: var(--tso-soft); color: var(--tso-ink); }
.chip--unk { background: var(--unk-soft); color: var(--unk-ink); }
.chip--muted { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; }

.dot { display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--unk); }
.dot--total { background: var(--total); }
.dot--ok { background: var(--ok); }
.dot--to { background: var(--to); }
.dot--tso { background: var(--tso); }
.dot--unk { background: var(--unk); }

/* Kode unit: satu-satunya teks monospace, agar kode seperti TJ-103 sejajar dan tidak salah baca. */
.unit { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-base); letter-spacing: 0; }

/*
 * Layar sentuh: sasaran ketuk 44px (pedoman Apple/WCAG 2.5.5). Kursor halus (desktop) tetap
 * ringkas 36px agar dashboard padat. Huruf input 16px mencegah iOS memperbesar halaman saat fokus.
 */
@media (pointer: coarse) {
    :root { --control-h: 2.75rem; --nav-row: 2.75rem; }
    .input, .select select { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }