/* Jejak — perakit query pencarian X.
   Alat kerja padat, bukan halaman pemasaran: satu aksen, satu radius,
   gerak seminimal mungkin karena tombolnya ditekan berkali-kali sehari. */

:root{
  color-scheme: dark light;

  --bg:        #0A0A0B;
  --panel:     #131316;
  --raised:    #1B1B20;
  --line:      rgb(255 255 255 / 11%);
  --line-2:    rgb(255 255 255 / 19%);
  --ink:       #F3F3F4;
  --ink-2:     rgb(243 243 244 / 66%);
  --ink-3:     rgb(243 243 244 / 48%);
  --accent:    #E4552E;
  --hover:     rgb(255 255 255 / 7%);
  --press:     rgb(255 255 255 / 12%);

  --r: 10px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:     #F5F5F6;
    --panel:  #FFFFFF;
    --raised: #F1F1F4;
    --line:   rgb(0 0 0 / 11%);
    --line-2: rgb(0 0 0 / 18%);
    --ink:    #101012;
    --ink-2:  rgb(16 16 18 / 68%);
    --ink-3:  rgb(16 16 18 / 54%);
    --hover:  rgb(0 0 0 / 5%);
    --press:  rgb(0 0 0 / 9%);
  }
}

*{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100% }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  font-feature-settings: "cv01" 1;
}

/* ---------------- bilah atas ---------------- */

.topbar{
  display:flex; align-items:center; gap:14px;
  height:64px; padding:0 32px;
  border-bottom:1px solid var(--line);
  background: var(--panel);
  position:sticky; top:0; z-index:10;
}
.mark{ width:19px; height:19px; fill: var(--ink); flex:none }
.wordmark{ font-size:16px; font-weight:600; letter-spacing:-.01em }
.tagline{
  margin:0; color: var(--ink-2); font-size:14px;
  padding-left:14px; border-left:1px solid var(--line);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:620px){ .tagline{ display:none } }

.kredit{ margin-left:auto; padding-left:16px; font-size:12.5px; color:var(--ink-3);
  white-space:nowrap }
.kredit b{ font-weight:500; color:var(--ink-2) }
@media (max-width:900px){ .kredit{ display:none } }

/* Tujuh butir tidak muat sebaris di ponsel. Menggulung ke samping tanpa tanda
   apa pun membuat butir terakhir tak pernah ditemukan, jadi di layar sempit
   bilahnya membungkus dua baris. Ia berhenti menempel di sana supaya tidak
   memakan tinggi layar yang memang sudah sempit. */
@media (max-width:620px){
  .topbar{ flex-wrap:wrap; height:auto; padding:12px 20px; gap:10px 12px; position:static }
  .switch{ margin-left:0; width:100%; overflow-x:visible; flex-wrap:wrap }
  .switch a{ padding:6px 11px }
}

/* Pemilih platform. Lambang di kiri mengikuti platform yang sedang dibuka. */
.switch{ display:flex; gap:2px; margin-left:4px; padding:3px; min-width:0;
  background:var(--raised); border:1px solid var(--line); border-radius:10px;
  overflow-x:auto; scrollbar-width:none }
.switch::-webkit-scrollbar{ display:none }
.switch a{ white-space:nowrap }
.switch a{ padding:6px 13px; border-radius:7px; font-size:13.5px; font-weight:500;
  color:var(--ink-2); text-decoration:none; transition:color .12s ease, background .12s ease }
.switch a:hover{ color:var(--ink); background:var(--hover) }
.switch a[aria-current]{ color:var(--ink); background:var(--panel);
  box-shadow:0 0 0 1px var(--line) }

/* ---------------- kerangka ---------------- */

.shell{
  max-width:1320px; margin:0 auto; padding:0 32px 80px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:48px; align-items:stretch;
}
.shell > *{ min-width:0 }
@media (max-width:1040px){ .shell{ grid-template-columns:minmax(0,1fr); gap:0 } }
@media (max-width:620px){ .shell{ padding:0 20px 64px } .topbar{ padding:0 20px } }

form > section{ padding:32px 0; border-top:1px solid var(--line) }
form > section:first-child{ border-top:0; padding-top:36px }

h2{ margin:0 0 3px; font-size:16px; font-weight:600; letter-spacing:-.01em }
.blurb{ margin:0 0 22px; color:var(--ink-2); font-size:14px; max-width:60ch }

/* ---------------- beranda ---------------- */

.beranda{ max-width:820px; margin:0 auto; padding:0 32px 96px }
@media (max-width:620px){ .beranda{ padding:0 20px 64px } }

.muka{ padding:72px 0 8px }
@media (max-width:620px){ .muka{ padding:48px 0 8px } }
h1{ margin:0 0 20px; font-size:34px; font-weight:600; line-height:1.15; letter-spacing:-.02em;
  max-width:16ch }
@media (max-width:620px){ h1{ font-size:27px } }
.utama{ margin:0 0 14px; font-size:16.5px; line-height:1.6; max-width:62ch }
.utama.tenang{ color:var(--ink-2) }

