/* Parkir Pikiran. Calm, warm, low-noise.
   - Warm off-white + near-black: one strong accent, few competing colours (low arousal).
     Colour effects depend on context (Elliot & Maier 2014); red is linked with alarm/avoidance
     (Mehta & Zhu 2009), so there is no red. Amber marks only what is due or overdue, always with words.
   - Categories get soft pastel tints (from the Brain Vault example) so the app feels less rigid;
     icon + label always carry the meaning, and every tint keeps its text at 4.5:1 or better.
   - Selected vs unselected differ in brightness (dark fill vs light) and get a ✓, never hue alone.
   - Text is at least 4.5:1 contrast; no pale grey labels.
   - System serif for headings: no outside font requests. */
:root {
  --bg: #FAF6EF; --surface: #FFFFFF; --surface-2: #F4EFE6;
  --ink: #1F1D1A; --muted: #6B665E; --line: #E6E0D4; --line-strong: #8F897E;
  --primary: #1F1D1A; --primary-hover: #3A3631; --on-primary: #FFFFFF;
  --warn-bg: #FDF1DC; --warn-ink: #7A3E00; --warn-line: #D9A55B;
  --danger: #A33A0B; --focus: #0B6BCB;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Noto Serif", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151412; --surface: #1E1C19; --surface-2: #282520;
    --ink: #F2EEE6; --muted: #B5AEA3; --line: #3A362F; --line-strong: #7D766B;
    --primary: #F2EEE6; --primary-hover: #FFFFFF; --on-primary: #1A1815;
    --warn-bg: rgba(224, 164, 90, .16); --warn-ink: #F6C98A; --warn-line: rgba(224, 164, 90, .5);
    --danger: #F08A5D; --focus: #7CC0FF;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* Monochrome line icons, drawn in the text colour (see ICONS in app.js) */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emo { filter: grayscale(1); } /* any emoji without a drawing: shown in grey */
.tab-ico { display: inline-flex; }
body { margin: 0; font: 16px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
[hidden] { display: none !important; }
.serif { font-family: var(--serif); }
.wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
.meta { margin: 0; color: var(--muted); font-size: .9rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

button { font: inherit; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; }
button:hover { background: var(--surface-2); }
button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
button.primary:hover { background: var(--primary-hover); }
button.danger { border-color: var(--danger); color: var(--danger); }
button.small { padding: 4px 12px; font-size: .88rem; }
button.linkish { border: none; background: none; padding: 4px 0; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 8px 12px; }
textarea { resize: vertical; }
::placeholder { color: var(--muted); opacity: 1; }

/* Header */
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 760px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; }
.logo { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-family: var(--serif); font-size: 17px; font-weight: 700; }
.brand-name { font-size: 1.2rem; font-weight: 600; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.lang { display: flex; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 2px; background: var(--surface); }
.lang button { border: none; padding: 3px 12px; font-size: .88rem; color: var(--muted); background: transparent; }
/* Active language: the same calm "Parkir grey", bold, with ✓ */
.lang button[aria-pressed="true"] { background: var(--park-bg); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--park-line); }
.lang button[aria-pressed="true"]::before { content: "✓ "; }

/* Hero */
.hero { margin: 20px 0 16px; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; margin: 0; font-weight: 600; }
.hero .quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted); margin: 4px 0 10px; }

