/* =====================================================================
   Ops Trip — gaya app. Semua nilai brand datang dari tokens.css, yang
   disalin ke folder ini oleh scripts/sinkron-token.sh. Nol hex lepas.
   Aturannya di docs/context/DESIGN.md.
   ===================================================================== */

:root{
  /* Hijau ikonik WhatsApp dengan teks putih, dipilih Indra 20 Agu sesudah
     melihat dua-duanya di layar. Kombinasi ini persis yang dipakai WhatsApp
     sendiri di tombol-tombolnya.
     Diketahui dan diterima: kontrasnya 1,98:1, di bawah ambang 4,5:1. Kalau
     suatu saat keterbacaannya jadi masalah di layar terang, --wa cukup diganti
     #0F8A43 yang masih terbaca sebagai hijau WhatsApp dan lolos di 4,43:1.
     Tombol "sudah di-WA" memakai varian lembut dan tidak terpengaruh. */
  --wa:        #25D366;
  --wa-hover:  #1EBE5D;
  --wa-tinta:  var(--n-0);
  --wa-soft:   var(--green-50);
  --soon-soft: var(--highlight-soft);

  /* Permukaan gelap. --bg-inverse sudah ada di tokens.css tapi tidak pernah
     punya pasangan tinta, jadi seluruh teks di papan uang mewarisi --text-1
     yang gelap dan hilang di atas biru tua. Ketahuan 19 Agu waktu layar
     Analisa pertama kali dibuka dengan data sungguhan.
     Tiga nilai ini masih usulan masuk brandbook, belum diputuskan. Selama
     belum, tempatnya di sini, bukan disalin ke tokens.css yang di-sync. */
  --on-inverse-1:   var(--n-0);        /* 12.6:1 di atas --bg-inverse */
  --on-inverse-2:   var(--blue-200);   /* 7.2:1, teks pendukung */
  --border-inverse: rgba(255,255,255,.14);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    120ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-page);font-family:var(--f-text);
  font-size:var(--d-body);line-height:var(--d-body-lh);color:var(--text-1);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button,input,select{font-family:inherit}
a{color:var(--text-link)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);
  outline-offset:var(--focus-ring-offset)}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.xs{width:15px;height:15px}

/* Bendera digambar sebagai SVG, bukan emoji. Rasionya tetap 20x15 supaya
   kolom negara rata, dan yang tidak dikenali tetap dapat bendera netral
   ketimbang kosong. Aturannya di DESIGN.md. */
.fg{width:20px;height:15px;flex:none;vertical-align:-2px;
  border-radius:2.5px;box-shadow:0 0 0 1px rgba(17,24,32,.09)}
.fg.sm{width:16px;height:12px;vertical-align:-1px}
.negara{display:inline-flex;align-items:center;gap:var(--s-2)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg-surface);
  border-bottom:1px solid var(--border);box-shadow:var(--e-1)}
.topbar-in{max-width:1160px;margin:0 auto;height:60px;padding:0 var(--s-5);
  display:flex;align-items:center;gap:var(--s-4)}
.brand{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.mark{width:36px;height:36px;border-radius:var(--r-full);flex:none;
  display:block;object-fit:cover}
.mark.besar{width:64px;height:64px;margin:0 auto}
.brand-name{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h3);line-height:1.1;letter-spacing:-.01em}

.topbar-kanan{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
/* Tombol muat ulang sekaligus penunjuk kapan datanya terakhir disegarkan.
   Digabung karena dua elemen terpisah untuk satu urusan cuma menambah benda
   di header tanpa menambah arti. */
.btn.segar{gap:var(--s-2);font-weight:var(--fw-medium);color:var(--text-2);
  border-color:var(--border);font-variant-numeric:tabular-nums}
.btn.segar:hover{color:var(--text-1);border-color:var(--border-strong)}
.btn.segar .ic{width:15px;height:15px}
.btn.segar.sibuk .ic{animation:spin .9s linear infinite}
.btn.segar.basi{border-color:var(--orange-200);background:var(--warning-soft);
  color:var(--warning-text)}
.tanggal-kini{font-size:var(--d-sm);font-weight:var(--fw-semi);color:var(--text-1);
  white-space:nowrap}

/* ---------- kerangka ---------- */
.shell{max-width:1160px;margin:0 auto;padding:var(--s-5) var(--s-5) var(--s-8)}
.page{display:none}
.page.on{display:block}
.head{margin-bottom:var(--s-4);display:flex;align-items:flex-end;
  justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.head h1{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h1);line-height:var(--d-h1-lh);letter-spacing:-.015em}
.head p{font-size:var(--d-sm);color:var(--text-2);margin-top:var(--s-1)}
.lede{font-size:var(--d-sm);color:var(--text-2)}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:var(--d-btn-h);padding:0 var(--d-btn-px);border-radius:var(--r-full);
  border:1.5px solid var(--border-strong);background:var(--bg-surface);
  color:var(--text-1);font-size:var(--d-sm);font-weight:var(--fw-semi);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out)}
