:root {
  --bg: #f5f2ed;
  --surface: #ffffff;
  --ink: #1d1a17;
  --muted: #6a625a;
  --line: #e2dcd3;
  --field-line: #8e857a;
  --accent: #a3472a;
  --on-accent: #ffffff;
  --accent-ink: #a3472a;
  --coin-cut: #f5f2ed;
  --skeleton: #ebe5dc;
  --shine: rgba(255, 255, 255, .55);
  --photo: linear-gradient(165deg, #efd6b4 0%, #dca777 45%, #b56d43 78%, #8c4a2c 100%);
  /* 0 by day, 1 by night; the night mode switch reads its whole picture from this one number */
  --night: 0;
  --radius: 18px;
  --radius-s: 6px;
  --gutter: 16px;
  --column: 40rem;
  --ease: cubic-bezier(.23, 1, .32, 1);
  /* a spring that passes its mark once (5%) and comes back */
  --ease-spring: cubic-bezier(.4, .6, .3, 1.25);
  /* ink soaking into paper: full speed at the tap, slowing as it spreads */
  --ease-ink: cubic-bezier(.25, .46, .45, .94);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a19;
    --surface: #262422;
    --ink: #ece6de;
    --muted: #a49b91;
    --line: #34312e;
    --field-line: #777068;
    --accent: #ae5030;
    --on-accent: #ffffff;
    --accent-ink: #e08f6e;
    --coin-cut: #1b1a19;
    --skeleton: #2c2927;
    --shine: rgba(255, 255, 255, .06);
    --photo: linear-gradient(165deg, #8f6e50 0%, #7a4f33 45%, #5e3522 78%, #432517 100%);
    --night: 1;
  }
}

/* Night mode chosen on this device (data-theme, set by templates/_tema.html before first paint)
   wins over the phone's setting. The values repeat the two blocks above, since a media rule and
   an attribute rule cannot share declarations; tests/shell.sh counts them so the copies cannot
   drift. color-scheme makes the select and the scrollbars follow the choice too. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2ed;
  --surface: #ffffff;
  --ink: #1d1a17;
  --muted: #6a625a;
  --line: #e2dcd3;
  --field-line: #8e857a;
  --accent: #a3472a;
  --on-accent: #ffffff;
  --accent-ink: #a3472a;
  --coin-cut: #f5f2ed;
  --skeleton: #ebe5dc;
  --shine: rgba(255, 255, 255, .55);
  --photo: linear-gradient(165deg, #efd6b4 0%, #dca777 45%, #b56d43 78%, #8c4a2c 100%);
  --night: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1a19;
  --surface: #262422;
  --ink: #ece6de;
  --muted: #a49b91;
  --line: #34312e;
  --field-line: #777068;
  --accent: #ae5030;
  --on-accent: #ffffff;
  --accent-ink: #e08f6e;
  --coin-cut: #1b1a19;
  --skeleton: #2c2927;
  --shine: rgba(255, 255, 255, .06);
  --photo: linear-gradient(165deg, #8f6e50 0%, #7a4f33 45%, #5e3522 78%, #432517 100%);
  --night: 1;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Shell: header, scrolling log, composer */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Top bar */

.bar {
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--column);
  height: 56px;
  margin: 0 auto;
  padding: 0 6px 0 var(--gutter);
}

.who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopi {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
}

.kopi .num { font-variant-numeric: tabular-nums; font-weight: 600; }

.right {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Menu: a details sheet; the summary's ::before is the dim and closes it on tap */

/* no .icon-btn here: its :active transform would re-anchor the fixed dim */
.menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker { display: none; }

.menu > summary .ic { width: 24px; height: 24px; }

.menu[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .45);
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-width: var(--column);
  margin: 0 auto;
  padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
}

.grab {
  align-self: center;
  width: 36px;
  height: 5px;
  margin: 0 0 8px;
  border-radius: var(--radius-s);
  background: var(--line);
}

