/* ==========================================================================
   JURISTDIGI ACCESS — katalog layanan & master data
   --------------------------------------------------------------------------
   Palet mengikuti token yang sudah dipakai aplikasi (app.css): emas #d97706
   di atas kertas krem. Yang ditambahkan di sini bukan warna baru, melainkan
   satu perangkat struktural: BARIS KUTIPAN dalam huruf utilitas.

   Dalam praktik hukum, yang membedakan satu dokumen dari dokumen lain adalah
   dasar hukumnya. Maka setiap kartu di katalog diakhiri kutipan pasal, diset
   dengan huruf monospasi berspasi renggang — bukan hiasan, melainkan metadata
   yang justru paling menentukan saat memilih.
   ========================================================================== */

:root {
    --jd-paper:        #ffffff;
    --jd-shell:        #fbfaf7;
    --jd-sunken:       #f6f3ec;
    --jd-ink:          #191919;
    --jd-ink-soft:     #5d594f;
    --jd-ink-faint:    #8a857a;
    --jd-rule:         #e5e2d9;
    --jd-rule-strong:  #cdc8b8;
    --jd-accent:       #d97706;
    --jd-accent-deep:  #b45309;
    --jd-accent-wash:  rgba(217, 119, 6, .08);
    --jd-accent-edge:  rgba(217, 119, 6, .32);
    --jd-shadow-sm:    0 1px 2px rgba(25, 25, 25, .04);
    --jd-shadow-md:    0 10px 30px rgba(25, 25, 25, .10);
    --jd-shadow-lg:    0 30px 70px rgba(25, 25, 25, .22);

    /* Huruf utilitas untuk kutipan pasal, kode, dan angka. */
    --jd-utility: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}

html[data-bs-theme="dark"] {
    --jd-paper:        #212121;
    --jd-shell:        #191919;
    --jd-sunken:       #1b1b1b;
    --jd-ink:          #f5f5f5;
    --jd-ink-soft:     #b4b0a7;
    --jd-ink-faint:    #8a857a;
    --jd-rule:         #2d2d2d;
    --jd-rule-strong:  #3d3d3d;
    --jd-accent:       #e08b1f;
    --jd-accent-deep:  #f0a03c;
    --jd-accent-wash:  rgba(224, 139, 31, .12);
    --jd-accent-edge:  rgba(224, 139, 31, .38);
    --jd-shadow-sm:    0 1px 2px rgba(0, 0, 0, .3);
    --jd-shadow-md:    0 10px 30px rgba(0, 0, 0, .45);
    --jd-shadow-lg:    0 30px 70px rgba(0, 0, 0, .6);
}

/* Baris kutipan — perangkat struktural yang dipakai berulang di seluruh berkas ini. */
.master-cite,
.catalog-card__cite,
.lookup__chosen-cite {
    display: block;
    font-family: var(--jd-utility);
    font-size: .69rem;
    letter-spacing: .015em;
    line-height: 1.5;
    color: var(--jd-ink-faint);
}

/* ==========================================================================
   1. PEMILIH LAYANAN — rel tab portal Access
   ========================================================================== */

.access-tabs__btn {
    position: relative;
    overflow: hidden;
}

/* Garis bawah tumbuh dari tengah saat tab dipilih: satu isyarat gerak yang
   menandai perpindahan tanpa menggeser tata letak. */
.access-tabs__btn::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    background-color: currentColor;
    opacity: .55;
    transition: left .22s ease, right .22s ease;
}

.access-tabs__btn.is-active::after { left: 0; right: 0; }

/* ==========================================================================
   2. DEK CONTOH PERTANYAAN — Asisten Virtual JURIST
   ========================================================================== */

.prompt-deck {
    margin: .25rem 0 1.25rem;
    padding: 1.1rem 1.15rem 1.25rem;
    border: 1px solid var(--jd-rule);
    border-radius: .85rem;
    background-color: var(--jd-sunken);
}

.prompt-deck__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.prompt-deck__title {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--jd-ink);
}

.prompt-deck__all {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jd-accent);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.prompt-deck__all:hover { color: var(--jd-accent-deep); }