.btn:hover{background:var(--bg-sunken)}
.btn:active{transform:translateY(1px)}
.btn.sm{height:32px;padding:0 var(--s-3);font-size:var(--d-xs)}
.btn.wide{width:100%}
.btn.action{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.action:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--action)}
.btn.quiet:hover{background:var(--action-soft)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:var(--wa-tinta)}
.btn.wa:hover{background:var(--wa-hover);border-color:var(--wa-hover)}
.btn.wa-soft{background:var(--wa-soft);border-color:var(--green-300);color:var(--green-600)}
.btn.wa-soft:hover{background:var(--green-100)}
.btn[disabled]{background:var(--disabled-bg);border-color:var(--disabled-border);
  color:var(--disabled-text);cursor:not-allowed;transform:none}
.spin{width:15px;height:15px;border-radius:var(--r-full);flex:none;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- kontrol ---------- */
.field{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.lbl{font-size:var(--d-xs);font-weight:var(--fw-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2)}
.inp,.sel{height:var(--d-field-h);width:100%;padding:0 var(--s-3);
  border-radius:var(--r-sm);border:1.5px solid var(--border-strong);
  background:var(--bg-surface);color:var(--text-1);
  font-size:var(--d-sm);font-weight:var(--fw-medium)}
.sel{appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
.sel.blank{border-color:var(--warning);background-color:var(--warning-soft);
  color:var(--warning-text)}
.inp:focus,.sel:focus{border-color:var(--action)}

/* ---------- masuk ---------- */
.masuk{max-width:380px;margin:var(--s-8) auto;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s-6);box-shadow:var(--e-2);text-align:center}
.masuk h1{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h1);letter-spacing:-.02em;margin-top:var(--s-4)}
.masuk .lede{margin:var(--s-2) 0 var(--s-5)}
.masuk .mark{margin:0 auto;display:block}
.masuk form{display:flex;flex-direction:column;gap:var(--s-4);text-align:left}
.pesan-galat{background:var(--danger-soft);color:var(--danger-text);
  border-radius:var(--r-sm);padding:var(--s-3);font-size:var(--d-sm)}

/* ---------- strip hitungan ---------- */
.flags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-4)}
.flag{display:inline-flex;align-items:center;gap:var(--s-2);height:34px;
  padding:0 var(--s-3);border-radius:var(--r-full);
  border:1.5px solid var(--border);background:var(--bg-surface);
  font-size:var(--d-sm);font-weight:var(--fw-semi);color:var(--text-1)}
.flag.warn{background:var(--warning-soft);border-color:var(--orange-200);
  color:var(--warning-text)}
.flag.soon{background:var(--soon-soft);border-color:var(--yellow-300);
  color:var(--on-highlight)}

/* ---------- kartu booking ---------- */
.list{display:flex;flex-direction:column;gap:var(--s-3)}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) 296px;gap:var(--s-4);
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--d-radius-card);padding:var(--d-card-p);box-shadow:var(--e-1)}
.date{border-radius:var(--r-sm);border:1.5px solid var(--border);
  background:var(--bg-sunken);padding:var(--s-2) var(--s-1);
  text-align:center;align-self:start}
