/* Tata letak saja. Warna, huruf, dan komponen dari tokens.css dan jp-ui.css. */
@font-face { font-family: "Anybody"; src: url("fonts/Anybody.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

body { margin: 0; background: var(--bg-page); min-height: 100vh; }
body.app-kunci { overflow: hidden; }

.app-tamu { display: grid; place-items: start center; min-height: 100vh; padding: var(--space-5) var(--space-4); box-sizing: border-box; }
.app-kartu-tamu { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); box-sizing: border-box; }
.app-logo-tamu { height: 40px; width: auto; align-self: flex-start; }

.app-shell { display: block; }
.app-side { display: none; }
.app-main { padding: var(--space-4); max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); }

.app-judul { margin: 0; font: 800 22px/28px var(--font-display); letter-spacing: -0.02em; }
.app-sub { margin: 0 0 var(--space-3); font: 800 17px/24px var(--font-display); }
.app-form { display: flex; flex-direction: column; gap: var(--space-4); }
.app-nama { font-weight: 600; }

.app-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.app-baris { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: flex-start; overflow-wrap: anywhere; }
.app-aksi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.app-aksi form { margin: 0; }
.app-aksi .app-isi { flex: 1 1 160px; }
form.app-aksi { align-items: flex-end; }

.app-fsm { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg-card); }
.app-fsm[hidden] { display: none; }

@media (min-width: 900px) {
  .app-fsm { display: none !important; }
}
@media (min-width: 900px) {
  .app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5); }
  .app-side { display: block; position: sticky; top: 88px; }
  .app-main { padding: 0; margin: 0; max-width: 860px; }
}

/* Layar order */
.app-sub2 { margin: var(--space-3) 0 var(--space-2); font: 600 15px/20px var(--font-sans); }
/* Tab status berupa tombol aria-pressed; tampilan terpilih sama dengan jp-tabs. */
.jp-tabs button[aria-pressed="true"] { color: var(--ink); }
.jp-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.app-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.app-hitung { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); text-decoration: none; color: var(--ink); box-sizing: border-box; }
.app-angka { font: 800 22px/28px var(--font-display); letter-spacing: -0.02em; }
.app-kartu-order { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.app-meta { overflow-wrap: anywhere; }
.app-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.app-pilih { position: relative; cursor: pointer; min-width: 0; }
.app-pilih[hidden] { display: none; }
.app-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app-pilih:has(.app-radio:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.app-pilih:has(.app-radio:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.app-rincian { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-2); }
.app-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; overflow-wrap: anywhere; }
.app-dl dt { color: var(--ink-muted); }
.app-dl dd { margin: 0; text-align: right; }
.app-total { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.app-desk { display: none !important; }
.app-form input[type="month"] { min-width: 0; }

@media (min-width: 600px) {
  .app-grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-desk { display: inline-flex !important; }
  span.app-desk { display: inline !important; }
}

.app-pesan + .app-pesan { margin-top: var(--space-4); }
.app-teks { width: 100%; box-sizing: border-box; min-height: 8rem; resize: vertical; font: inherit; }

/* Foto berkas */
.app-foto { margin-bottom: var(--space-3); }
.app-foto li { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.app-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.app-foto-pdf { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-md); }