.prompt-deck__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .9rem;
}

.prompt-chip {
    padding: .24rem .62rem;
    border: 1px solid var(--jd-rule-strong);
    border-radius: 999px;
    background: none;
    color: var(--jd-ink-soft);
    font-size: .74rem;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.prompt-chip:hover {
    border-color: var(--jd-accent);
    color: var(--jd-accent);
}

.prompt-chip.is-active {
    border-color: var(--jd-accent);
    background-color: var(--jd-accent);
    color: #fff;
    font-weight: 600;
}

.prompt-chip--inline {
    background-color: var(--jd-paper);
    box-shadow: var(--jd-shadow-sm);
}

.prompt-deck__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prompt-card {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    width: 100%;
    height: 100%;
    padding: .7rem .8rem .75rem;
    border: 1px solid var(--jd-rule);
    border-radius: .6rem;
    background-color: var(--jd-paper);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.prompt-card:hover {
    border-color: var(--jd-accent-edge);
    transform: translateY(-2px);
    box-shadow: var(--jd-shadow-md);
}

.prompt-card__title {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jd-ink);
}

.prompt-card__hint {
    font-size: .74rem;
    line-height: 1.45;
    color: var(--jd-ink-soft);
}

.prompt-card__cat {
    margin-top: .2rem;
    font-family: var(--jd-utility);
    font-size: .64rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jd-ink-faint);
}

/* ==========================================================================
   3. PANEL LOOKUP — tombol pemanggil katalog dan ringkasan pilihan
   ========================================================================== */

.lookup { margin-bottom: 1.1rem; }

.lookup__row {
    display: flex;
    gap: .45rem;
    align-items: stretch;
}

.lookup__row .form-select { flex: 1 1 auto; min-width: 0; }

.lookup__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .6rem .85rem;
    border: 1px dashed var(--jd-rule-strong);
    border-radius: .6rem;
    background-color: var(--jd-paper);
    color: var(--jd-ink);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.lookup__btn:hover {
    border-color: var(--jd-accent);
    border-style: solid;
    color: var(--jd-accent);
    background-color: var(--jd-accent-wash);
}

.lookup__btn--compact {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.lookup__count {
    margin-left: auto;
    padding: .05rem .42rem;
    border-radius: 999px;
    background-color: var(--jd-sunken);
    font-family: var(--jd-utility);
    font-size: .68rem;
    font-weight: 500;
    color: var(--jd-ink-faint);
}

.lookup__btn--compact .lookup__count { margin-left: .1rem; }

.lookup__hint {
    margin: .45rem 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--jd-ink-faint);
}

.lookup__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jd-accent);
    font-size: .74rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Ringkasan pilihan yang sedang berlaku. */
.lookup__chosen {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .55rem;
    padding: .65rem .8rem;
    border: 1px solid var(--jd-rule);
    border-left: 3px solid var(--jd-accent);
    border-radius: .5rem;
    background-color: var(--jd-paper);
}

.lookup__chosen-label {
    margin: 0;
    font-family: var(--jd-utility);
    font-size: .64rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--jd-ink-faint);
}

.lookup__chosen-name {
    margin: .12rem 0 .18rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--jd-ink);
}

.lookup__chosen-cite { margin: 0; }

.lookup__clear {
    flex: 0 0 auto;
    padding: .1rem .4rem;
    border: 0;
    background: none;
    color: var(--jd-ink-faint);
    font-size: .72rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lookup__clear:hover { color: #d03b3b; }

/* CAP — kilatan sekali saat pilihan baru diterapkan ke formulir.
   Menjawab pertanyaan "apa yang barusan berubah?" tanpa teks tambahan. */
.lookup__chosen.is-stamped { animation: jd-stamp .85s ease-out 1; }

@keyframes jd-stamp {
    0%   { background-color: var(--jd-accent); border-left-color: var(--jd-accent); }
    12%  { background-color: var(--jd-accent-wash); }
    100% { background-color: var(--jd-paper); }
}

/* Daftar isu, perizinan, atau berkas persyaratan. */
.lookup__issues {
    margin-top: .5rem;
    padding: .6rem .8rem .65rem;
    border: 1px solid var(--jd-rule);
    border-radius: .5rem;
    background-color: var(--jd-sunken);
}

.lookup__issues-title {
    margin: 0 0 .35rem;
    font-family: var(--jd-utility);
    font-size: .64rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--jd-ink-faint);
}

.lookup__issues ul {
    margin: 0;
    padding-left: 1.05rem;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--jd-ink-soft);
}

