/* Layanan: one pipeline for every service (page-layanan.php + pipa.js). Parties keep one colour each. */
.pipa { --cta: 74px; padding-bottom: calc(var(--cta) + 8px); }
.pipa [hidden] { display: none !important; }
.pipa-intro { padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.pipa-intro h1 { font-size: 28px; line-height: 1.15; }
.pipa-intro p { font-size: 14.5px; color: var(--ink-2); }

/* Service picker: sticks under the header while the pipeline scrolls. */
.pipa-pilih { position: sticky; top: var(--head); z-index: 15; background: #fff; padding: 10px 0 12px; margin-top: 10px; border-bottom: 1px solid #EFEFED; }
/* Signed-in only: the WP admin bar scrolls away on phones (≤600 px), so the offset applies on wider screens only. */
@media (min-width: 601px) { .admin-bar .pipa-pilih { top: calc(var(--head) + 46px); } }
@media (min-width: 783px) { .admin-bar .pipa-pilih { top: calc(var(--head) + 32px); } }
.pipa-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--soft); border-radius: 14px; padding: 4px; }
.pipa-seg button { appearance: none; font: inherit; border: 0; background: none; border-radius: 10px; min-height: 44px; padding: 4px 2px; color: #5A5656; cursor: pointer; line-height: 1.15; transition: background .2s, color .2s; }
.pipa-seg button b { font-size: 13px; font-weight: 600; }
.pipa-seg button small { display: none; }
.pipa-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.pipa-isi { padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.pipa-ring { border-radius: 18px; background: var(--soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pipa-ring .teks { display: flex; flex-direction: column; gap: 6px; }
.pipa-ring .tag { align-self: flex-start; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: #fff; }
.pipa-ring h2 { font-size: 19px; }
.pipa-ring p { font-size: 14px; color: var(--ink-2); }
.pipa-ring .hit { font-size: 12px; font-weight: 700; color: var(--green); }

.pipa-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pipa-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pipa-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; }
.p-anda { background: #FBF1D6; border-color: #EBD9A6; color: #7A5410; }
.p-admin { background: #E8EFF7; border-color: #C8D7E8; color: #2F5A86; }
.p-arsitek { background: #EEF6F1; border-color: #B9D8C7; color: #235F42; }
.p-eng { background: #F0ECF6; border-color: #D6CCE6; color: #5B4580; }
.p-luar { background: #EFEFED; border-color: #DADAD7; color: #4A4646; }

/* Pipeline */
.pipa-kolom { display: flex; flex-direction: column; }
.pipa-fase .h { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.pipa-fase:first-child .h { margin-top: 0; }
.pipa-fase .h b { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pipa-fase .h::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 1; }
.pipa-fase .h small { order: 2; font-size: 11px; font-weight: 600; color: #A1A1A1; }
.pipa-fase.redup .h b { color: #A1A1A1; }
.pipa-alur { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pipa-alur li { position: relative; padding-bottom: 4px; transition: opacity .3s; }
.pipa-alur li::before { content: ''; position: absolute; left: 12px; top: 30px; bottom: -2px; width: 2px; background: rgba(47, 125, 87, .35); }
.pipa-fase:last-child .pipa-alur li:last-child::before { display: none; }
.pipa-alur li.redup { opacity: .38; }
.pipa-alur li.redup::before { background: #C9C9C6; }
.pipa-alur .langkah { appearance: none; font: inherit; color: inherit; text-align: left; background: none; border: 1.5px solid transparent; border-radius: 12px; padding: 4px 0; width: 100%; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; min-height: 40px; }
.pipa-alur .langkah:disabled { cursor: default; }
.pipa-alur .langkah > svg { flex: none; margin: 6px 0 0 auto; color: var(--muted); transition: transform .25s; }
.pipa-alur .langkah.on > svg { transform: rotate(180deg); }
.pipa-alur .n { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: #fff; border: 2px solid var(--green); color: var(--green); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; }
.pipa-alur li.redup .n { border-color: #C9C9C6; border-style: dashed; }
.pipa-alur li.akhir .n { background: var(--green); color: #fff; }
.pipa-alur .t, .pipa-alur .langkah > span:last-child { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; min-width: 0; }
.pipa-alur b { font-size: 14.5px; }
.pipa-alur small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.pipa:not(.js) .pipa-alur .n { display: none; }

/* Step detail */
.pipa-rinci { margin: 4px 0 10px 38px; border-radius: 14px; background: var(--soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; animation: pipa-buka .28s ease; }
@keyframes pipa-buka { from { opacity: 0; transform: translateY(-6px); } }
.pipa-rinci .kol { display: flex; flex-direction: column; gap: 10px; }
.pipa-rinci p { font-size: 13.5px; color: var(--ink-2); }
.pipa-rinci .catat { font-size: 12.5px; line-height: 1.45; background: #FBF1D6; border: 1px solid #EBD9A6; color: #7A5410; border-radius: 10px; padding: 8px 10px; }
.pipa-rinci .kosong { color: var(--muted); }
.pipa-rinci .baris { display: flex; flex-direction: column; gap: 5px; }
.pipa-rinci .label, .pipa-rinci .kol > .label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pipa-rinci .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pipa-rinci .chip { font-size: 12.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.pipa-rinci .chip.hasil { border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; }
.pipa-syarat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pipa-syarat li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.35; }
.pipa-syarat .kotak { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; border: 1.5px solid #C9A44A; background: #FBF1D6; }
.pipa-syarat .kotak.kami { border-color: var(--green); background: #EEF6F1; }
.pipa-syarat small { display: block; font-size: 12px; color: var(--muted); }

.pipa-dapat { border-top: 1px solid var(--line); }
.pipa-dapat summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 14.5px; font-weight: 700; }
.pipa-dapat summary::-webkit-details-marker { display: none; }
.pipa-dapat summary span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pipa-cek { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pipa-cek li { display: flex; gap: 9px; font-size: 14px; line-height: 1.4; }
.pipa-cek .c { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.pipa-proyek { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }

/* CTA: same place as Kembali/Lanjutkan on Mulai, just above the bottom bar. */
.pipa-cta { position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(var(--nav) + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; }
.pipa-cta .btn { width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pipa-panel { display: none; }

@media (min-width: 960px) {
	.pipa-intro { padding-top: 28px; gap: 8px; } /* the lead sits right under the title, not pushed to the far right */
	.pipa-intro h1 { font-size: 40px; }
	.pipa-intro p { max-width: 680px; font-size: 15.5px; }
	.pipa-pilih { position: static; border: 0; padding: 0; margin-top: 18px; }
	.pipa-seg { gap: 12px; background: none; padding: 0; }
	.pipa-seg button { text-align: left; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
	.pipa-seg button:hover { border-color: #B9B9B6; }
	.pipa-seg button b { font-size: 17px; }
	.pipa-seg button small { display: block; font-size: 13px; color: var(--muted); }
	.pipa-seg button[aria-pressed="true"] { border-color: var(--ink); }
	.pipa-seg button[aria-pressed="true"] small { color: #C9CBCA; }
	.pipa-isi { padding-top: 16px; gap: 16px; }
	/* Service description kept close to its title (owner, 5 Nov 2026): label + step count on one line, title, then the
	   description right under it, at a readable width. */
	.pipa-ring { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; padding: 20px 24px; align-items: center; }
	.pipa-ring .teks { display: contents; }
	.pipa-ring .tag { grid-column: 1; grid-row: 1; justify-self: start; }
	.pipa-ring .hit { grid-column: 2; grid-row: 1; font-size: 13px; }
	.pipa-ring h2 { grid-column: 1 / -1; grid-row: 2; font-size: 24px; margin-top: 2px; }
	.pipa-ring p { grid-column: 1 / -1; grid-row: 3; max-width: 760px; font-size: 15px; line-height: 1.55; }
	/* Four phases side by side, all the same height so the short ones don't hang (owner, 5 Nov 2026). */
	.pipa-kolom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
	.pipa-fase { border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; }
	.pipa-fase.redup { background: #FAFAF9; }
	.pipa-fase .h { margin: 0 0 8px; }
	.pipa-fase .h::after { display: none; }
	.pipa-fase .h { justify-content: space-between; }
	.pipa-alur { gap: 2px; }
	.pipa-alur li::before { display: none; }
	.pipa-alur .langkah { padding: 6px 8px; gap: 10px; }
	.pipa-alur .langkah:not(:disabled):hover { background: var(--soft); }
	.pipa-alur .langkah.on { background: #EEF6F1; border-color: var(--green); }
	.pipa-alur .langkah > svg { display: none; }
	.pipa-alur .n { width: 24px; height: 24px; font-size: 11.5px; }
	.pipa-alur b { font-size: 13.5px; line-height: 1.3; }
	.pipa-alur small { font-size: 12px; line-height: 1.4; }
	.pipa.js .pipa-panel { display: block; }
	.pipa-panel { border-radius: 20px; border: 1.5px solid var(--green); padding: 20px 22px; }
	.pipa-panel.kosong { border: 1.5px dashed #C9C9C6; text-align: center; color: var(--muted); font-size: 14px; }
	.pipa-panel .pipa-rinci { margin: 0; background: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
	.pipa-panel .pipa-rinci h2 { font-size: 22px; }
	.pipa-dapat { border: 0; border-radius: 18px; background: var(--soft); padding: 4px 20px; }
	.pipa-dapat[open] { padding-bottom: 6px; }
	.pipa-cek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
	.pipa-cta { padding-left: max(16px, calc(50% - 280px)); padding-right: max(16px, calc(50% - 280px)); }
}