/* Panaceamed Visual-First UI Law v43
   Main scrolling surfaces stay visual/metric-first. Explanatory context is
   available on demand through the runtime context affordance. */

:root {
  --pmd-vf-context-z: 2147483000;
}

/* Judul dan kendali tetap satu baris — itu memang bentuknya. Yang ditambahkan
   di sini hanya `min-width: 0`: tanpa itu, satu tombol atau judul panjang
   menaikkan lebar min-content seluruh induknya, dan sebuah kolom grid/flex
   melar melewati layar meskipun teksnya sendiri sudah terpotong rapi. */
main :where(h1,h2,h3,h4,h5,h6),
main :where(button,a,[role='button'],[role='tab']) {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prosa dipendekkan, TIDAK dijadikan satu baris.
   `white-space: nowrap` pada setiap p/li di dalam main melakukan dua hal
   sekaligus, dan yang kedua tidak disengaja:
     1. kalimatnya terpotong setelah beberapa kata — itu memang niat v43;
     2. lebar min-content paragraf menjadi selebar SELURUH kalimat, dan karena
        anak grid/flex bawaannya `min-width: auto`, kolomnya ikut melar.
   Terukur di 390x844 pada /med-study: tiap kartu panduan menjadi 486px di
   dalam kolom 325px, jadi kartunya tampak kosong dan isinya terdorong ke luar
   layar. Memakai pemotongan BARIS memberi hasil pendek yang sama tanpa
   menaikkan lebar min-content: yang menentukan tinggal kata terpanjang. */
main :where(p,li,dd,figcaption),
main .pmd-vf-copy {
  min-width: 0;
  max-width: 100%;
  /* Wajib ditulis ulang: aturan di atas memasang nowrap pada judul/kendali,
     dan white-space itu MENURUN ke prosa di dalamnya. Tanpa baris ini,
     paragraf di dalam sebuah kartu yang berupa tombol tetap satu baris. */
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden !important;
}

main .pmd-vf-copy[data-pmd-has-context='true'] {
  position: relative;
  padding-right: 1.35rem;
  cursor: pointer;
  outline: none;
}

main .pmd-vf-copy[data-pmd-has-context='true']::after {
  content: 'ⓘ';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  font-size: .72rem;
  line-height: 1;
  opacity: .72;
  pointer-events: none;
}

main .pmd-vf-copy[data-pmd-has-context='true']:is(:hover,:focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Anak grid dan flex bawaannya `min-width: auto`, yang berarti "sepanjang
   isinya". Begitu teks di dalamnya dipaksa satu baris oleh aturan di atas,
   lebar minimum itu menjadi selebar seluruh kalimat dan kolomnya melar
   melewati layar — kartunya tampak kosong, isinya terdorong ke luar.
   Ini pembetulan bakunya, dibatasi pada main. */
main :where([class*='grid'], [class*='flex']) > * {
  min-width: 0;
}

/* Explicit opt-out for true detail surfaces, editors and dialogs.
   Keep the typography unclamped, but do not globally force structural div/span
   descendants to overflow:visible. Those nodes can be real scroll containers
   (for example Body Explorer's horizontal mobile rails). Only prose/context
   nodes have their visual-first overflow clamp released. */
/* Membungkus teks kembali boleh berlaku luas: `white-space` dan `text-overflow`
   tidak mengubah CARA sebuah kotak menata anaknya, jadi span dan div aman. */
main :where(dialog,[role='dialog'],[data-pmd-unclamped='true'],details[open],pre,code,textarea,[contenteditable='true']) :where(h1,h2,h3,h4,h5,h6,p,li,dd,figcaption,span,div),
#pmd-context-dialog :where(h1,h2,h3,h4,h5,h6,p,span,div,button) {
  white-space: normal !important;
  text-overflow: clip !important;
}

/* `display` TIDAK boleh, dan daftarnya berhenti pada prosa.
   Versi pertama aturan ini menyertakan `span,div` bersama prosa, dan itu
   menghancurkan setiap tata letak di dalam permukaan yang memilih keluar:
   `display: revert` mengembalikan sebuah div ke `block` bawaan peramban,
   sehingga `display:flex` dan `display:grid` milik kelas Tailwind hilang.
   Terukur di 390x844 pada /body-explorer: baris 40 tab yang seharusnya satu
   jalur bergulir mendatar (`flex`, `nowrap`, `overflow-x:auto`) menjadi
   `display:block` dengan anak `inline-block`, membungkus menjadi 18 baris
   setinggi 800 piksel — hampir seluruh layar 844 piksel habis oleh deretan
   tab saja.
   Yang perlu dilepas hanyalah pemotongan baris, dan pemotongan itu hanya
   pernah dipasang pada p/li/dd/figcaption/.pmd-vf-copy. Tidak ada span atau
   div yang pernah menerimanya, jadi me-revert display mereka tidak pernah
   memperbaiki apa pun — ia hanya merusak.
   Komentar tepat di atas sudah memperingatkan bentuk kesalahan yang sama untuk
   `overflow`, dan menyebut rel mendatar Body Explorer sebagai contohnya. */
main :where(dialog,[role='dialog'],[data-pmd-unclamped='true'],details[open],pre,code,textarea,[contenteditable='true']) :where(p,li,dd,figcaption,.pmd-vf-copy),
#pmd-context-dialog :where(p,.pmd-vf-copy) {
  display: revert !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
}

main :where(dialog,[role='dialog'],[data-pmd-unclamped='true'],details[open],pre,code,textarea,[contenteditable='true']) :where(h1,h2,h3,h4,h5,h6,p,li,dd,figcaption,.pmd-vf-copy),
#pmd-context-dialog :where(h1,h2,h3,h4,h5,h6,p,.pmd-vf-copy,button) {
  overflow: visible !important;
}

#pmd-context-dialog {
  width: min(92vw, 34rem);
  max-height: min(72vh, 34rem);
  margin: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 1.35rem;
  background: color-mix(in srgb, Canvas 90%, transparent);
  color: CanvasText;
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  z-index: var(--pmd-vf-context-z);
}

#pmd-context-dialog::backdrop {
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#pmd-context-dialog .pmd-context-shell {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
}

#pmd-context-dialog .pmd-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#pmd-context-dialog .pmd-context-title {
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .66;
}

#pmd-context-dialog .pmd-context-close {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  font: 700 1rem/1 system-ui, sans-serif;
  cursor: pointer;
}

#pmd-context-dialog .pmd-context-copy {
  margin: 0;
  max-height: min(48vh, 20rem);
  overflow: auto !important;
  font-size: .95rem;
  line-height: 1.58;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  #pmd-context-dialog {
    width: calc(100vw - 1rem);
    max-height: 62vh;
    margin: auto .5rem .5rem;
    border-radius: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pmd-context-dialog { scroll-behavior: auto; }
}