/* ============================================================
   komponen.css — komponen baku sistem
   Acuan: PRD v4.4 Bagian 11.5 (komponen) & 11.6 (aturan responsif)

   Diambil dari prototipe acuan yang telah disetujui (Bagian 11.7).
   Yang paling menentukan di berkas ini:
     - Target sentuh minimal 44px, teks isi minimal 16px (UX-04)
     - Tabel berubah menjadi kartu bertumpuk di bawah 900px (11.6),
       sehingga pegawai tidak perlu menggeser tabel ke samping di HP
     - Fokus keyboard selalu terlihat
     - Warna hanya dari token.css, tidak ada nilai lepas di sini
   ============================================================ */

/* ---------- dasar ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--kertas); color:var(--teks);
  font-family:var(--f-isi); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,.judul{font-family:var(--f-judul); letter-spacing:-.015em; margin:0}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--laut)}
:focus-visible{outline:3px solid var(--laut); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
/* ============================================================
   TANDA TANGAN VISUAL — garis kop (tebal–tipis) & nomor referensi
   ============================================================ */
.kop{background:var(--permukaan); border-bottom:1px solid var(--garis)}
.kop-dalam{max-width:1120px; margin:0 auto; padding:14px 16px 0}
.kop-instansi{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teks-2);
}
.kop-baris{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.kop-judul{font-size:20px; font-weight:800; color:var(--tinta); padding:2px 0 10px}
/* garis kop: tebal lalu tipis — meniru kop surat resmi */
.kop-garis{height:3px; background:var(--tinta); border-radius:2px}
.kop-garis::after{content:""; display:block; height:1px; background:var(--tinta); margin-top:3px; opacity:.45}
.kop-bawah{max-width:1120px; margin:0 auto; padding:0 16px 12px}

/* nomor referensi: NIP, nomor surat, ID — artefak resmi, bukan teks biasa */
.nomor{
  font-family:var(--f-nomor); font-variant-numeric:tabular-nums;
  font-size:.92em; letter-spacing:-.01em;
  background:var(--laut-lembut); color:var(--tinta);
  padding:2px 7px; border-radius:6px; white-space:nowrap;
}
.nomor-polos{font-family:var(--f-nomor); font-variant-numeric:tabular-nums; letter-spacing:-.01em}


/* ============================================================
   KERANGKA HALAMAN
   ============================================================ */
.wadah{max-width:1120px; margin:0 auto; padding:16px 16px 96px}
.layar{display:none}
.layar.aktif{display:block; animation:masuk .22s ease-out}
@keyframes masuk{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* formulir dibatasi lebarnya agar nyaman dibaca di layar lebar */
@media (min-width:760px){
  #lapor, #wfh, #jadwal{max-width:760px}
}


/* ============================================================
   KARTU
   ============================================================ */
.kartu{
  background:var(--permukaan); border:1px solid var(--garis);
  border-radius:var(--r-besar); box-shadow:var(--bayang); padding:18px;
}
.kartu + .kartu{margin-top:14px}
.kartu-judul{font-size:17px; font-weight:800; color:var(--tinta); margin:0 0 4px}

/* menu beranda */
.menu{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:640px){ .menu{grid-template-columns:1fr 1fr} }
.menu-item{
  display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%;
  background:var(--permukaan); border:1px solid var(--garis); border-left:4px solid var(--laut);
  border-radius:var(--r-besar); padding:16px; cursor:pointer;
  box-shadow:var(--bayang); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-height:var(--sentuh);
}
.menu-item:hover{transform:translateY(-2px); box-shadow:var(--bayang-naik); border-left-color:var(--tinta)}
.menu-item:active{transform:translateY(0)}
.menu-ikon{
  flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--laut-lembut); color:var(--tinta);
}
.menu-ikon svg{width:22px; height:22px}
.menu-teks strong{display:block; font-family:var(--f-judul); font-size:16px; font-weight:800; color:var(--tinta)}
.menu-teks span{display:block; font-size:14px; color:var(--teks-2); margin-top:2px}

/* ringkasan angka */
.ringkas{display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-bottom:16px}
@media (min-width:760px){ .ringkas{grid-template-columns:repeat(4,1fr)} }
.ringkas-item{background:var(--permukaan); border:1px solid var(--garis); border-radius:var(--r); padding:12px 14px}
.ringkas-angka{font-family:var(--f-judul); font-size:26px; font-weight:800; color:var(--tinta); line-height:1.1;
  font-variant-numeric:tabular-nums}
.ringkas-label{font-size:12.5px; color:var(--teks-2); margin-top:2px}


/* ============================================================
   TOMBOL — satu aksi utama per layar (UX-01)
   ============================================================ */
.tbl{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--sentuh); padding:11px 18px; border-radius:var(--r);
  border:1px solid transparent; background:var(--permukaan); color:var(--tinta);
  font-weight:700; cursor:pointer; transition:background .15s, transform .12s, border-color .15s;
}
.tbl:active{transform:translateY(1px)}
.tbl-utama{background:var(--tinta); color:#fff; box-shadow:var(--bayang)}
.tbl-utama:hover{background:var(--tinta-2)}
.tbl-kedua{border-color:var(--garis-kuat); background:var(--permukaan)}
.tbl-kedua:hover{background:var(--laut-lembut); border-color:var(--laut)}
.tbl-teks{background:none; padding:8px 10px; color:var(--laut); font-weight:700}
.tbl-teks:hover{text-decoration:underline}
.tbl-bahaya{border-color:var(--merah); color:var(--merah); background:var(--permukaan)}
.tbl-bahaya:hover{background:var(--merah-lembut)}
.tbl[disabled]{opacity:.5; cursor:not-allowed}
.tbl svg{width:18px; height:18px; flex:0 0 18px}

/* aksi utama menempel di bawah pada layar sempit (UX-04) */
.aksi-tempel{
  position:sticky; bottom:0; z-index:20;
  margin:18px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--kertas) 72%, rgba(244,246,248,0));
  display:flex; gap:10px; align-items:center;
}
.aksi-tempel .tbl-utama{flex:1}
@media (min-width:760px){
  .aksi-tempel{position:static; margin:18px 0 0; padding:0; background:none}
  .aksi-tempel .tbl-utama{flex:0 0 auto; min-width:220px}
}