.date .d{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h2);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.date .m{font-size:var(--d-xs);font-weight:var(--fw-semi);color:var(--text-2);
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.date .r{font-size:var(--d-xs);font-weight:var(--fw-semi);color:var(--text-2);
  margin-top:var(--s-2);padding-top:var(--s-1);border-top:1px solid var(--border)}
/* Tujuh hari ke depan memakai biru brand dengan tinta putih. Kuning
   dilepas dari sini karena dia sudah dipakai chip "berangkat dua hari ini",
   dan dua penanda kuning bersebelahan berhenti berarti apa-apa. */
.date.soon{background:var(--action);border-color:var(--action);color:var(--on-action)}
.date.soon .d{color:var(--on-action)}
.date.soon .m,.date.soon .r{color:var(--on-action);opacity:.88;
  border-color:rgba(255,255,255,.28)}

.who{font-size:var(--d-h3);font-weight:var(--fw-semi);line-height:1.3}
.trip-line{font-size:var(--d-sm);color:var(--text-2);margin-top:2px}
.facts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.fact{display:inline-flex;align-items:center;gap:var(--s-1);
  font-size:var(--d-xs);font-weight:var(--fw-semi);
  border-radius:var(--r-full);padding:2px var(--s-3);
  background:var(--bg-sunken);color:var(--text-2)}
.fact.klook{background:var(--action-soft);color:var(--action)}
.fact.direct{background:var(--info-soft);color:var(--info-text)}
.fact.tinjau{background:var(--warning-soft);color:var(--warning-text)}
.fact.ref{font-variant-numeric:tabular-nums;letter-spacing:.04em;
  background:var(--bg-surface);border:1px solid var(--border);color:var(--text-2)}

.side{display:flex;flex-direction:column;gap:var(--s-2);align-items:stretch}
.state{align-self:flex-start;font-size:var(--d-xs);font-weight:var(--fw-bold);
  border-radius:var(--r-xs);padding:3px var(--s-2);white-space:nowrap}
.state.baru{background:var(--warning-soft);color:var(--warning-text)}
.state.dihubungi{background:var(--info-soft);color:var(--info-text)}
.state.siap{background:var(--success-soft);color:var(--success-text)}
.state.batal{background:var(--danger-soft);color:var(--danger-text)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.driver{display:inline-flex;align-items:center;gap:var(--s-2);
  height:var(--d-field-h);padding:0 var(--s-3);border-radius:var(--r-sm);
  text-decoration:none;background:var(--wa-soft);border:1.5px solid var(--green-300);
  color:var(--green-600);font-size:var(--d-sm);font-weight:var(--fw-semi)}
.driver .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending{display:flex;align-items:center;gap:var(--s-2);min-height:var(--d-field-h);
  font-size:var(--d-xs);font-weight:var(--fw-semi);color:var(--warning-text);
  background:var(--warning-soft);border-radius:var(--r-sm);padding:var(--s-1) var(--s-3)}
.aside{font-size:var(--d-xs);color:var(--text-2)}

/* ---------- navigasi halaman per peran ---------- */
.subnav{background:var(--bg-surface);border-bottom:1px solid var(--border)}
.subnav-in{position:relative;max-width:1160px;margin:0 auto;padding:0 var(--s-5);
  display:flex;gap:var(--s-5);overflow-x:auto}
.subnav button{border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font-size:var(--d-sm);font-weight:var(--fw-semi);color:var(--text-2);
  height:44px;padding:0;transition:color var(--t-fast) var(--ease-out)}
.subnav button:hover{color:var(--text-1)}
.subnav button[aria-selected="true"]{color:var(--action)}
/* Garis aktif satu batang yang bergeser, digerakkan transform supaya tidak
   memicu layout tiap frame. */
.subnav-ink{position:absolute;bottom:0;left:0;width:1px;height:2.5px;
  background:var(--action);transform-origin:left center;transform:scaleX(0);
  transition:transform var(--t-mid) var(--ease-out)}
.subnav .n{font-size:var(--d-xs);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;background:var(--bg-sunken);
  border-radius:var(--r-full);padding:1px 7px;color:var(--text-2);margin-left:var(--s-2)}
.subnav button[aria-selected="true"] .n{background:var(--blue-100);color:var(--action)}

/* ---------- layar vendor ---------- */
.daybar{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin:var(--s-5) 0 var(--s-3);padding-bottom:var(--s-2);
  border-bottom:2px solid var(--border)}
.daybar:first-child{margin-top:0}
.daybar h3{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h3);letter-spacing:-.01em}
.daybar span{font-size:var(--d-sm);color:var(--text-2)}
.daybar.soon{border-bottom-color:var(--yellow-300)}
.daybar.soon span{color:var(--yellow-700);font-weight:var(--fw-semi)}
.dep{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s-4);
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--d-radius-card);padding:var(--d-card-p);
  box-shadow:var(--e-1);margin-bottom:var(--s-3)}