.item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 2px 0 4px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.item .ic { width: 24px; height: 24px; color: var(--muted); }
.item .coin { width: 22px; height: 22px; margin: 0 1px; color: var(--muted); }

.it {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.it small { color: var(--muted); font-size: 13px; font-weight: 400; }

.chev { flex: none; width: 20px; height: 20px; color: var(--muted); }

/* .sheet lifts this over .btn, which comes later in the file */
.sheet .tutup { height: 48px; margin-top: 16px; font-size: 15px; text-decoration: none; }

.coin {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
}

/* Conversation: column-reverse keeps the newest message in view */

.log {
  display: flex;
  flex-direction: column-reverse;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.log-in {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding: 16px var(--gutter) 20px;
}

.day {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 82%;
}

.msg.her { align-self: flex-start; align-items: flex-start; }
.msg.me { align-self: flex-end; align-items: flex-end; }

.bubble {
  margin: 0;
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.her .bubble {
  background: var(--surface);
  border: 1px solid var(--line);
}

.me .bubble {
  background: var(--accent);
  color: var(--on-accent);
}

.msg time {
  align-self: flex-end;
  margin: -2px 6px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Voice note */

.voice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
}

.play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  /* on her bubble in dark the fill alone is under 3:1; the ring carries the edge */
  border: 1px solid var(--accent-ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.play svg { width: 18px; height: 18px; margin-left: 2px; }

/* A note still being spoken: the button waits */
.play:disabled { border-color: transparent; background: var(--skeleton); color: var(--muted); }

/* The custom play button drives it (glue.js) */
.voice audio { display: none; }

.wave {
  flex-shrink: 1;
  width: 112px;
  min-width: 48px;
  height: 24px;
  color: var(--muted);
}

.dur {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Pictures: 3:4 slot that fills in when the image arrives */

.pic {
  position: relative;
  width: 13rem;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--skeleton);
}

.pic.is-ready { background: var(--photo); }

/* Shimmer tells the user a photo is still on its way */
.pic.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, var(--shine) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: shimmer 1.8s ease-in-out infinite;
}

.pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

/* A picture she did not send on her own: the button that asks for it */

.pic-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.pic-ask .ic { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted); }
.pic-ask .price { margin-left: 4px; color: var(--muted); font-weight: 400; }

/* The tap is on its way */
.pic-ask:disabled { color: var(--muted); }

/* System card: app voice, not hers */

.note {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin-top: 6px;
  padding: 0 4px 0 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.note p {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
}

.note-act {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 10px;
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* The offer cards stay hidden until glue.js reveals them; flex would otherwise win */
.note[hidden] { display: none; }

.note .ic { flex-shrink: 0; width: 24px; height: 24px; }

/* the font shorthand also resets the weight, so .note-act's 600 is set again */
button.note-act { border: 0; background: none; font: inherit; font-weight: 600; }

/* Composer */

.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter)));
  padding-bottom: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.field {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.field::placeholder { color: var(--muted); opacity: 1; }

.field:focus-visible,
.icon-btn:focus-visible,
.play:focus-visible,
.pic-ask:focus-visible,
.note-act:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.icon-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.icon-btn svg { width: 22px; height: 22px; }

.send {
  background: var(--accent);
  color: var(--on-accent);
}

/* Press feedback */

button,
a {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.icon-btn,
.play,
.pic-ask,
.note-act {
  transition: transform 160ms var(--ease);
}

.icon-btn:active,
.play:active,
.pic-ask:active,
.note-act:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .mic:hover { color: var(--ink); }
  .note-act:hover { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .pic.is-loading::after { animation: none; transform: none; opacity: 0; }
  .icon-btn,
  .play,
  .pic-ask,
  .note-act { transition: none; }
}

/* Onboarding: sign-up, the pick, the questions */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: content-box;
  height: 56px;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.mark {
  padding-bottom: 2px;
  font-family: var(--serif);
  font-size: 29px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
}

.step {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.body {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
}

/* forms keep the body's column and gap */
.body form {
  display: flex;
  flex-direction: column;
  gap: inherit;
  margin: 0;
}

.grow,
.sp { flex: 1; }

.body.in { gap: 0; padding: 28px var(--gutter) 16px; }
.in .lab { margin: 0 0 8px; }
.in .btn.o { margin-top: 12px; }
.in:not(:has(.grow)) .foot { margin-top: auto; }

.body.pick { gap: 12px; padding: 24px var(--gutter) 16px; }
.pick .h1 { margin: 0 0 6px; }
.pick .lab { margin: 10px 0 -4px; }

.body.qs { gap: 14px; padding: 20px var(--gutter) 8px; }

.p {
  margin: 10px 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.lab {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.fieldx {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.fieldx input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.cc {
  padding-right: 12px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  line-height: 24px;
}

.btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn.o {
  border-color: var(--field-line);
  background: var(--surface);
  color: var(--ink);
}

/* the provider buttons keep their own brand colours in both themes */
.ssos { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.btn.sso { min-height: 48px; text-decoration: none; }
.btn.sso svg { flex: none; width: 20px; height: 20px; }
.btn.sso.goo { border-color: #747775; background: #fff; color: #1f1f1f; }
.btn.sso.fb { border-color: #1877f2; background: #1877f2; color: #fff; }

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.rule {
  flex: none;
  width: 100%;
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.otp {
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .5em;
  text-align: center;
  /* evens out the spacing after the last digit */
  text-indent: .5em;
}

.err {
  margin: 8px 0 0;
  color: var(--accent-ink);
  font-size: 14px;
}

.foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin: 4px 0 -10px;
  color: var(--muted);
  font-size: 13px;
}

.foot a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The pick: two rows of two cards, then one row that every likes line shares, so it is as
   tall as the longest and nothing below it moves when the pick changes */

.cards {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr auto;
  gap: 12px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.card:has(:checked) {
  padding: 11px;
  border: 2px solid var(--ink);
}

.por {
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-s);
  background: var(--skeleton);
  object-fit: cover;
  object-position: 50% 20%;
}

.txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.chk {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
}

.card:has(:checked) .chk { display: flex; }

.chk svg { display: block; width: 16px; height: 16px; }

.ln {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

.lk {
  grid-area: 3 / 1 / 4 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  visibility: hidden;
}

.card:has(:checked) + .lk { visibility: visible; }

.him {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 15px;
}

.ghost {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  background: var(--skeleton);
}

.soon {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

/* The questions */

.qb {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
}

.q {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.chip {
  display: flex;
  flex: none;
  align-items: center;
  height: 44px;
  cursor: pointer;
}

.chip span {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}

.chip:has(:checked) span,
.opt:has(:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.nw { white-space: nowrap; }

.dob {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 8px;
  margin-top: 4px;
}

.dob input {
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: .06em;
  text-align: center;
}

.dob input::placeholder { color: var(--muted); opacity: 1; }

.qnote {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.go {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}

.skip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.only {
  margin: 0;
  padding: 28px var(--gutter);
  font-size: 16px;
}

.card:has(:focus-visible),
.pack:has(:focus-visible),
.swl:has(:focus-visible) .sw,
.chip:has(:focus-visible) span,
.opt:has(:focus-visible),
.fieldx:focus-within,
.otp:focus-visible,
.dob input:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* Memory view: Yang dia ingat */

.top.sub {
  justify-content: flex-start;
  gap: 2px;
  padding-left: 4px;
}

.back {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
}

.back .ic { display: block; width: 24px; height: 24px; }

.tt {
  margin: 0;
  padding-bottom: 2px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
}

.body.mem { gap: 10px; padding: 14px var(--gutter) 16px; }

.lede {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.paper {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sec {
  display: flex;
  flex-direction: column;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--line);
}

.sec:last-child { border-bottom: 0; }

.sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.sh::-webkit-details-marker { display: none; }

/* the summary stays 40px tall; its hit area is 44px */
.fix .sh { position: relative; }
.fix .sh::after { content: ""; position: absolute; inset: -2px 0; }

.sh .act {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -2px -10px -2px 0;
  padding: 0 10px;
  color: var(--accent-ink);
}

.sec p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.sec ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.sec h4 { margin: 6px 0 2px; font-size: 15px; }
.sec .dim,
.li .dim { color: var(--muted); font-size: 14px; }

.fix form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
}

.fix .btn { height: 44px; }

.md {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.acts {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter))) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* a shared non-zero basis keeps the link and the details equal halves */
.acts > * { flex: 1 1 40%; min-width: 0; }
.acts .btn { height: 48px; padding: 0 10px; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none; }
.btn.x { color: var(--accent-ink); }

.wipe summary { list-style: none; }
.wipe summary::-webkit-details-marker { display: none; }
.wipe[open] { flex-basis: 100%; }

.wipe form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.wipe p { margin: 0; font-size: 15px; }

/* Galeri and Jurnal */

.dh {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.dh span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.jurnal .dh {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.grid {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.tile {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--skeleton);
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.tile.on {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.open {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 4px;
}

.big {
  display: block;
  width: 100%;
  height: 262px;
  border-radius: var(--radius-s);
  object-fit: cover;
  object-position: 50% 7%;
  background: var(--skeleton);
}

.cap {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.meta {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* the mockup's .open .acts, renamed: .acts is the pages' bottom bar */
.sbtns {
  display: flex;
  gap: 8px;
}

.sbtn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.sbtn .ic {
  width: 20px;
  height: 20px;
}

.jl {
  align-self: flex-end;
  max-width: 280px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 18px 18px 6px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.late {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.late span {
  color: var(--muted);
  font-size: 13px;
}

.thumbs {
  display: flex;
  flex: none;
  gap: 8px;
  overflow-x: auto;
}

.th {
  display: block;
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-s);
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--skeleton);
}

/* Pengaturan */

.body.set { gap: 0; padding: 6px var(--gutter) 14px; }

.h2 {
  margin: 14px 0 6px 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.g {
  display: flex;
  flex-direction: column;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.g + .g { margin-top: 10px; }
.g > * + * { border-top: 1px solid var(--line); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 5px 0;
  color: inherit;
  font-size: 15px;
  line-height: 1.3;
  list-style: none;
  text-decoration: none;
  cursor: pointer;
}

.row::-webkit-details-marker { display: none; }

.lead { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lead small { color: var(--muted); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }

.val {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cv { width: 18px; height: 18px; color: var(--muted); }

.swl { position: relative; flex: none; }

/* the switch keeps its 26px face; the label's hit area is 44px */
.swl::after { content: ""; position: absolute; inset: -9px 0; }

.sw {
  display: block;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--radius);
  background: var(--field-line);
}

.sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
}

input:checked + .sw { background: var(--ink); }
input:checked + .sw::after { left: 21px; }

/* Night mode: a clay disc on a paper track; at night it has slid under the ink at the right end
   and a crescent is left. The picture follows --night, so it is right at first paint. */

/* a 30px face inside a 44px hit area */
.tg {
  position: relative;
  flex: none;
  width: 56px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: transform 160ms var(--ease);
}

.tg::after { content: ""; position: absolute; inset: -8px -4px; }
.tg:active { transform: scale(.97); }

/* what moves; lifted out of the page's snapshot while the ink spreads, so it stays live on top */
.tg-orb { position: absolute; inset: 0; display: block; pointer-events: none; }

/* the anchor of the wet edge (below): nothing to see, it only marks the right end of the track */
.tg-wet { position: absolute; top: 13px; right: 13px; width: 2px; height: 2px; pointer-events: none; }

/* The disc slides 26px to the right. The mask is a hole that stays where it is on the track
   (it moves left on the disc by the same 26px on the same curve), so the disc slides under it
   and whatever sky is behind shows through: a crescent over any ground, mid-change included. */
.tg-sun {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(calc(var(--night) * 26px));
  -webkit-mask-image: radial-gradient(circle, transparent 9.25px, #000 9.75px);
  mask-image: radial-gradient(circle, transparent 9.25px, #000 9.75px);
  -webkit-mask-size: 100px 100px;
  mask-size: 100px 100px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: calc(-6.5px - var(--night) * 26px) -44px;
  mask-position: calc(-6.5px - var(--night) * 26px) -44px;
  transition: transform 480ms var(--ease-spring), -webkit-mask-position 480ms var(--ease-spring), mask-position 480ms var(--ease-spring);
}

/* one star, where the disc was; it comes out after the disc has left and goes before it returns */
.tg-star {
  position: absolute;
  top: 7px;
  left: 9px;
  width: 9px;
  height: 9px;
  fill: var(--ink);
  opacity: var(--night);
  transform: scale(calc(.4 + .6 * var(--night))) rotate(calc((1 - var(--night)) * -45deg));
  transition: opacity calc(120ms + var(--night) * 120ms) var(--ease) calc(var(--night) * 220ms), transform calc(120ms + var(--night) * 120ms) var(--ease-spring) calc(var(--night) * 220ms);
}

/* the line under the label: one of three states, and the way back to the phone's setting */
.tg-line { display: flex; align-items: baseline; gap: 10px; }

.tg-on,
.tg-off,
:root[data-theme] .tg-sys,
:root:not([data-theme]) .tg-auto { display: none; }

:root[data-theme="dark"] .tg-on,
:root[data-theme="light"] .tg-off { display: inline; }

.tg-auto {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tg-auto::after { content: ""; position: absolute; inset: -14px -8px; }

/* Night mode, the page: the ink spreads from the switch, or is drawn back into it (View
   Transitions; a browser without them, and reduced motion, get the plain switch from glue.js) */

/* glue.js sets data-tg for the length of one change, and from the switch: --tg-x, --tg-y (where
   the ink starts), --tg-r (how far it has to reach), --tg-s (the same reach for the wet edge) and
   --tg-ink (the night ground, which the day's own tokens no longer hold on the way back) */
:root[data-tg] .tg-orb { view-transition-name: tg-orb; }
:root[data-tg] .tg-wet { view-transition-name: tg-wet; }

/* taps go through to the page while the ink moves */
:root[data-tg]::view-transition { pointer-events: none; }

::view-transition-group(tg-orb),
::view-transition-group(tg-wet) { animation: none; }

::view-transition-old(tg-orb),
::view-transition-old(tg-wet) { display: none; }

::view-transition-new(tg-orb),
::view-transition-new(tg-wet) { animation: none; mix-blend-mode: normal; }

:root[data-tg]::view-transition-old(root),
:root[data-tg]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* to night: the new page grows from the switch over the old one */
:root[data-tg="malam"]::view-transition-new(root) { animation: tg-spread 450ms var(--ease-ink) both; }

/* to day: the old page stays on top and shrinks back into the switch */
:root[data-tg="siang"]::view-transition-old(root) { z-index: 1; animation: tg-gather 450ms var(--ease-ink) both; }

/* The wet edge: a ring of thinning ink drawn once, 200px across with its darkest line at 60px, and
   scaled so that the line rides the edge of the circle above; it starts a little inside the
   circle, which hides the seam between the two. Its anchor in the page is the empty 2px box at
   the right end of the track; only this layer paints. */
::view-transition-new(tg-wet) {
  top: -99px;
  left: -99px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle closest-side, transparent 55%, color-mix(in srgb, var(--tg-ink) 80%, transparent) 60%, color-mix(in srgb, var(--tg-ink) 60%, transparent) 64%, color-mix(in srgb, var(--tg-ink) 42%, transparent) 69%, color-mix(in srgb, var(--tg-ink) 26%, transparent) 75%, color-mix(in srgb, var(--tg-ink) 12%, transparent) 83%, color-mix(in srgb, var(--tg-ink) 4%, transparent) 91%, transparent 100%);
}

:root[data-tg="malam"]::view-transition-new(tg-wet) { animation: tg-wet-out 450ms var(--ease-ink) both; }
:root[data-tg="siang"]::view-transition-new(tg-wet) { animation: tg-wet-in 450ms var(--ease-ink) both; }

@keyframes tg-spread {
  from { clip-path: circle(0 at var(--tg-x) var(--tg-y)); }
  to { clip-path: circle(var(--tg-r) at var(--tg-x) var(--tg-y)); }
}

@keyframes tg-gather {
  from { clip-path: circle(var(--tg-r) at var(--tg-x) var(--tg-y)); }
  to { clip-path: circle(0 at var(--tg-x) var(--tg-y)); }
}

@keyframes tg-wet-out {
  from { transform: scale(0); }
  to { transform: scale(var(--tg-s)); }
}

@keyframes tg-wet-in {
  from { transform: scale(var(--tg-s)); }
  to { transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tg,
  .tg-sun,
  .tg-star { transition: none; }
}

.sel {
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.g form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 4px 0 12px;
}

.g form.row { flex-direction: row; padding: 5px 0; }
.g .row form { padding: 5px 0; }
.g .btn { height: 44px; }
.row .btn { position: relative; height: 36px; padding: 0 12px; font-size: 14px; }
/* a 36px face inside a 44px hit area */
.row .btn::after { content: ""; position: absolute; inset: -5px -1px; }
.g .fieldx { height: 44px; font-size: 15px; }
.dz .t { color: var(--accent-ink); font-weight: 400; }

.rowb {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.sfoot { margin-top: auto; padding-top: 4px; }

.links { display: flex; gap: 4px; margin-left: -8px; }

.links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--accent-ink);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.co { margin: 0; color: var(--muted); font-size: 12px; }

/* Kopi */

.body.kop { gap: 10px; padding: 18px var(--gutter) 16px; }

.meter { display: flex; flex-direction: column; gap: 8px; }
.mrow { display: flex; align-items: center; gap: 10px; }
.mrow .coin { width: 30px; height: 30px; }

.bigk {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.left { margin: 0; color: var(--muted); font-size: 14px; }
.kh2 { margin: 14px 0 0; font-size: 14px; font-weight: 600; }

.list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.li:last-child { border-bottom: 0; }
.li small { color: var(--muted); font-size: 13px; }
.li span + span { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }

.packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.pack:has(:checked) { border: 2px solid var(--ink); padding: 11px 5px; }
.pack b { font-size: 18px; font-weight: 600; }
.pack span { color: var(--muted); font-size: 13px; }
.pay { margin: -2px 0 0; color: var(--muted); font-size: 14px; }
.kop form { gap: 10px; }

/* Privasi */

.body.pv { gap: 0; padding: 4px var(--gutter) 20px; }
.pv .sec { gap: 6px; padding: 14px 0 16px; }
.pv .h2 { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.3; }
.pp { margin: 0; font-size: 15px; line-height: 1.5; }
/* .pv beats .sec p, which would undo the size */
.pv .co { display: flex; align-items: center; gap: 4px; padding-top: 8px; font-size: 13px; }

/* Keyboard focus for the controls the two lists above leave out; last in the file, so it
   also shows on the open gallery tile */

.btn:focus-visible,
.skip:focus-visible,
.back:focus-visible,
.menu > summary:focus-visible,
.item:focus-visible,
.row:focus-visible,
.rowb:focus-visible,
.sbtn:focus-visible,
.tile:focus-visible,
.sel:focus-visible,
.md:focus-visible,
.sh:focus-visible,
.act:focus-visible,
.foot a:focus-visible,
.links a:focus-visible,
.tg:focus-visible,
.tg-auto:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}