/* ============================================================
   FORMULIR
   ============================================================ */
.medan{margin-bottom:16px}
.medan > label, .legenda{
  display:block; font-weight:700; font-size:14.5px; color:var(--tinta); margin-bottom:6px;
}
.bantuan{font-size:13px; color:var(--teks-2); margin:4px 0 0}
.wajib{color:var(--merah); font-weight:700}

.isian{
  width:100%; min-height:var(--sentuh); padding:11px 13px;
  background:var(--permukaan); border:1.5px solid var(--garis-kuat); border-radius:var(--r);
  transition:border-color .15s, box-shadow .15s;
}
.isian:focus{border-color:var(--laut); box-shadow:0 0 0 4px var(--laut-lembut); outline:none}
textarea.isian{min-height:132px; resize:vertical; line-height:1.6}
.isian[readonly]{background:#EEF2F6; color:var(--teks-2); border-style:dashed; cursor:not-allowed}
select.isian{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A68' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:42px}

/* keadaan galat — ditandai di tempatnya (UX-05) */
.medan.galat .isian{border-color:var(--merah); box-shadow:0 0 0 4px var(--merah-lembut)}
.pesan-galat{display:none; align-items:center; gap:6px; color:var(--merah); font-size:13.5px; font-weight:600; margin-top:6px}
.medan.galat .pesan-galat{display:flex}

/* pilihan besar (radio sebagai kartu) */
.pilihan{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:560px){ .pilihan{grid-template-columns:1fr 1fr} }
.pilihan label{
  display:flex; gap:11px; align-items:flex-start; padding:13px 14px; cursor:pointer;
  background:var(--permukaan); border:1.5px solid var(--garis-kuat); border-radius:var(--r);
  min-height:var(--sentuh); transition:border-color .15s, background .15s;
}
.pilihan input{margin:2px 0 0; width:20px; height:20px; accent-color:var(--tinta); flex:0 0 20px}
.pilihan label:hover{border-color:var(--laut)}
.pilihan input:checked + .pilihan-teks{color:var(--tinta)}
.pilihan label:has(input:checked){border-color:var(--tinta); background:var(--laut-lembut)}
.pilihan-teks strong{display:block; font-weight:700; font-size:15px}
.pilihan-teks span{display:block; font-size:13px; color:var(--teks-2)}

/* rel langkah — nama langkah, bukan sekadar titik (UX-03) */
.rel{display:flex; gap:6px; margin-bottom:18px; counter-reset:l}
.rel-item{flex:1; min-width:0}
.rel-bar{height:5px; border-radius:3px; background:var(--garis)}
.rel-item.lewat .rel-bar, .rel-item.kini .rel-bar{background:var(--tinta)}
.rel-label{font-size:12px; color:var(--teks-2); margin-top:6px; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rel-item.kini .rel-label{color:var(--tinta); font-weight:700}
.langkah{display:none}
.langkah.aktif{display:block}

/* unggah */
.jatuh{
  border:2px dashed var(--garis-kuat); border-radius:var(--r-besar); background:var(--permukaan);
  padding:22px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.jatuh:hover{border-color:var(--laut); background:var(--laut-lembut)}
.jatuh svg{width:28px; height:28px; color:var(--teks-2)}
.jatuh strong{display:block; font-family:var(--f-judul); font-weight:800; color:var(--tinta); margin-top:8px}
.jatuh span{display:block; font-size:13px; color:var(--teks-2); margin-top:2px}

.pratinjau{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin-top:12px}
.foto{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--garis); background:#DCE5EC}
.foto .isi{aspect-ratio:1/1; display:grid; place-items:center; color:#8AA0B2}
.foto .isi svg{width:26px;height:26px}
.foto-hapus{
  position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:8px;
  border:none; background:rgba(20,32,43,.72); color:#fff; cursor:pointer; display:grid; place-items:center;
}
.foto-hapus svg{width:16px;height:16px}
.foto-info{font-size:11.5px; padding:5px 7px; background:var(--permukaan); color:var(--teks-2);
  font-variant-numeric:tabular-nums}
.bar-unggah{height:4px; background:var(--garis)}
.bar-unggah i{display:block; height:100%; background:var(--hijau); width:100%}


/* ============================================================
   LENCANA / STATUS — warna + teks, tak pernah warna saja (UX-10)
   ============================================================ */
.lencana{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:12.5px; font-weight:700; white-space:nowrap; border:1px solid transparent;
}
.lencana svg{width:13px; height:13px}
.l-hijau{background:var(--hijau-lembut); color:var(--hijau); border-color:#BFE3D5}
.l-kunyit{background:var(--kunyit-lembut); color:#8A5A10; border-color:#F0DCB8}
.l-merah{background:var(--merah-lembut); color:var(--merah); border-color:#F0CFCB}
.l-biru{background:var(--laut-lembut); color:var(--tinta); border-color:#CBDFF0}
.l-abu{background:#EEF2F6; color:var(--teks-2); border-color:var(--garis)}


/* ============================================================
   TAB
   ============================================================ */
.tab{display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; margin-bottom:16px;
  border-bottom:1px solid var(--garis); scrollbar-width:none}
.tab::-webkit-scrollbar{display:none}
.tab button{
  flex:0 0 auto; min-height:var(--sentuh); padding:10px 15px; border:none; background:none;
  color:var(--teks-2); font-weight:700; cursor:pointer; border-bottom:3px solid transparent;
  border-radius:8px 8px 0 0;
}
.tab button:hover{color:var(--tinta); background:var(--laut-lembut)}
.tab button[aria-selected="true"]{color:var(--tinta); border-bottom-color:var(--tinta)}
.panel{display:none} .panel.aktif{display:block}


/* ============================================================
   PENYARING & TABEL → KARTU DI LAYAR SEMPIT
   ============================================================ */
.saring{display:grid; gap:10px; grid-template-columns:1fr; margin-bottom:14px}
@media (min-width:760px){ .saring{grid-template-columns:2fr 1fr 1fr auto; align-items:end} }
.cari{position:relative}
.cari svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--teks-2)}
.cari .isian{padding-left:42px}

.tabel-bungkus{background:var(--permukaan); border:1px solid var(--garis); border-radius:var(--r-besar);
  box-shadow:var(--bayang); overflow:hidden}
table{width:100%; border-collapse:collapse}
thead{display:none}
th,td{text-align:left}
tbody tr{display:block; padding:14px 16px; border-bottom:1px solid var(--garis)}
tbody tr:last-child{border-bottom:none}
tbody td{display:flex; gap:10px; justify-content:space-between; align-items:baseline; padding:3px 0}
tbody td::before{
  content:attr(data-label); flex:0 0 40%; font-size:12.5px; font-weight:700; color:var(--teks-2);
  text-transform:uppercase; letter-spacing:.05em;
}
td.utama{display:block; padding-bottom:8px}
td.utama::before{display:none}
td.utama strong{font-family:var(--f-judul); font-size:15.5px; font-weight:800; color:var(--tinta); display:block}
td.aksi{display:flex; gap:8px; justify-content:flex-start; padding-top:10px; flex-wrap:wrap}
td.aksi::before{display:none}

@media (min-width:900px){
  thead{display:table-header-group}
  thead th{padding:12px 16px; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--teks-2); background:#EFF3F7; border-bottom:1px solid var(--garis); white-space:nowrap}
  tbody tr{display:table-row; padding:0}
  tbody tr:hover{background:#F7FAFC}
  tbody td{display:table-cell; padding:13px 16px; vertical-align:middle; border-bottom:1px solid var(--garis)}
  tbody td::before{display:none}
  td.utama{display:table-cell}
  td.aksi{display:table-cell; white-space:nowrap}
  td.aksi .tbl{padding:7px 12px; min-height:36px; font-size:14px}
}


/* ============================================================
   MODAL
   ============================================================ */
.tirai{position:fixed; inset:0; background:rgba(15,32,43,.55); display:none; z-index:60;
  align-items:flex-end; justify-content:center; padding:0}
.tirai.buka{display:flex}
@media (min-width:760px){ .tirai{align-items:center; padding:24px} }
.modal{
  background:var(--permukaan); width:100%; max-width:760px; max-height:92vh; overflow-y:auto;
  border-radius:var(--r-besar) var(--r-besar) 0 0; box-shadow:var(--bayang-naik);
  animation:naik .24s cubic-bezier(.2,.8,.3,1);
}
@media (min-width:760px){ .modal{border-radius:var(--r-besar)} }
@keyframes naik{from{transform:translateY(24px); opacity:.6} to{transform:none; opacity:1}}
.modal-kepala{position:sticky; top:0; background:var(--permukaan); border-bottom:1px solid var(--garis);
  padding:16px 18px 12px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.modal-isi{padding:16px 18px}
.modal-kaki{position:sticky; bottom:0; background:var(--permukaan); border-top:1px solid var(--garis);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.tutup{border:none; background:#EEF2F6; width:38px; height:38px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; color:var(--teks-2); flex:0 0 38px}
.tutup:hover{background:var(--merah-lembut); color:var(--merah)}

.rincian{display:grid; gap:0; margin:0}
.rincian > div{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--garis); flex-wrap:wrap}
.rincian dt{flex:0 0 168px; font-size:13px; font-weight:700; color:var(--teks-2);
  text-transform:uppercase; letter-spacing:.05em}
.rincian dd{margin:0; flex:1 1 200px}
.galeri{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; margin-top:8px}


/* ============================================================
   KEADAAN KOSONG (UX-08) & PEMBERITAHUAN
   ============================================================ */
.kosong{text-align:center; padding:40px 20px}
.kosong-ikon{width:60px; height:60px; margin:0 auto 14px; border-radius:18px; display:grid; place-items:center;
  background:var(--laut-lembut); color:var(--laut)}
.kosong-ikon svg{width:30px;height:30px}
.kosong h3{font-size:18px; font-weight:800; color:var(--tinta); margin-bottom:6px}
.kosong p{color:var(--teks-2); max-width:38ch; margin:0 auto 16px}

.catatan{display:flex; gap:11px; padding:12px 14px; border-radius:var(--r); align-items:flex-start;
  font-size:14.5px; border:1px solid}
.catatan svg{width:19px; height:19px; flex:0 0 19px; margin-top:1px}
.c-biru{background:var(--laut-lembut); border-color:#CBDFF0; color:var(--tinta)}
.c-kunyit{background:var(--kunyit-lembut); border-color:#F0DCB8; color:#7A4F0E}
.c-hijau{background:var(--hijau-lembut); border-color:#BFE3D5; color:#0E5D43}

/* simpanan otomatis (UX-06) */
.draf{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--teks-2)}
.draf i{width:7px; height:7px; border-radius:50%; background:var(--hijau); display:inline-block}

/* roti (toast) */
.roti{position:fixed; left:50%; bottom:22px; transform:translate(-50%,120%); z-index:80;
  background:var(--tinta); color:#fff; padding:13px 18px; border-radius:var(--r); box-shadow:var(--bayang-naik);
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px); font-weight:600;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.roti.tampil{transform:translate(-50%,0)}
.roti svg{width:19px;height:19px; flex:0 0 19px}

/* rangka muat (skeleton) */
.rangka{background:linear-gradient(90deg,#E8EDF2 25%,#F2F6F9 50%,#E8EDF2 75%);
  background-size:200% 100%; animation:geser 1.3s infinite; border-radius:6px; height:13px}
@keyframes geser{0%{background-position:200% 0} 100%{background-position:-200% 0}}

/* peralihan layar demo */
.pindah{position:fixed; right:14px; bottom:14px; z-index:70}
.pindah select{
  min-height:var(--sentuh); padding:10px 40px 10px 14px; border-radius:999px;
  border:1px solid var(--tinta); background:var(--tinta); color:#fff; font-weight:700; cursor:pointer;
  box-shadow:var(--bayang-naik); appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- tambahan khusus halaman Admin ---------- */
.masuk-bungkus{max-width:400px;margin:48px auto}
.sub{display:block;font-size:13px;color:var(--teks-2);margin-top:3px;font-weight:400}
.kosong{text-align:center;padding:40px 20px;color:var(--teks-2)}
.rangka{background:linear-gradient(90deg,#E8EDF2 25%,#F2F6F9 50%,#E8EDF2 75%);
  background-size:200% 100%;animation:geser 1.3s infinite;border-radius:6px;height:13px}
@keyframes geser{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Pergeseran memakai calc(100% + 40px), bukan 120%.
   120% hanya menggeser sebesar tinggi elemen, sedangkan elemen ini juga
   berjarak 22px dari tepi bawah — sehingga sebagian kecilnya tetap terlihat
   menyembul di dasar layar. */
.roti{position:fixed;left:50%;bottom:22px;transform:translate(-50%,calc(100% + 40px));z-index:80;
  background:var(--tinta);color:#fff;padding:13px 18px;border-radius:var(--r);
  box-shadow:var(--bayang-naik);display:flex;align-items:center;gap:10px;
  max-width:calc(100% - 32px);font-weight:600;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.roti.tampil{transform:translate(-50%,0)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- dropdown dengan pencarian (pilihan.js) ---------- */
.cari-pilih{position:relative}
.cari-kotak{position:relative}
.cari-kotak .isian{padding-right:44px}

.cari-bersih{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:none;border-radius:8px;
  cursor:pointer;color:var(--teks-2);display:grid;place-items:center
}
.cari-bersih:hover{background:var(--merah-lembut);color:var(--merah)}
.cari-bersih svg{width:16px;height:16px}

.cari-daftar{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;
  margin:0;padding:4px;list-style:none;max-height:290px;overflow-y:auto;
  background:var(--permukaan);border:1px solid var(--garis-kuat);
  border-radius:var(--r);box-shadow:var(--bayang-naik);
  -webkit-overflow-scrolling:touch
}
.cari-daftar li{
  padding:10px 12px;border-radius:var(--r-kecil);cursor:pointer;
  min-height:var(--sentuh);display:flex;flex-direction:column;justify-content:center
}
.cari-daftar li.sorot{background:var(--laut-lembut)}
.cari-daftar li:hover{background:var(--laut-lembut)}
.cari-daftar li.cari-kosong{
  cursor:default;color:var(--teks-2);font-size:14px;text-align:center;padding:18px 12px
}
.cari-daftar li.cari-kosong:hover{background:none}

.cari-utama{font-size:15px;color:var(--teks);line-height:1.35}
.cari-sub{font-size:12.5px;color:var(--teks-2);margin-top:2px;
  font-family:var(--f-nomor);font-variant-numeric:tabular-nums}
.cari-daftar mark{background:#FDF0C8;color:inherit;padding:0 1px;border-radius:3px}