/* Cards and panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; }
.onboard { margin-bottom: 14px; background: #EEF4EA; border-color: #D5E3CC; }
@media (prefers-color-scheme: dark) { .onboard { background: rgba(155, 187, 149, .10); border-color: rgba(155, 187, 149, .3); } }
.onboard h2 { font-size: 1rem; margin: 0 0 8px; }
.onboard ol { margin: 0 0 12px; padding-left: 1.3em; }
.onboard li { margin: 4px 0; }

/* Capture ("dump here") */
.capture { box-shadow: 0 8px 32px rgba(0, 0, 0, .04); }
.cap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cap-label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.cap-hint { font-size: .8rem; color: var(--muted); }
.cap-input { width: 100%; font-size: 1.05rem; line-height: 1.5; border-radius: 14px; padding: 12px 14px; background: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.capture .chips { margin: 12px 0; }
.chip { border-color: var(--line); color: var(--muted); padding: 6px 14px; font-size: .92rem; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); font-weight: 600; }
.chip.warn[aria-pressed="true"] { background: var(--warn-ink); color: var(--warn-bg); border-color: var(--warn-ink); }
.cap-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.cap-field { display: grid; gap: 2px; font-size: .85rem; color: var(--muted); flex: 1 1 150px; }
.cap-field input { border-radius: 999px; }
.cap-row .check { flex: 1 1 150px; align-self: center; }
.cap-row button[type="submit"] { flex: 0 0 auto; padding: 10px 24px; }
/* "Parkir": light grey, calm; a thin edge keeps it easy to find */
:root { --park-bg: #E7E3DB; --park-hover: #DCD7CD; --park-line: #B5AEA3; }
@media (prefers-color-scheme: dark) {
  :root { --park-bg: rgba(255, 255, 255, .14); --park-hover: rgba(255, 255, 255, .2); --park-line: rgba(255, 255, 255, .3); }
}
.park-btn { background: var(--park-bg); color: var(--ink); border: 1.5px solid var(--park-line); font-weight: 700; }
.park-btn:hover { background: var(--park-hover); }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.error { color: var(--danger); font-weight: 600; margin: 8px 0 0; }
.error:empty { display: none; }

/* Stats + focus */
/* Counts stacked on the left, focus timer beside them */
.stats-row { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 8px; }
.stats { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 0 0 auto; }
.stat { display: inline-block; background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 600; }
.focus { display: grid; gap: 4px; padding: 10px 14px; border-radius: 16px; }
.focus-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.focus-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.focus-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; min-width: 4.2ch; }
.focus.running { border: 2px solid var(--ink); }
.focus select { border-radius: 999px; padding: 4px 8px; font-size: .88rem; }
.focus .meta { font-size: .82rem; }
#focusSlot { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  /* Phone: no room beside, so counts sit on one wrapping line above the timer */
  .stats-row { flex-direction: column; align-items: stretch; }
  .stats { flex-direction: row; flex-wrap: wrap; align-items: center; }
  #focusSlot { width: 100%; }
}
.done-link { justify-self: start; }
.focus-what { width: 100%; border-radius: 999px; padding: 6px 12px; font-size: .92rem; }

/* Tabs: underline + bold + count for the selected one */
.tabs { display: flex; gap: 4px; margin: 20px 0 14px; border-bottom: 1px solid var(--line); }
.tabs button { border: none; border-radius: 0; background: none; padding: 8px 10px 10px; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.tabs .count { font-size: .78rem; border-radius: 999px; padding: 0 7px; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] .count { background: var(--primary); color: var(--on-primary); }
.tabs .short { display: none; }
.tabs .alert { font-size: .78rem; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 999px; padding: 0 7px; font-weight: 600; }

.toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
#search { flex: 1 1 auto; min-width: 0; border-radius: 999px; }
#vaultCat { flex: 0 0 auto; max-width: 45%; border-radius: 999px; padding: 8px 12px; }

/* Note cards */
.list { display: grid; gap: 10px; }
.card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--c); border-radius: 18px; padding: 14px 16px; }
.card.is-done { background: var(--surface-2); }
.card.is-done .text { text-decoration: line-through; color: var(--muted); }
.done-btn { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid var(--line-strong);
  color: var(--muted); font-weight: 700; display: grid; place-items: center; line-height: 1; }
.done-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.card-main { flex: 1; min-width: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.badge { display: inline-block; font-size: .8rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); }
.badge.warn, .badge.on { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); font-weight: 600; }
.badge.quiet { background: transparent; color: var(--muted); }
.text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
.card-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.empty { text-align: center; color: var(--muted); padding: 32px 16px; border: 1.5px dashed var(--line-strong); border-radius: 20px; }
.group-title { font-size: .95rem; margin: 18px 0 8px; }
.group-title:first-child { margin-top: 4px; }
.done-toggle { margin-top: 14px; }

/* Category pastels: soft tint (--pb) + same-hue text (--pt, at least 4.5:1 on its tint) + accent (--c).
   Decoration only: the icon + label carry the meaning, and "selected" is always the dark fill + ✓. */