.lookup__issues li { margin-bottom: .12rem; }

/* ==========================================================================
   4. KATALOG — elemen tanda tangan halaman ini
   Rel kategori di kiri, register kartu dokumen di kanan.
   ========================================================================== */

.catalog {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.5rem, 3vw, 2.5rem);
}

.catalog__scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(25, 25, 25, .55);
    backdrop-filter: blur(2px);
    animation: jd-fade .2s ease-out 1;
}

@keyframes jd-fade { from { opacity: 0; } to { opacity: 1; } }

.catalog__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(74rem, 100%);
    max-height: 100%;
    border: 1px solid var(--jd-rule);
    border-radius: .9rem;
    background-color: var(--jd-shell);
    box-shadow: var(--jd-shadow-lg);
    overflow: hidden;
    animation: jd-rise .26s cubic-bezier(.2, .7, .3, 1) 1;
}

@keyframes jd-rise {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

.catalog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--jd-rule);
    background-color: var(--jd-paper);
}

.catalog__eyebrow {
    margin: 0 0 .3rem;
    font-family: var(--jd-utility);
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--jd-accent);
}

.catalog__title {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.3rem, 2.4vw, 1.62rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--jd-ink);
}

.catalog__lede {
    max-width: 52ch;
    margin: .4rem 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--jd-ink-soft);
}

.catalog__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--jd-rule);
    border-radius: 50%;
    background-color: var(--jd-shell);
    color: var(--jd-ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.catalog__close:hover { border-color: var(--jd-accent); color: var(--jd-accent); }

/* --- Pencarian --- */
.catalog__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: .7rem 1.5rem;
    border-bottom: 1px solid var(--jd-rule);
    background-color: var(--jd-paper);
}

.catalog__search-icon {
    position: absolute;
    left: 1.65rem;
    color: var(--jd-ink-faint);
    pointer-events: none;
}

.catalog__search-input {
    width: 100%;
    padding: .5rem .5rem .5rem 1.75rem;
    border: 0;
    border-bottom: 1px solid var(--jd-rule);
    background: none;
    color: var(--jd-ink);
    font-size: .92rem;
    outline: none;
    transition: border-color .15s ease;
}

.catalog__search-input:focus { border-bottom-color: var(--jd-accent); }
.catalog__search-input::placeholder { color: var(--jd-ink-faint); }

.catalog__search-clear {
    position: absolute;
    right: 1.6rem;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background-color: var(--jd-sunken);
    color: var(--jd-ink-soft);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

/* --- Badan: rel + hasil --- */
.catalog__body {
    display: grid;
    grid-template-columns: 14.5rem minmax(0, 1fr);
    min-height: 0;
    flex: 1 1 auto;
}

.catalog__rail {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .9rem .7rem;
    border-right: 1px solid var(--jd-rule);
    background-color: var(--jd-shell);
    overflow-y: auto;
}

.catalog__rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .42rem .6rem;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 .35rem .35rem 0;
    background: none;
    color: var(--jd-ink-soft);
    font-size: .8rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.catalog__rail-item:hover {
    background-color: var(--jd-accent-wash);
    color: var(--jd-ink);
}

.catalog__rail-item.is-active {
    border-left-color: var(--jd-accent);
    background-color: var(--jd-accent-wash);
    color: var(--jd-ink);
    font-weight: 600;
}

.catalog__rail-count {
    flex: 0 0 auto;
    font-family: var(--jd-utility);
    font-size: .68rem;
    color: var(--jd-ink-faint);
}

.catalog__results {
    padding: 1rem 1.25rem 1.35rem;
    overflow-y: auto;
}

.catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Kartu: satu dokumen dalam register --- */
.catalog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
    height: 100%;
    padding: .95rem .95rem 1rem;
    border: 1px solid var(--jd-rule);
    border-radius: .6rem;
    background-color: var(--jd-paper);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Garis rambut di kepala kartu menyapu penuh saat disorot — kutipan visual
   dari kepala surat resmi, sekaligus penanda sasaran tetikus. */
.catalog-card__rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 2px;
    border-radius: 0 0 2px 0;
    background-color: var(--jd-rule-strong);
    transition: width .26s cubic-bezier(.2, .7, .3, 1), background-color .2s ease;
}

