/* PPID Layanan — tampilan publik. Mewarisi huruf tema; aksen dari pengaturan. */
:root { --ppidl-accent: #a4161a; }
.ppidl {
	--ppidl-ink: #1f2328;
	--ppidl-muted: #59636e;
	--ppidl-line: #d8dde3;
	--ppidl-soft: #f5f6f8;
	--ppidl-ok: #1a7f37;
	--ppidl-warn: #9a6700;
	--ppidl-late: #b42318;
	--ppidl-radius: 8px;
	color: var(--ppidl-ink);
	line-height: 1.6;
}
.ppidl *, .ppidl *::before, .ppidl *::after { box-sizing: border-box; }
.ppidl-muted { color: var(--ppidl-muted); font-size: .92em; }
.ppidl-pre { white-space: pre-line; overflow-wrap: anywhere; }
.ppidl-nowrap { white-space: nowrap; }
.ppidl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tombol */
.ppidl-btn {
	display: inline-block; padding: .65rem 1.25rem; border: 2px solid var(--ppidl-accent); border-radius: var(--ppidl-radius);
	background: var(--ppidl-accent); color: #fff !important; font: inherit; font-weight: 600; line-height: 1.3;
	text-decoration: none !important; cursor: pointer;
}
.ppidl-btn:hover { filter: brightness(.92); }
.ppidl-btn:focus-visible, .ppidl a:focus-visible, .ppidl input:focus-visible, .ppidl select:focus-visible, .ppidl textarea:focus-visible, .ppidl button:focus-visible {
	outline: 3px solid var(--ppidl-accent); outline-offset: 2px;
}
.ppidl-btn[disabled] { opacity: .6; cursor: progress; }
.ppidl-btn-ghost { background: transparent; color: var(--ppidl-accent) !important; }
.ppidl-btn-sm { padding: .35rem .8rem; font-size: .9em; }

/* Formulir */
.ppidl-form { max-width: 46rem; }
.ppidl-lead { background: var(--ppidl-soft); border-left: 4px solid var(--ppidl-accent); padding: .8rem 1rem; border-radius: 0 var(--ppidl-radius) var(--ppidl-radius) 0; }
.ppidl-step { font-size: 1.1em; margin: 1.8rem 0 .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--ppidl-line); }
.ppidl-field { margin-bottom: 1rem; }
.ppidl-field > label, .ppidl-field legend { display: block; font-weight: 600; margin-bottom: .3rem; }
.ppidl-field fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ppidl-field legend { padding: 0; margin: 0 0 .3rem; float: none; width: auto; }
.ppidl-step:first-of-type { margin-top: 1rem; }
.ppidl-field input[type="text"], .ppidl-field input[type="email"], .ppidl-field input[type="tel"], .ppidl-field input[type="file"],
.ppidl-field select, .ppidl-field textarea {
	width: 100%; padding: .6rem .7rem; border: 1px solid #8c959f; border-radius: 6px; font: inherit; background: #fff; color: inherit;
}
.ppidl-field [aria-invalid="true"] { border-color: var(--ppidl-late); box-shadow: 0 0 0 1px var(--ppidl-late); }
.ppidl-choice { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; margin: .25rem 0; cursor: pointer; }
.ppidl-choice input { margin-top: .35rem; flex: none; }
.ppidl-req { color: var(--ppidl-late); }
.ppidl-help { margin: .25rem 0 0; color: var(--ppidl-muted); font-size: .9em; }
.ppidl-error { margin: .3rem 0 0; color: var(--ppidl-late); font-size: .92em; font-weight: 600; }
.ppidl-form-msg:empty { display: none; }
.ppidl-form-msg.is-error { color: var(--ppidl-late); font-weight: 600; }
.ppidl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.ppidl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ppidl-form-inline { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 1rem; align-items: end; max-width: none; }
.ppidl-form-inline .ppidl-btn { margin-bottom: 1rem; }
.ppidl-form-inline .ppidl-form-msg { grid-column: 1 / -1; }
@media (max-width: 640px) { .ppidl-form-inline { grid-template-columns: 1fr; } }

