/* Bingkai Quiet Margins untuk semua pengalaman interaktif.
   Bagian dalam tiap pengalaman boleh berbeda (chat, peta, jam, kalender, arsip), tapi yang milik situs
   (tombol keluar, tombol ? dan Aa, dialog pengaturan, huruf antarmuka, warna dasar, langit di layar lebar)
   diambil dari token situs utama (assets/style.css) supaya terasa satu dunia. */
:root {
  --qm-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, "Segoe UI", sans-serif;
  --qm-read: "Newsreader", "Iowan Old Style", Georgia, serif;
  --qm-ink: #111214; --qm-muted: #8A8F96; --qm-line: #E4E5E9; --qm-card: rgb(255 255 255 / .92); --qm-chip: #E7E7EA;
  --qm-bg: #E9E9EC; --qm-panel: #F6F6F7; --qm-paper: #FFFFFF;
  --qm-accent: #1662FF; --qm-shadow: 0 18px 40px -22px rgb(30 36 50 / .30), 0 0 0 1px rgb(30 36 50 / .05);
  --bd-a: #C6D1EE; --bd-b: #ECE8F0; --bd-c: #F8DFCD;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --qm-ink: #F4F4F5; --qm-muted: #8B8B91; --qm-line: #2A2A2E; --qm-card: rgb(24 24 27 / .95); --qm-chip: #242427;
    --qm-bg: #070708; --qm-panel: #0E0E0F; --qm-paper: #161618; --qm-accent: #6E9BFF; --qm-shadow: 0 18px 40px -22px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
    --bd-a: #0B0E1B; --bd-b: #171327; --bd-c: #2B1830;
  }
}
:root[data-theme="dark"] {
  --qm-ink: #F4F4F5; --qm-muted: #8B8B91; --qm-line: #2A2A2E; --qm-card: rgb(24 24 27 / .95); --qm-chip: #242427;
  --qm-bg: #070708; --qm-panel: #0E0E0F; --qm-paper: #161618; --qm-accent: #6E9BFF; --qm-shadow: 0 18px 40px -22px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
  --bd-a: #0B0E1B; --bd-b: #171327; --bd-c: #2B1830;
}
/* langit yang sama dengan situs utama (ikut jam atau pilihan pembaca) */
:root[data-backdrop="fajar"] { --bd-a: #F6D3C4; --bd-b: #F1E5EE; --bd-c: #C7D3F3; }
:root[data-backdrop="siang"] { --bd-a: #B9D2F6; --bd-b: #EEF2F8; --bd-c: #E2ECF7; }
:root[data-backdrop="senja"] { --bd-a: #C6D1EE; --bd-b: #ECE8F0; --bd-c: #F8DFCD; }
:root[data-backdrop="kabut"] { --bd-a: #D9DDE3; --bd-b: #E9E7EA; --bd-c: #D7DCD2; }
:root[data-backdrop="malam"] { --bd-a: #090B1A; --bd-b: #1E1238; --bd-c: #4A1E4E; }
:root { --qm-sky: radial-gradient(60% 55% at 0% 100%, var(--bd-c), transparent 70%), radial-gradient(70% 60% at 100% 0%, var(--bd-a), transparent 75%), linear-gradient(180deg, var(--bd-a) 0%, var(--bd-b) 55%, var(--bd-c) 100%); }

/* Tombol keluar: sama persis dengan pil "‹ Piringan" di pembaca situs utama */
.qm-back { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 16px 0 10px; border: 0; border-radius: 19px; background: var(--qm-card); color: var(--qm-ink); box-shadow: var(--qm-shadow); font: 500 14.5px/1 var(--qm-ui); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; }
.qm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.qm-back:hover { filter: brightness(.97); }
.qm-back:focus-visible, .qm-icon:focus-visible { outline: 2px solid var(--qm-accent); outline-offset: 3px; }

/* Bilah bingkai melayang untuk halaman yang seluruh layarnya dipakai cerita (peta, obrolan) */
.qm-frame { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none; }
.qm-frame > * { pointer-events: auto; }

/* Tombol bundar kanan atas: ? (panduan) dan Aa (pengaturan baca) */
.qm-cluster { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.qm-icon, .qm-cluster .jm-help { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--qm-card); color: var(--qm-ink); box-shadow: var(--qm-shadow); font: 400 16px var(--qm-read); cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.qm-cluster .jm-help { font: 600 15px var(--qm-ui); }
.qm-icon:hover, .qm-cluster .jm-help:hover { filter: brightness(.97); }

/* Penanda langkah dan kartu berikutnya memakai warna bingkai */
.jm-step { background: var(--qm-card); color: var(--qm-ink); box-shadow: var(--qm-shadow); font-family: var(--qm-ui); }
.jm-next { background: var(--qm-card); color: var(--qm-ink); box-shadow: var(--qm-shadow); font-family: var(--qm-ui); }
.jm-card { font-family: var(--qm-ui); }
:root { --jm-accent: var(--qm-accent); --jm-card: var(--qm-paper); --jm-ink: var(--qm-ink); --jm-chip: var(--qm-chip); }

/* Dialog pengaturan baca: sama di semua pengalaman */
dialog#settingsDialog { width: min(420px, calc(100% - 28px)); padding: 0; border: 1px solid var(--qm-line); border-radius: 22px; background: var(--qm-paper); color: var(--qm-ink); font-family: var(--qm-ui); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .45); }
dialog#settingsDialog::backdrop { background: rgb(0 0 0 / .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#settingsDialog .dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
#settingsDialog .dialog-head h2 { margin: 0; font: 600 18px var(--qm-ui); }
#settingsDialog .close, #settingsDialog [data-close] { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--qm-chip); color: var(--qm-ink); font: 300 20px var(--qm-ui); }
#settingsDialog .settings-body { padding: 0 18px 16px; }
#settingsDialog .setting-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--qm-line); font-size: 15px; }
#settingsDialog .setting-row:last-child { border-bottom: 0; }
#settingsDialog .setting-button { min-width: 44px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--qm-chip); color: var(--qm-ink); font: 600 14px var(--qm-ui); cursor: pointer; }
#settingsDialog .setting-button + .setting-button { margin-left: 6px; }
#settingsDialog a.setting-button { display: inline-flex; align-items: center; text-decoration: none; }
#settingsDialog .setting-button[aria-pressed="true"] { background: var(--qm-ink); color: var(--qm-paper); text-decoration: none; }
#settingsDialog .setting-button:disabled { opacity: .4; cursor: default; }
#settingsDialog select { min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--qm-chip); color: var(--qm-ink); font: 600 14px var(--qm-ui); }

/* Langit di layar lebar: halaman yang punya jendela aplikasi di tengah */
@media (min-width: 900px) {
  html.qm-sky-wide, html.qm-sky-wide body { background-color: var(--bd-b); background-image: var(--qm-sky); background-attachment: fixed; }
}