.catalog-card:hover {
    border-color: var(--jd-accent-edge);
    transform: translateY(-2px);
    box-shadow: var(--jd-shadow-md);
}

.catalog-card:hover .catalog-card__rule,
.catalog-card:focus-visible .catalog-card__rule {
    width: 100%;
    background-color: var(--jd-accent);
}

.catalog-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.catalog-card__cat {
    font-family: var(--jd-utility);
    font-size: .63rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--jd-accent);
}

.catalog-card__code {
    font-family: var(--jd-utility);
    font-size: .63rem;
    color: var(--jd-ink-faint);
}

.catalog-card__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--jd-ink);
}

.catalog-card__summary {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--jd-ink-soft);

    /* Ringkasan dipotong tiga baris agar tinggi kartu tetap sepadan dan
       mata dapat menyapu register tanpa tersendat. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .22rem;
    margin-top: .1rem;
}

.catalog-card__tag {
    padding: .1rem .4rem;
    border: 1px solid var(--jd-rule);
    border-radius: .3rem;
    background-color: var(--jd-sunken);
    font-size: .66rem;
    line-height: 1.5;
    color: var(--jd-ink-soft);

    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-card__cite {
    margin-top: auto;
    padding-top: .5rem;
    border-top: 1px solid var(--jd-rule);
}

.catalog-card__cta {
    margin-top: .45rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--jd-accent);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease;
}

.catalog-card:hover .catalog-card__cta,
.catalog-card:focus-visible .catalog-card__cta {
    opacity: 1;
    transform: none;
}

/* --- Keadaan kosong --- */
.catalog__empty {
    padding: 3.5rem 1rem;
    text-align: center;
}

.catalog__empty-title {
    margin: 0 0 .3rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.08rem;
    color: var(--jd-ink);
}

.catalog__empty-body {
    max-width: 34ch;
    margin: 0 auto;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--jd-ink-soft);
}

.catalog__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jd-accent);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.catalog__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.5rem;
    border-top: 1px solid var(--jd-rule);
    background-color: var(--jd-paper);
}

.catalog__count {
    margin: 0;
    font-size: .75rem;
    color: var(--jd-ink-faint);
}

/* ==========================================================================
   5. MASTER DATA BACK-OFFICE
   ========================================================================== */

.master-shell {
    padding: 1.35rem 1.4rem 1.5rem;
    border: 1px solid var(--jd-rule);
    border-radius: .75rem;
    background-color: var(--jd-paper);
}

.master-shell__head { margin-bottom: 1.1rem; }

.master-shell__eyebrow {
    margin: 0 0 .25rem;
    font-family: var(--jd-utility);
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--jd-accent);
}

.master-shell__title {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--jd-ink);
}

.master-shell__lede {
    max-width: 62ch;
    margin: .4rem 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--jd-ink-soft);
}

.master-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--jd-rule);
}