.kelompok{ padding:44px 0 0; border-top:1px solid var(--line); margin-top:44px }
.kelompok h2{ margin:0 0 20px; font-size:14px; font-weight:600; color:var(--ink-2) }

/* Daftar alat, bukan kotak seragam: judulnya yang membedakan, bukan bingkainya. */
.alat{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.alat a{ display:block; padding:18px; border-radius:12px; text-decoration:none;
  transition:background .12s ease }
.alat a:hover{ background:var(--raised) }
.alat strong{ display:block; font-size:19px; font-weight:600; color:var(--ink);
  letter-spacing:-.01em; margin-bottom:6px }
.alat a:hover strong{ color:var(--accent) }
.alat span{ display:block; font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:66ch }

.catatan{ display:grid; gap:18px }
.catatan p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:66ch }
.catatan b{ color:var(--ink); font-weight:600 }

.kaki{ margin-top:56px; padding-top:28px; border-top:1px solid var(--line) }
.kaki p{ margin:0 0 8px; font-size:14px; color:var(--ink) }
.kaki b{ font-weight:600 }
.kaki .tenang{ color:var(--ink-3); font-size:13px; max-width:60ch }

/* tautan pulang di pemilih alat */
.switch a.pulang{ color:var(--ink-2) }
.switch a.pulang:hover{ color:var(--ink) }

/* ---------------- kolom isian ---------------- */

.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; align-items:start }
.wide{ grid-column:1 / -1 }

/* Kotak teks dikelompokkan sendiri: menyandingkannya dengan isian satu baris
   membuat tinggi kolom timpang dan keterangan di bawahnya tidak sejajar. */