.dep h4{font-size:var(--d-h3);font-weight:var(--fw-semi);margin-bottom:var(--s-3)}
.dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-2) var(--s-3);
  font-size:var(--d-sm);margin:0}
.dl dt{font-size:var(--d-xs);font-weight:var(--fw-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);padding-top:2px}
.dl dd{color:var(--text-1);margin:0}
/* Satu blok per mobil. Booking biasa punya satu, jadi garis pemisahnya cuma
   muncul kalau memang ada mobil kedua. */
.mobil{display:flex;flex-direction:column;gap:var(--s-2)}
.mobil + .mobil{margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px dashed var(--border-strong)}
.ack{display:flex;align-items:center;gap:var(--s-2);
  background:var(--success-soft);color:var(--success-text);
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);
  font-size:var(--d-xs);font-weight:var(--fw-semi);line-height:1.35}

/* ---------- daftar driver: orang, bukan baris tabel ---------- */
.crews{display:flex;flex-direction:column;gap:var(--s-3)}
.crew{display:grid;grid-template-columns:44px minmax(0,1fr) 220px auto;
  gap:var(--s-4);align-items:center;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--d-radius-card);padding:var(--s-4);box-shadow:var(--e-1)}
.crew.off{background:var(--bg-sunken);box-shadow:none}
.ava{width:44px;height:44px;border-radius:var(--r-full);flex:none;
  background:var(--action-soft);color:var(--action);
  font-family:var(--f-display);font-weight:var(--fw-display);font-size:15px;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.crew.off .ava{background:var(--n-200);color:var(--text-2)}
.crew-h3{display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--d-h3);font-weight:var(--fw-semi);line-height:1.3}
.crew-meta{display:block;font-size:var(--d-sm);color:var(--text-2);margin-top:2px}
.crew-wa{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-2);
  font-size:var(--d-sm);font-weight:var(--fw-semi);color:var(--green-600);text-decoration:none}
.crew-load{display:grid;gap:var(--s-2);grid-template-columns:auto minmax(0,1fr);
  align-items:center}
.crew-n{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h1);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.crew.off .crew-n{color:var(--text-3)}
.crew-sub{display:block;grid-column:1 / -1;font-size:var(--d-xs);color:var(--text-2)}

/* ---------- modal ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(18,24,32,.5);
  display:flex;align-items:center;justify-content:center;padding:var(--s-4)}
.modal{width:100%;max-width:420px;background:var(--bg-surface);
  border-radius:var(--r-xl);box-shadow:var(--e-4);overflow:hidden;
  animation:pop .16s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal header{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--border)}
.modal header h3{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:var(--d-h3);letter-spacing:-.01em}
.xbtn{width:32px;height:32px;border-radius:var(--r-full);border:0;flex:none;
  background:var(--bg-sunken);color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.xbtn:hover{background:var(--n-200);color:var(--text-1)}
.modal .body{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4)}
.modal .body .lbl{text-transform:none;letter-spacing:0;font-size:var(--d-sm);color:var(--text-1)}
.modal .foot{display:flex;justify-content:flex-end;gap:var(--s-2);
  padding:var(--s-4);border-top:1px solid var(--border);background:var(--bg-page)}

/* ---------- pemilih periode ---------- */
.seg{display:flex;gap:2px;background:var(--bg-sunken);border-radius:var(--r-full);padding:3px}
.seg button{border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:var(--d-sm);font-weight:var(--fw-semi);color:var(--text-2);
  padding:7px var(--s-4);border-radius:var(--r-full);white-space:nowrap}
.seg button:hover{color:var(--text-1)}
.seg button[aria-pressed="true"]{background:var(--bg-surface);color:var(--action);
  box-shadow:var(--e-1)}

/* ---------- judul di layar puncak ---------- */
.head.peak h1{font-size:clamp(30px, 3.4vw, 40px);letter-spacing:-.025em}

/* ---------- owner: papan uang, permukaan gelap ---------- */
.ledger{background:var(--bg-inverse);color:var(--on-inverse-1);
  border-radius:var(--r-xl);padding:var(--s-6) var(--s-5) var(--s-5);
  box-shadow:var(--e-3);margin-bottom:var(--s-5)}
.ledger-top{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6);
  align-items:flex-end;justify-content:space-between}
.amount{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:clamp(36px, 5vw, 62px);line-height:.95;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--on-inverse-1)}
.amount .cur{font-family:var(--f-text);font-weight:var(--fw-semi);
  font-size:.34em;letter-spacing:0;color:var(--on-inverse-2);margin-right:.22em;
  vertical-align:.42em}