/* In the order the categories appear, the tints run around the colour wheel:
   violet > rose > peach > yellow > green > blue. */
.cat-idea    { --c: #B9A2D9; --pb: #EDE3FF; --pt: #5E438F; } /* violet */
.cat-work    { --c: #E2A0AF; --pb: #FFE0E6; --pt: #8A3A4E; } /* rose */
.cat-family  { --c: #E8B07F; --pb: #FFE4CC; --pt: #7E4A1F; } /* peach */
.cat-friend  { --c: #D6BE6A; --pb: #FFF0B8; --pt: #6B581A; } /* yellow */
.cat-finance { --c: #9BBB95; --pb: #DDE8D6; --pt: #4A5E45; } /* green */
.cat-other   { --c: #8AA1B5; --pb: #DDE7F0; --pt: #3F5366; } /* blue */
/* Dark mode: the same pastels as see-through tints, so they blend into the dark background */
@media (prefers-color-scheme: dark) {
  .cat-idea    { --c: rgba(185, 162, 217, .5); --pb: rgba(185, 162, 217, .16); --pt: #DCCFF7; }
  .cat-work    { --c: rgba(226, 160, 175, .5); --pb: rgba(226, 160, 175, .16); --pt: #F5C9D3; }
  .cat-family  { --c: rgba(232, 176, 127, .5); --pb: rgba(232, 176, 127, .16); --pt: #F5CFAE; }
  .cat-friend  { --c: rgba(214, 190, 106, .5); --pb: rgba(214, 190, 106, .16); --pt: #F1DF9E; }
  .cat-finance { --c: rgba(155, 187, 149, .5); --pb: rgba(155, 187, 149, .16); --pt: #CDE0C6; }
  .cat-other   { --c: rgba(138, 161, 181, .5); --pb: rgba(138, 161, 181, .16); --pt: #C9D8E5; }
}
.badge.cat { background: var(--pb); color: var(--pt); border-color: transparent; font-weight: 600; }
.chip.cat:not([aria-pressed="true"]) { background: var(--pb); color: var(--pt); border-color: var(--c); }
.chip.cat:not([aria-pressed="true"]):hover { filter: brightness(.97); }

/* Up next */
.next { margin-bottom: 14px; border-left: 5px solid var(--c); }
.next h2 { font-size: .9rem; margin: 0 0 6px; color: var(--muted); }
.next-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 4px 0 2px; overflow-wrap: anywhere; }
.up-chips { margin-bottom: 14px; }

/* Calendar */
.cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-head h2 { margin: 0; flex: 1; font-family: var(--serif); font-size: 1.3rem; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wd { text-align: center; font-weight: 600; font-size: .8rem; color: var(--muted); padding-bottom: 2px; }
.day { min-height: 88px; border-radius: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left;
  padding: 5px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.day .num { font-weight: 700; }
.day.today { border: 3px solid var(--ink); background: var(--warn-bg); }
.today-tag { font-size: .7rem; font-weight: 700; }
.day[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.day[aria-pressed="true"].today { outline: 2px solid var(--primary); outline-offset: 2px; }
.day .items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day .count { display: none; font-size: .78rem; font-weight: 700; }
.mini-item { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--pb);
  color: var(--pt); border-radius: 6px; padding: 0 5px; font-weight: 600; }
.day[aria-pressed="true"] .mini-item { background: transparent; color: var(--on-primary); }
.more { font-size: .72rem; }
.day-list { margin-top: 16px; }
.undated-note { margin-top: 12px; }
.day-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.day-head h2 { font-size: 1.05rem; margin: 0; }

/* Rings, toast, update */
.ring { position: sticky; top: 56px; z-index: 15; background: var(--warn-bg); color: var(--warn-ink); border: 2px solid var(--warn-line);
  border-radius: 16px; padding: 12px 16px; margin: 12px 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ring ul { margin: 0; padding: 0; list-style: none; font-weight: 700; }
.update { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; padding: 10px 14px; margin-top: 12px; font-weight: 600; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 40; max-width: calc(100% - 32px);
  display: flex; gap: 12px; align-items: center; background: var(--primary); color: var(--on-primary);
  border-radius: 999px; padding: 8px 8px 8px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.toast button { background: var(--on-primary); color: var(--primary); border-color: var(--on-primary); padding: 4px 14px; font-weight: 700; }
.toast.no-action { padding-right: 18px; }

/* Small window */
body.mini-page { background: var(--bg); }
.mini { padding: 10px; display: grid; gap: 10px; font-size: .95rem; }
.mini .mini-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-actions { display: flex; gap: 6px; align-items: center; }
.mini .panel { padding: 10px 12px; border-radius: 16px; }
.mini .ring { position: static; margin: 0; padding: 8px 10px; }
.mini .status { margin: 0; font-weight: 600; }
.mini .status:empty { display: none; }
.mini .cap-row select { flex: 1 1 120px; border-radius: 999px; }
.mini .next-title { font-size: 1.1rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.lrow { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.lrow:first-child { border-top: none; }
.lrow .tm { font-variant-numeric: tabular-nums; font-weight: 700; }
.lrow .nm { overflow-wrap: anywhere; }

/* Editor */
dialog { border: none; border-radius: 20px; padding: 0; max-width: 560px; width: calc(100% - 32px); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .5); }
form.ed { padding: 18px; display: grid; gap: 12px; }
form.ed h2 { margin: 0; font-family: var(--serif); }
label.f { display: grid; gap: 4px; font-weight: 600; }
.ed .row { display: flex; gap: 12px; flex-wrap: wrap; }
.ed .row > label { flex: 1 1 140px; }
.catpick { border: none; padding: 0; margin: 0; }
.catpick legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.catopts { display: flex; flex-wrap: wrap; gap: 6px; }
.catopts label { border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; color: var(--muted); }
.catopts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.catopts label:has(input:checked) { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
.catopts label:has(input:checked)::before { content: "✓ "; }
.catopts label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.hint { color: var(--muted); font-size: .85rem; margin: -6px 0 0; }
.ed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.push-right { margin-left: auto; }

/* Buy card: calm, one clear choice */
a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font: inherit; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); border-radius: 999px; padding: 10px 18px; font-weight: 600; min-height: 44px; }
a.btn:hover { background: var(--surface-2); }
a.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pay { padding: 20px; display: grid; gap: 10px; }
.pay h2 { margin: 0; font-size: 1.5rem; }
.pay-price { margin: 0; font-size: 1.2rem; font-weight: 700; }
.pay-steps { margin: 0; padding-left: 1.3em; }
.pay-steps li { margin: 4px 0; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.pay-privacy { font-size: .82rem; }
#paywall { max-width: 520px; }

footer { margin-top: 40px; color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); padding-top: 14px; }
footer p { margin: 0 0 8px; }
#backupLine.warn { color: var(--warn-ink); font-weight: 600; }
.backup { display: flex; gap: 8px; flex-wrap: wrap; }
footer .copy { margin-top: 16px; font-size: .82rem; }
footer .copy a { color: inherit; }

/* Touch screens: every tap target at least 44 px, big enough for a thumb */
.chip { min-height: 38px; }
@media (pointer: coarse) {
  .chip, button.small, .lang button, .tabs button, .cap-field input, select { min-height: 44px; }
  .done-btn { width: 44px; height: 44px; }
  .catopts label { min-height: 44px; display: inline-flex; align-items: center; }
}
.cal-head button { font-size: 1.1rem; font-weight: 700; }

/* Phone: tabs become a bottom bar; no floating-window button */
@media (max-width: 640px), (pointer: coarse) { .float-btn { display: none; } }
@media (max-width: 640px) {
  .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 30; gap: 0; background: var(--surface);
    border-top: 1px solid var(--line); border-bottom: none; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .tabs button { flex: 1; flex-direction: column; gap: 0; font-size: .78rem; padding: 6px 2px; border-bottom: none; border-radius: 12px; margin: 0; }
  .tabs button[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
  .tabs .long { display: none; }
  .tabs .short { display: inline; }
  .tabs .count { display: none; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .day { min-height: 54px; padding: 4px; font-size: .85rem; }
  .day .items { display: none; }
  .day .count { display: block; }
  .today-tag { display: none; } /* 📍 before the number + thick border still mark today */
  .card { padding: 12px; gap: 10px; }
}