.areas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start }
@media (max-width:860px){ .areas{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .areas{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:520px){ .grid{ grid-template-columns:minmax(0,1fr) } }

.f label{ display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--ink) }
.hint{ display:block; margin-top:7px; font-size:13px; line-height:1.45; color:var(--ink-3) }

input, select, textarea{
  width:100%; padding:9px 11px;
  font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--raised);
  border:1px solid var(--line-2); border-radius:var(--r);
}
@media (prefers-color-scheme: light){
  input, select, textarea{ background:var(--panel) }
}
textarea{ min-height:74px; resize:vertical; line-height:1.5 }
select{ appearance:none; cursor:pointer; padding-right:11px }
input[type=number]{ font-variant-numeric:tabular-nums }
::placeholder{ color:var(--ink-3) }
input:hover, select:hover, textarea:hover{ border-color:var(--ink-3) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.checks{ display:grid; gap:14px; grid-column:1 / -1 }
.check{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start }
.check input{ width:16px; height:16px; margin:3px 0 0; accent-color:var(--accent) }
.check label{ margin:0; font-size:14.5px; font-weight:400 }
.check .hint{ grid-column:2; margin-top:3px }

.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
@media (max-width:520px){ .trio{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

/* ---------------- panel keluaran ---------------- */

aside{ padding-top:36px; position:relative }
@media (max-width:1040px){
  aside{ padding-top:0; border-top:1px solid var(--line); margin-top:8px }
}

.out{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
}
@media (min-width:1041px){
  .out{ position:sticky; top:88px; max-height:calc(100dvh - 112px);
        display:flex; flex-direction:column }
  .out-body{ overflow-y:auto; overscroll-behavior:contain }
}

.out-top{ padding:20px 20px 18px; border-bottom:1px solid var(--line) }
.out-top h2{ margin-bottom:12px }

.query{
  margin:0; padding:13px 14px 13px 15px;
  border-left:2px solid var(--accent);
  background:var(--raised); border-radius:0 var(--r) var(--r) 0;
  font-family:var(--mono); font-size:12.5px; line-height:1.65;
  white-space:pre-wrap; word-break:break-word;
}
.query.blank{ color:var(--ink-3); border-left-color:var(--line-2) }
.query.snippet{ border-left-color:var(--line-2); max-height:190px; overflow:auto;
  font-size:11.5px; line-height:1.55 }

.range{ margin:10px 0 0; font-size:12.5px; color:var(--ink-2);
  font-variant-numeric:tabular-nums }

.acts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px }
.acts.three{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.acts + .acts{ margin-top:10px; grid-template-columns:minmax(0,1fr) }
@media (max-width:400px){ .acts{ grid-template-columns:minmax(0,1fr) } }
button.big{ padding:15px 16px; font-size:15px; font-weight:600; border-radius:12px }

button{
  font:inherit; font-size:13.5px; font-weight:500; line-height:1;
  padding:10px 14px; border-radius:var(--r); cursor:pointer; white-space:nowrap;
  border:1px solid var(--line-2); background:transparent; color:var(--ink);
  transition:background .12s ease, border-color .12s ease;
}
button:hover{ background:var(--hover) }
button:active{ background:var(--press) }
button.solid{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
button.solid:hover{ opacity:.86; background:var(--ink) }
button.bare{ border-color:transparent; padding:8px 9px; color:var(--ink-2) }
button.bare:hover{ color:var(--ink) }
button:disabled{ opacity:.4; cursor:not-allowed }

.block{ padding:20px; border-top:1px solid var(--line) }
.block:first-child{ border-top:0 }
.block h3{
  margin:0 0 12px; font-size:13px; font-weight:600; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}
.count{ font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:400 }
.blank-note{ margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.5 }
.blank-note.pad-b{ margin-bottom:10px }
.hint.pad-b{ margin-bottom:16px }
.blank-note.pad-t{ margin-top:12px }
.query.pad-t{ margin-top:12px }
#copySnippet{ margin-top:12px }

/* Kotak bantu penyalinan; tidak boleh terlihat, tidak boleh menggeser tata letak. */
.offscreen{ position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none }

/* daftar jendela: isian berselang, bukan garis di tiap baris */
.slots{ list-style:none; margin:0; padding:0; font-variant-numeric:tabular-nums }
.slots li{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px }
.slots li:nth-child(odd){ background:var(--raised) }
.slots time{ flex:1; font-family:var(--mono); font-size:12px; color:var(--ink-2) }
.slots a{ font-size:13px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2) }
.slots a:hover{ border-bottom-color:var(--accent); color:var(--accent) }

.saver{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; margin-bottom:16px }

.saved{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.saved li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center;
           padding:9px 10px; border-radius:8px }
.saved li > div:first-child{ min-width:0 }
.saved span{ white-space:nowrap }
.saved li:hover{ background:var(--raised) }
.saved strong{ display:block; font-size:13.5px; font-weight:500;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.saved span{ font-size:12px; color:var(--ink-3); font-family:var(--mono);
             font-variant-numeric:tabular-nums }
.saved .row{ display:flex; gap:2px }

/* Panel sempit: nama pantauan dan tombolnya tidak muat sebaris. */
@media (max-width:620px){
  .saved li{ grid-template-columns:minmax(0,1fr); gap:8px }
  .saved .row{ justify-content:flex-start }
}

/* peta */
/* Layar penuh: peta menutupi halaman, tombol keluarnya ikut mengambang. */
body.peta-penuh{ overflow:hidden }
body.peta-penuh #map{ position:fixed; inset:0; height:auto; width:auto;
  margin:0; border:0; border-radius:0; z-index:50 }
body.peta-penuh #petaPenuh{ position:fixed; top:16px; right:16px; z-index:52;
  background:var(--panel); border-color:var(--line-2); box-shadow:0 2px 12px rgb(0 0 0 / 22%) }

/* Pengaturan ikut mengambang saat layar penuh: menyetel radius sambil melihat
   lingkarannya utuh adalah gunanya layar penuh. Elemennya sama, bukan salinan,
   jadi tidak ada nilai yang perlu disinkronkan. */
.kontrol-baris{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  align-items:start }
@media (max-width:640px){ .kontrol-baris{ grid-template-columns:minmax(0,1fr) } }
#petaKontrol .hint{ margin-top:10px }

body.peta-penuh #petaKontrol{ position:fixed; left:16px; bottom:16px; z-index:52;
  width:min(620px, calc(100vw - 32px)); padding:16px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 6px 28px rgb(0 0 0 / 30%) }
/* position:relative harus ditulis di sini. Kalau dibiarkan static, Leaflet
   menyetelnya sendiri sebagai gaya inline saat peta dibuat, dan gaya inline itu
   mengalahkan aturan layar penuh di bawah sehingga petanya tidak pernah melebar. */
#map{ position:relative; height:300px; border:1px solid var(--line-2);
  border-radius:var(--r); margin-bottom:20px }
.leaflet-container{ font:inherit; background:var(--raised) }
.leaflet-control-attribution{ font-size:11px; color:var(--ink-2) }
.leaflet-control-attribution a{ color:var(--ink-2) }
.leaflet-bar a{ color:#101012 }
/* Penanda bawaan Leaflet berwarna biru dan jadi satu-satunya warna asing di halaman. */
.pin{ width:14px; height:14px; border-radius:50%; background:#101012;
  box-shadow:0 0 0 3px #fff, 0 0 0 4px rgb(0 0 0 / 25%); cursor:grab }
input[type=range]{ padding:0; border:0; accent-color:var(--accent); height:24px; background:none }

.slots .nama{ flex:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px }
.slots time{ flex:1 }

/* daftar langkah bernomor */
.langkah{ margin:16px 0 0; padding-left:20px; display:grid; gap:9px;
  font-size:13.5px; color:var(--ink-2); line-height:1.5 }
.langkah li{ padding-left:4px }
.langkah b{ color:var(--ink); font-weight:500 }
.langkah code{ color:var(--ink) }

/* daftar arsip */
.arsip-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.arsip{ padding:11px 10px; border-radius:8px }
.arsip:nth-child(odd){ background:var(--raised) }
.arsip code{ display:block; font-family:var(--mono); font-size:12px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.arsip .row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:7px }
.arsip .row a{ font-size:13px; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line-2) }
.arsip .row a:hover{ color:var(--accent); border-bottom-color:var(--accent) }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}