.say{font-size:var(--d-body);color:var(--on-inverse-2);margin-top:var(--s-3);
  max-width:62ch}
.say b{color:var(--on-inverse-1);font-weight:var(--fw-semi);
  font-variant-numeric:tabular-nums}
.aside-nums{display:flex;gap:var(--s-6);margin:0}
.aside-nums div{padding-left:var(--s-4);border-left:1px solid var(--border-inverse)}
.aside-nums dt{font-size:var(--d-xs);color:var(--on-inverse-2);font-weight:var(--fw-medium)}
.aside-nums dd{margin:var(--s-1) 0 0;font-family:var(--f-display);
  font-weight:var(--fw-bold);font-size:var(--d-h2);line-height:1.1;
  font-variant-numeric:tabular-nums}
.bar{display:flex;height:16px;border-radius:var(--r-full);overflow:hidden;
  margin:var(--s-6) 0 var(--s-3);background:rgba(255,255,255,.08);gap:2px}
.bar i{display:block;height:100%;border-radius:3px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font-size:var(--d-sm);
  color:var(--on-inverse-2)}
.legend div{display:flex;align-items:center;gap:var(--s-2)}
.legend i{width:12px;height:12px;border-radius:3px;flex:none}
.legend b{color:var(--on-inverse-1);font-variant-numeric:tabular-nums;
  font-weight:var(--fw-semi)}
.callout{display:flex;gap:var(--s-3);align-items:flex-start;
  background:rgba(255,138,61,.16);color:var(--orange-200);
  border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
  margin-top:var(--s-5);font-size:var(--d-sm);line-height:1.5}
.callout b{font-weight:var(--fw-bold);color:var(--orange-100)}

/* ---------- deret angka kunci, tanpa kotak ---------- */
.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--d-radius-card);box-shadow:var(--e-1);
  padding:var(--s-5) 0;margin-bottom:var(--s-5)}
.key{padding:0 var(--s-5);border-left:1px solid var(--border)}
.key:first-child{border-left:0}
.key .v{font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:clamp(22px, 2.4vw, 32px);line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.key .k{font-size:var(--d-sm);color:var(--text-2);margin-top:var(--s-2)}

/* ---------- panel dan tabel ---------- */
.panel{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--d-radius-card);box-shadow:var(--e-1);overflow:hidden;
  margin-bottom:var(--s-5)}
.panel.sempit{max-width:560px}
.scroller{overflow:auto;max-height:min(72vh, 620px)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--d-sm)}
th{text-align:left;font-size:var(--d-xs);font-weight:var(--fw-semi);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
  background:var(--bg-sunken);padding:var(--s-3) var(--s-4);white-space:nowrap;
  position:sticky;top:0;z-index:3;box-shadow:inset 0 -1px 0 var(--border)}
td{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);white-space:nowrap}
td.wrap{white-space:normal;min-width:150px;font-weight:var(--fw-medium)}
.tight th,.tight td{padding-left:var(--s-2);padding-right:var(--s-2)}
.tight th:first-child,.tight td:first-child{padding-left:var(--s-4)}
.tight th:last-child,.tight td:last-child{padding-right:var(--s-4)}
th.num,td.num{text-align:right}
td.num{font-variant-numeric:tabular-nums}
td.kecil{font-size:var(--d-xs);color:var(--text-2)}
tbody tr:hover{background:var(--action-soft)}
tbody tr.hold{background:var(--warning-soft)}
tbody tr.hold:hover{background:var(--orange-100)}
.kosong{color:var(--text-3);font-weight:var(--fw-regular)}
.sub-note{display:block;font-size:var(--d-xs);color:var(--text-2);
  font-weight:var(--fw-regular);margin-top:2px}
td small{display:block;font-size:var(--d-xs);color:var(--text-2);
  font-weight:var(--fw-regular);margin-top:2px}
.panel .empty{border:0;border-radius:0}

/* ---------- layar Harga ---------- */
.pak{margin-bottom:var(--s-7)}
.sub{font-size:var(--d-body);font-weight:var(--fw-semi);margin:var(--s-5) 0 var(--s-1)}
.sub + .sub-note{margin-bottom:var(--s-3)}
td .inp{height:34px;min-width:120px;font-variant-numeric:tabular-nums;text-align:right}
.sejak{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-3) var(--s-5);
  background:var(--bg-sunken);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