.master-tabs__btn {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .8rem;
    border: 1px solid var(--jd-rule);
    border-radius: .5rem;
    background-color: var(--jd-shell);
    color: var(--jd-ink-soft);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.master-tabs__btn:hover { border-color: var(--jd-accent-edge); color: var(--jd-ink); }

.master-tabs__btn.is-active {
    border-color: var(--jd-accent);
    background-color: var(--jd-accent-wash);
    color: var(--jd-ink);
}

.master-tabs__label { font-size: .84rem; font-weight: 600; }

.master-tabs__hint {
    font-family: var(--jd-utility);
    font-size: .63rem;
    letter-spacing: .04em;
    color: var(--jd-ink-faint);
}

.master-shell__body { padding-top: 1.1rem; }

.master-panel__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.master-filter {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.master-filter__field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 11rem;
}

.master-filter__field > span,
.master-filter__check > span {
    font-family: var(--jd-utility);
    font-size: .64rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--jd-ink-faint);
}

.master-filter__check {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    cursor: pointer;
}

.master-filter__check > span { text-transform: none; letter-spacing: 0; font-size: .76rem; }

.master-table thead th {
    border-bottom: 1px solid var(--jd-rule-strong);
    font-family: var(--jd-utility);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--jd-ink-faint);
}

.master-table td { vertical-align: top; padding-top: .6rem; padding-bottom: .6rem; }

.master-table tr.is-inactive { opacity: .48; }

.master-table__name {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jd-ink);
}

.master-table__sub {
    margin-top: .1rem;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--jd-ink-soft);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.master-table__empty {
    padding: 3rem 1rem !important;
    text-align: center;
    color: var(--jd-ink-faint);
    font-size: .84rem;
}

.master-panel__count {
    margin: .6rem 0 0;
    font-size: .75rem;
    color: var(--jd-ink-faint);
}

/* ==========================================================================
   6. FOKUS PAPAN KETIK
   Satu-satunya penanda posisi bagi pengguna papan ketik; jangan dihapus.
   ========================================================================== */

.prompt-chip:focus-visible,
.prompt-card:focus-visible,
.prompt-deck__all:focus-visible,
.lookup__btn:focus-visible,
.lookup__clear:focus-visible,
.lookup__link:focus-visible,
.catalog__close:focus-visible,
.catalog__rail-item:focus-visible,
.catalog-card:focus-visible,
.catalog__link:focus-visible,
.catalog__search-clear:focus-visible,
.master-tabs__btn:focus-visible {
    outline: 2px solid var(--jd-accent);
    outline-offset: 2px;
}

.catalog__search-input:focus-visible { outline: none; }

/* ==========================================================================
   7. LAYAR SEMPIT
   ========================================================================== */

@media (max-width: 767.98px) {
    .catalog { padding: 0; }

    .catalog__panel {
        width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    /* Rel kategori berubah menjadi deret mendatar yang menggulir, karena kolom
       selebar 14rem akan memakan hampir separuh layar ponsel. */
    .catalog__body { grid-template-columns: minmax(0, 1fr); }

    .catalog__rail {
        flex-direction: row;
        gap: .35rem;
        padding: .6rem .9rem;
        border-right: 0;
        border-bottom: 1px solid var(--jd-rule);
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .catalog__rail-item {
        flex: 0 0 auto;
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: .35rem;
    }

    .catalog__rail-item.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--jd-accent);
    }

    .catalog__head,
    .catalog__search,
    .catalog__foot { padding-left: .9rem; padding-right: .9rem; }

    .catalog__search-icon { left: 1.05rem; }
    .catalog__search-clear { right: 1rem; }
    .catalog__results { padding: .9rem; }

    .lookup__row { flex-direction: column; }
    .lookup__btn--compact { width: 100%; justify-content: center; }

    .master-shell { padding: 1rem .9rem 1.15rem; }
    .master-filter__field { min-width: 100%; }
}

/* ==========================================================================
   8. GERAK
   app.css sudah memangkas seluruh durasi animasi saat pengguna meminta
   pengurangan gerak. Yang dimatikan di sini adalah perpindahan posisinya,
   supaya tidak ada yang melompat pada langkah terakhir animasi.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .prompt-card:hover,
    .catalog-card:hover { transform: none; }

    .catalog__panel { animation: none; }
    .catalog__scrim { animation: none; }
    .lookup__chosen.is-stamped { animation: none; border-left-width: 5px; }

    .catalog-card__rule { width: 100%; }
    .catalog-card__cta { opacity: 1; transform: none; }
}