/* Tanda terima */
.ppidl-receipt { border: 1px solid var(--ppidl-line); border-top: 4px solid var(--ppidl-ok); border-radius: var(--ppidl-radius); padding: 1.25rem; max-width: 40rem; }
.ppidl-receipt:focus { outline: none; }
.ppidl-receipt-title { margin-top: 0; }
.ppidl-receipt-label { margin: 0; color: var(--ppidl-muted); font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.ppidl-receipt-nomor, .ppidl-track-nomor { margin: 0 0 .5rem; font-size: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
.ppidl-receipt-list { margin: 1rem 0; display: grid; gap: .4rem; }
.ppidl-receipt-list div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; }
.ppidl-receipt-list dt { color: var(--ppidl-muted); }
.ppidl-receipt-list dd { margin: 0; font-weight: 600; }
@media (max-width: 480px) { .ppidl-receipt-list div { grid-template-columns: 1fr; gap: 0; } }

/* Lacak */
.ppidl-track-result:focus { outline: none; }
.ppidl-track-result:not(:empty) { margin-top: 1.5rem; border: 1px solid var(--ppidl-line); border-radius: var(--ppidl-radius); padding: 1.25rem; }
.ppidl-verified { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--ppidl-radius); background: #e7f6ec; border: 1px solid #9fd3b0; color: #14532d; }
.ppidl-track-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.ppidl-track-head p { margin: 0; }
.ppidl-status { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-weight: 600; font-size: .9em; background: var(--ppidl-soft); border: 1px solid var(--ppidl-line); }
.ppidl-status.is-selesai { background: #dafbe1; border-color: #aceebb; color: #116329; }
.ppidl-status.is-batal { color: var(--ppidl-muted); }
.ppidl-steps { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: s; }
.ppidl-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; color: var(--ppidl-muted); font-size: .92em; }
.ppidl-steps li::before { content: ""; position: absolute; top: 1rem; left: -50%; width: 100%; height: 2px; background: var(--ppidl-line); z-index: 0; }
.ppidl-steps li:first-child::before { display: none; }
.ppidl-steps li.is-done::before, .ppidl-steps li.is-current::before { background: var(--ppidl-accent); }
.ppidl-step-dot { position: relative; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ppidl-line); font-weight: 700; }
.ppidl-steps .is-done .ppidl-step-dot { background: var(--ppidl-accent); border-color: var(--ppidl-accent); color: #fff; }
.ppidl-steps .is-current .ppidl-step-dot { border-color: var(--ppidl-accent); color: var(--ppidl-accent); }
.ppidl-steps .is-done, .ppidl-steps .is-current { color: var(--ppidl-ink); font-weight: 600; }
.ppidl-countdown { background: var(--ppidl-soft); border-radius: var(--ppidl-radius); padding: 1rem; margin: 1rem 0; }
.ppidl-countdown p { margin: 0 0 .4rem; }
.ppidl-countdown-num { font-size: 1.3em; font-weight: 700; }
.ppidl-countdown.is-late { background: #fff1f0; }
.ppidl-countdown.is-late .ppidl-countdown-num { color: var(--ppidl-late); }
.ppidl-progress { height: 8px; border-radius: 4px; background: var(--ppidl-line); overflow: hidden; margin: .5rem 0; }
.ppidl-progress span { display: block; height: 100%; background: var(--ppidl-accent); border-radius: 4px; }
.ppidl-countdown.is-late .ppidl-progress span { background: var(--ppidl-late); }
.ppidl-answer { border-left: 4px solid var(--ppidl-ok); padding: .25rem 0 .25rem 1rem; margin: 1.5rem 0; }
.ppidl-answer h3 { margin-top: 0; }
.ppidl-objection { border-left-color: var(--ppidl-warn); }
.ppidl-callout { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff8c5; border-radius: var(--ppidl-radius); padding: .8rem 1rem; margin: 1.5rem 0; }
.ppidl-callout p { margin: 0; flex: 1 1 18rem; }
.ppidl-timeline { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--ppidl-line); }
.ppidl-timeline li { position: relative; padding: 0 0 1rem .5rem; }
.ppidl-timeline li::before { content: ""; position: absolute; left: -1.62rem; top: .45rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ppidl-accent); border: 2px solid #fff; }
.ppidl-timeline p { margin: 0; }

/* Tabel (register, katalog, statistik) */
.ppidl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ppidl-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .95em; }
.ppidl-table caption { text-align: left; font-weight: 700; padding: 0 0 .5rem; }
.ppidl-table th, .ppidl-table td { border: 1px solid var(--ppidl-line); padding: .6rem .75rem; vertical-align: top; text-align: left; }
.ppidl-table thead th { background: var(--ppidl-accent); color: #fff; font-weight: 600; }
.ppidl-table tbody tr:nth-child(even) td { background: var(--ppidl-soft); }
.ppidl-table tbody th[scope="row"] { font-weight: 400; }
.ppidl-table .ppidl-group th { background: #eef0f3; font-weight: 700; }
.ppidl-dip td:first-child { width: 3.5rem; }
.ppidl-dip td:nth-child(3) { width: 34%; }
.ppidl-register .ppidl-table { font-size: .9em; }
.ppidl-meta th { width: 16rem; background: var(--ppidl-soft); }
.ppidl-badge { display: inline-block; padding: 0 .45rem; border-radius: 4px; font-size: .85em; font-weight: 600; }
.ppidl-badge.is-ok { background: #dafbe1; color: #116329; }
.ppidl-badge.is-late { background: #ffebe9; color: var(--ppidl-late); }
@media (max-width: 640px) {
	.ppidl-dip thead { display: none; }
	.ppidl-dip tr, .ppidl-dip td { display: block; width: auto !important; }
	.ppidl-dip td { border-width: 0 1px; }
	.ppidl-dip tr { border-bottom: 1px solid var(--ppidl-line); }
	.ppidl-dip td:first-child { font-weight: 700; border-top: 1px solid var(--ppidl-line); }
	.ppidl-dip .ppidl-group th { display: block; }
	.ppidl-meta th { width: auto; }
}

/* Filter */
.ppidl-filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin: 0 0 1rem; }
.ppidl-filter label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .92em; }
.ppidl-filter input, .ppidl-filter select { padding: .45rem .6rem; border: 1px solid #8c959f; border-radius: 6px; font: inherit; font-weight: 400; background: #fff; }
.ppidl-filter-wide label:first-child { flex: 1 1 16rem; }
.ppidl-pager { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0; }
.ppidl-pager a, .ppidl-pager span { padding: .3rem .7rem; border: 1px solid var(--ppidl-line); border-radius: 6px; text-decoration: none; }
.ppidl-pager span[aria-current] { background: var(--ppidl-accent); border-color: var(--ppidl-accent); color: #fff; }

/* Statistik */
.ppidl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.ppidl-tile { border: 1px solid var(--ppidl-line); border-radius: var(--ppidl-radius); padding: 1rem; }
.ppidl-tile p { margin: 0; }
.ppidl-tile-label { color: var(--ppidl-muted); font-size: .9em; }
.ppidl-tile-value { font-size: 2em; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ppidl-tile-note { color: var(--ppidl-muted); font-size: .85em; }
.ppidl-chart { margin: 0 0 2rem; }
.ppidl-chart figcaption { font-weight: 700; margin-bottom: .75rem; }
.ppidl-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 12rem; align-items: end; border-bottom: 1px solid var(--ppidl-line); padding-top: 1.4rem; }
.ppidl-bar-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.ppidl-bar { width: 100%; max-width: 2.5rem; background: var(--ppidl-accent); border-radius: 4px 4px 0 0; min-height: 0; }
.ppidl-bar-col:hover .ppidl-bar { filter: brightness(1.15); }
.ppidl-bar-val { font-size: .8em; font-variant-numeric: tabular-nums; color: var(--ppidl-muted); }
.ppidl-bar-lbl { position: absolute; bottom: -1.5rem; font-size: .8em; color: var(--ppidl-muted); }
.ppidl-chart .ppidl-bars { margin-bottom: 1.8rem; }
.ppidl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.5rem; }

/* PPID Pelaksana */
.ppidl-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.ppidl-unit-card { border: 1px solid var(--ppidl-line); border-radius: var(--ppidl-radius); padding: 1rem; }
.ppidl-unit-card h3 { margin: 0 0 .4rem; font-size: 1.05em; }
.ppidl-unit-card p { margin: 0 0 .3rem; font-size: .93em; }
.ppidl-unit-actions { margin-top: .6rem !important; font-weight: 600; }
.ppidl-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1.5rem; margin: 0 0 1rem; }
.ppidl-contact dt { color: var(--ppidl-muted); font-size: .88em; }
.ppidl-contact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ppidl-unit-cat { margin-top: 2rem; }

/* Aksesibilitas */
.ppidl .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ppidl-akomodasi { border-left: 3px solid var(--ppidl-line); padding-left: 1rem; margin: .5rem 0 1rem; }
.ppidl-akomodasi[hidden], [data-ppidl-show][hidden] { display: none; }
.ppidl-field fieldset .ppidl-help { margin: 0 0 .3rem; }
.ppidl-choice input { width: 1.1rem; height: 1.1rem; }
.ppidl-vc { background: #eaf2fb; }

/* Suara */
.ppidl-voice-btn { margin: .35rem .5rem 0 0; padding: .3rem .7rem; font: inherit; font-size: .85em; font-weight: 600; border: 1.5px solid var(--ppidl-accent); border-radius: 999px; background: #fff; color: var(--ppidl-accent); cursor: pointer; vertical-align: middle; }
.ppidl-voice-btn[aria-pressed="true"] { background: var(--ppidl-accent); color: #fff; }
.ppidl-step .ppidl-voice-btn { margin: 0 0 0 .5rem; font-size: .7em; }
.ppidl-voice-status { display: block; font-size: .88em; color: var(--ppidl-muted); min-height: 1em; }
.ppidl-rekam { background: var(--ppidl-soft); border-radius: var(--ppidl-radius); padding: .8rem 1rem; }
.ppidl-rekam-title { margin: 0 0 .2rem; }
.ppidl-rekam-ui { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.ppidl-rekam-ui[hidden] { display: none; }
.ppidl-rekam-ui audio { width: 100%; max-width: 22rem; }
.ppidl-rekam-status { flex-basis: 100%; font-size: .9em; }
.ppidl-rekam-file label { font-size: .9em; font-weight: 600; }
.ppidl-akses-q { border: 2px solid var(--ppidl-accent); border-radius: var(--ppidl-radius); padding: .8rem 1rem .6rem; margin: 0 0 1.2rem; }
.ppidl-akses-q legend { font-weight: 700; padding: 0 .3rem; }
.ppidl-akses-q .ppidl-choice { display: inline-flex; margin-right: 1.5rem; font-weight: 600; }
[data-ppidl-akses-only][hidden] { display: none !important; }

/* Katalog DIP: register bergaris tipis, selaras halaman DIP situs (tinta navy, garis #dbe4ee). */
.ppidl-katalog { --ppidl-dip-ink: #0b2545; --ppidl-dip-rule: #dbe4ee; --ppidl-dip-muted: #64748b; }
.ppidl-katalog .ppidl-filter label { min-width: 0; max-width: 100%; }
.ppidl-katalog .ppidl-filter select, .ppidl-katalog .ppidl-filter input { max-width: 100%; }
.ppidl-katalog .ppidl-filter .ppidl-btn { background: var(--ppidl-dip-ink); border-color: var(--ppidl-dip-ink); }
.ppidl-dip th, .ppidl-dip td { border: 0; border-bottom: 1px solid var(--ppidl-dip-rule); padding: .7rem .75rem .7rem 0; }
.ppidl-dip thead th { background: none; color: var(--ppidl-dip-muted); font-weight: 600; font-size: .9em; border-bottom: 2px solid var(--ppidl-dip-ink); }
.ppidl-dip tbody tr:nth-child(even) td { background: none; }
.ppidl-dip .ppidl-group th { background: none; color: var(--ppidl-dip-ink); font-size: 1.05em; padding-top: 1.5rem; border-bottom: 1px solid var(--ppidl-dip-ink); }
.ppidl-dip .ppidl-num { color: var(--ppidl-dip-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
	.ppidl-dip td { border-width: 0; padding: .15rem 0; }
	.ppidl-dip td:first-child { border-top: 0; padding-top: .8rem; }
	.ppidl-dip tr { border-bottom: 1px solid var(--ppidl-dip-rule); padding-bottom: .6rem; }
}
.ppidl-plain { margin: 0; padding-left: 1.1em; }
.ppidl-plain li { margin: .15em 0; }