.sejak .field{max-width:200px}
.sejak .aside{max-width:52ch;line-height:1.5}
.riwayat{margin-top:var(--s-2)}
.riwayat summary{font-size:var(--d-xs);font-weight:var(--fw-semi);color:var(--action);
  cursor:pointer;list-style:none}
.riwayat summary::-webkit-details-marker{display:none}
.riwayat summary::before{content:"▸ ";color:var(--text-3)}
.riwayat[open] summary::before{content:"▾ "}
.riwayat ul{list-style:none;margin:var(--s-2) 0 0;padding:0;
  border-left:2px solid var(--border);padding-left:var(--s-3)}
.riwayat li{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:baseline;
  font-size:var(--d-xs);color:var(--text-2);padding:2px 0;white-space:normal}
.riwayat li b{color:var(--text-1);font-variant-numeric:tabular-nums}
.riwayat .aside{margin-top:var(--s-2);line-height:1.5;white-space:normal}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4)}
.toolbar .field{min-width:320px;max-width:460px}
/* Satu tombol simpan untuk seluruh paket yang sedang dibuka. Menempel di
   bawah supaya tetap terjangkau sesudah tabelnya panjang. */
.simpan-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s-3);margin-top:var(--s-5);
  padding:var(--s-3) var(--s-4);background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--d-radius-card);
  box-shadow:var(--e-2)}

/* ---------- ember di layar Perlu ditindak ---------- */
/* Yang sudah lewat tetap ada, tapi tidak boleh berebut perhatian dengan
   keberangkatan besok. Diredupkan, bukan disembunyikan. */
.ember{margin-bottom:var(--s-6)}
.ember .daybar{margin-top:0}
.ember.redup{opacity:.55}
.ember.redup:hover,.ember.redup:focus-within{opacity:1;
  transition:opacity var(--t-mid) var(--ease-out)}
.negara-fact{padding-left:var(--s-2)}
.negara-fact .fg{width:16px;height:12px}

/* ---------- keadaan kosong dan galat ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  padding:var(--s-7) var(--s-5);text-align:center;color:var(--text-2);
  font-size:var(--d-sm);background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--d-radius-card)}
.empty b{color:var(--text-1);font-weight:var(--fw-semi)}
.empty .ic{width:22px;height:22px;color:var(--text-3)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:var(--s-5);z-index:90;
  background:var(--bg-inverse);color:var(--n-0);border-radius:var(--r-full);
  padding:var(--s-3) var(--s-5);font-size:var(--d-sm);font-weight:var(--fw-semi);
  box-shadow:var(--e-3);transform:translate(-50%,12px);opacity:0;
  pointer-events:none;transition:transform 240ms var(--ease-out),
                                 opacity 240ms var(--ease-out)}
.toast.on{transform:translate(-50%,0);opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    transition-duration:.001ms !important}
}

@media (max-width:980px){
  .row{grid-template-columns:64px minmax(0,1fr)}
  .dep{grid-template-columns:minmax(0,1fr)}
  .dep .side{border-top:1px solid var(--border);padding-top:var(--s-3)}
  .crew{grid-template-columns:44px minmax(0,1fr) auto}
  .crew-load{grid-column:2 / -1}
  .row .side{grid-column:1 / -1;border-top:1px solid var(--border);
    padding-top:var(--s-3)}
}
@media (max-width:720px){
  .topbar-in{flex-wrap:wrap;height:auto;padding:var(--s-3) var(--s-4);
    gap:var(--s-2) var(--s-3)}
  .shell{padding:var(--s-4) var(--s-4) var(--s-7)}
  .pair{grid-template-columns:1fr}
  .btn.sm{height:38px}
  .subnav-in{padding:0 var(--s-4);gap:var(--s-4)}
  .keys{grid-template-columns:1fr 1fr;row-gap:var(--s-5)}
  .key:nth-child(3){border-left:0}
  .aside-nums{gap:var(--s-4)}
  .ledger{padding:var(--s-5) var(--s-4)}
  .dl{grid-template-columns:1fr;gap:var(--s-1)}
  .dl dd{margin-bottom:var(--s-2)}
  .crew{grid-template-columns:40px minmax(0,1fr);row-gap:var(--s-3)}
  .crew > .btn{grid-column:1 / -1;justify-self:start}
  .crew-load{grid-column:1 / -1}
}