/**
 * dsh-legal.css: halaman bacaan (kebijakan privasi, hapus data).
 *
 * Dial ENERGY 1 / RHYTHM 1 / MOTION 1 (DESIGN.md bagian 3, setara hasil
 * telusur): halaman ini dibaca, bukan dijelajahi. Satu kolom selebar 68
 * karakter, tanpa pustaka dari pihak ketiga. Satu-satunya skrip ada di
 * hapus-data.php, untuk keadaan memuat tombol hapus. Warna hanya lewat nama
 * peran dari dsh-tokens.css.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  /* Inter adalah huruf situs ini (DESIGN.md bagian 5). Di sini tidak dimuat
     dari Google Fonts supaya halaman privasi sendiri tidak memanggil pihak
     ketiga; tanpa Inter terpasang, huruf sistem yang dipakai. */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.legal-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  padding: 12px 16px;
  background: var(--action-fill);
  color: var(--on-action);
  border-radius: var(--radius-control);
}
.legal-skip:focus { top: 8px; color: var(--on-action); }
/* Tautan lompat muncul di atas bilah navy: cincin navy tidak akan terlihat di sana. */
.legal-skip:focus-visible { outline-color: var(--gold-500); }

.legal-bar {
  background: var(--action-fill);
}
.legal-bar__inner,
.legal-main,
.legal-foot__inner {
  max-width: 44rem;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.legal-bar__inner {
  display: flex;
  align-items: center;
  min-height: 56px;
}
.legal-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-action);
  font-weight: 600;
  text-decoration: none;
}
.legal-bar a:hover { color: var(--on-action); text-decoration: underline; }
.legal-bar a:focus-visible { outline-color: var(--gold-500); }

.legal-main {
  padding-top: 40px;
  padding-bottom: 64px;
}

.legal-main h1 {
  margin: 0;
  color: var(--navy-900);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
/* Satu-satunya aksen goni di halaman: garis pendek di bawah judul. */
.legal-main h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 16px;
  background: var(--accent-fill);
}
.legal-meta {
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.legal-main h2 {
  margin: 48px 0 0;
  color: var(--navy-900);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.legal-main h3 {
  margin: 24px 0 0;
  font-size: 16px;
  font-weight: 600;
}
.legal-main p,
.legal-main ul,
.legal-main ol { margin: 12px 0 0; }
.legal-main ul,
.legal-main ol { padding-left: 24px; }
.legal-main li + li { margin-top: 8px; }

.legal-summary {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--surface-panel);
  border: 1px solid var(--border-decor);
  border-radius: var(--radius-card);
}
.legal-summary > :first-child { margin-top: 0; }

/* Tabel data: di layar sempit tiap baris menjadi blok, supaya tidak ada gulir mendatar. */
.legal-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 15px;
}
.legal-table th,
.legal-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-decor);
  text-align: left;
  vertical-align: top;
}
.legal-table thead th {
  background: var(--surface-sunken);
  font-weight: 600;
}
.legal-table tbody th { font-weight: 600; width: 28%; }

@media (max-width: 640px) {
  .legal-main { padding-top: 32px; }
  .legal-main h1 { font-size: 24px; }
  .legal-main h2 { font-size: 20px; margin-top: 40px; }

  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td { display: block; width: 100%; }
  .legal-table tr { padding: 12px 0; border-bottom: 1px solid var(--border-decor); }
  .legal-table th,
  .legal-table td { padding: 0; border: 0; }
  .legal-table tbody th { width: 100%; }
  .legal-table td { margin-top: 4px; }
  .legal-table td::before {
    content: attr(data-label) ": ";
    color: var(--text-secondary);
    font-weight: 600;
  }
}

/* Pesan keadaan: selalu dengan teks, warna hanya penguat (DESIGN.md bagian 4.3). */
.legal-note {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
}
.legal-note > :first-child { margin-top: 0; }
.legal-note--ok     { background: var(--ok-tint);     color: var(--ok-text);     border-color: var(--ok-text); }
.legal-note--danger { background: var(--danger-tint); color: var(--danger-text); border-color: var(--danger-text); }
.legal-note a { color: inherit; }

.legal-account {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--surface-panel);
  border: 1px solid var(--border-decor);
  border-radius: var(--radius-card);
  overflow-wrap: anywhere;
}
.legal-account strong { display: block; }

.legal-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  min-height: 44px;
}
.legal-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--navy-900);
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.legal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.legal-btn--primary { background: var(--action-fill); color: var(--on-action); }
.legal-btn--primary:hover { background: var(--navy-700); color: var(--on-action); }
.legal-btn--danger { background: var(--danger-text); color: var(--white); }
.legal-btn--danger:hover { color: var(--white); text-decoration: underline; }
.legal-btn--plain { background: var(--surface-panel); color: var(--navy-900); border-color: var(--border-control); }
.legal-btn--plain:hover { background: var(--surface-sunken); }

.legal-foot {
  border-top: 1px solid var(--border-decor);
  background: var(--cream-100);
  font-size: 14px;
  color: var(--text-secondary);
}
.legal-foot__inner { padding-top: 32px; padding-bottom: 32px; }
.legal-foot__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.legal-foot__brand img { flex: none; }
.legal-foot__brand p { margin: 0; }
.legal-foot__brand strong {
  display: block;
  color: var(--navy-900);
  font-size: 16px;
}
/* Dua kelompok berdampingan di layar lebar, bertumpuk di ponsel. */
.legal-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 24px 32px;
  margin-top: 24px;
}
.legal-foot h2 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}
.legal-foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-foot li {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.legal-foot li a { overflow-wrap: anywhere; }
/* Halaman yang sedang dibuka: tanpa garis bawah dan berbobot biasa, supaya tidak terbaca sebagai judul kelompok. */
.legal-foot a[aria-current="page"] { color: var(--text-primary); text-decoration: none; }
.legal-foot__copy {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-decor);
}

/* Tombol yang sedang memproses: teksnya berganti, warnanya tetap supaya kontras tidak turun. */
.legal-btn[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .legal-btn { transition: none; }
}

.legal-status { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; }
.legal-status:empty { display: none; }