/* ============================================================
   KodKlean Capture — Design tokens, base & layout
   Brand: กะเพราโคตรคลีน (Holy Basil · Super Clean)
   Palette: basil green on warm neutral. oklch throughout.
   ============================================================ */

:root {
  /* --- Color: warm neutral surfaces --- */
  --bg:            oklch(0.984 0.006 95);
  --surface:       oklch(0.998 0.003 95);
  --surface-2:     oklch(0.965 0.008 100);
  --surface-sunk:  oklch(0.945 0.010 105);

  /* --- Ink --- */
  --ink:           oklch(0.24 0.012 150);
  --ink-soft:      oklch(0.44 0.012 150);
  --ink-faint:     oklch(0.60 0.010 150);
  --ink-ghost:     oklch(0.74 0.008 150);

  /* --- Basil green (primary) --- */
  --brand:         oklch(0.56 0.118 150);
  --brand-deep:    oklch(0.46 0.110 150);
  --brand-bright:  oklch(0.66 0.130 150);
  --brand-tint:    oklch(0.95 0.030 150);
  --brand-ink:     oklch(0.34 0.090 150);

  /* --- Status accents (shared chroma ~0.13) --- */
  --ok:            oklch(0.58 0.120 150);   /* DONE */
  --review:        oklch(0.72 0.130 78);    /* NEED_REVIEW (amber) */
  --fail:          oklch(0.58 0.155 27);    /* FAILED (red) */
  --dup:           oklch(0.60 0.090 285);   /* DUPLICATE (violet) */
  --pending:       oklch(0.66 0.020 240);   /* PENDING / PROCESSING */

  --review-tint:   oklch(0.96 0.040 78);
  --fail-tint:     oklch(0.96 0.040 27);
  --dup-tint:      oklch(0.96 0.030 285);
  --pending-tint:  oklch(0.95 0.008 240);

  /* --- Lines & shadow --- */
  --line:          oklch(0.91 0.006 120);
  --line-soft:     oklch(0.94 0.005 120);
  --shadow-sm: 0 1px 2px oklch(0.3 0.02 150 / 0.06), 0 1px 3px oklch(0.3 0.02 150 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.3 0.02 150 / 0.08), 0 2px 6px oklch(0.3 0.02 150 / 0.05);
  --shadow-lg: 0 12px 34px oklch(0.3 0.02 150 / 0.14), 0 4px 12px oklch(0.3 0.02 150 / 0.08);
  --shadow-brand: 0 8px 22px oklch(0.56 0.118 150 / 0.30);

  /* --- Geometry --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- Type --- */
  --font: "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  --font-my: "Noto Sans Myanmar", "Noto Sans Thai", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  /* --- Layout --- */
  --nav-h: 70px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --maxw: 460px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-tint); }

/* Myanmar text helper — slightly larger line height for the script */
.my, [lang="my"] {
  font-family: var(--font-my);
  line-height: 1.62;
}

/* ============================================================
   App frame (mobile-first, centered on large screens)
   ============================================================ */
#app {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  body { background: var(--surface-sunk); }
  #app {
    box-shadow: var(--shadow-lg);
    min-height: 100dvh;
  }
}

/* ============================================================
   Top app bar
   ============================================================ */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: calc(var(--safe-top) + 14px) 18px 14px;
  background: oklch(0.984 0.006 95 / 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}
.appbar__title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.appbar__sub { font-size: 12.5px; color: var(--ink-faint); font-weight: 500; }
.appbar__brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-bright), var(--brand-deep));
  color: white; box-shadow: var(--shadow-brand);
}
.appbar__brand-mark svg { width: 22px; height: 22px; }
.appbar__spacer { flex: 1; }
.appbar__action {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  position: relative;
}
.appbar__action:active { transform: scale(0.94); }
.appbar__back {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  margin-right: 2px;
}
.appbar__back:active { transform: scale(0.94); }
.appbar__back svg { width: 22px; height: 22px; }

/* ============================================================
   Page scroll region
   ============================================================ */
.page {
  flex: 1;
  padding: 18px 18px calc(var(--nav-h) + var(--safe-bot) + 28px);
  display: none;
  animation: page-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.page.is-active { display: block; }
/* Entrance animates transform only — never holds content invisible, so a
   frozen animation clock (headless capture, bg tab) can't hide the page. */
@keyframes page-in {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-ghost);
  margin: 24px 2px 12px;
}
.section-label:first-child { margin-top: 4px; }

/* ============================================================
   Bottom navigation
   ============================================================ */
.bottomnav {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw);
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 8px calc(var(--safe-bot) + 8px);
  background: oklch(0.998 0.003 95 / 0.9);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--line);
}
.navbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 5px; border-radius: 14px;
  color: var(--ink-ghost); font-size: 10.5px; font-weight: 600;
  transition: color 0.18s, background 0.18s;
  position: relative;
}
.navbtn svg { width: 23px; height: 23px; transition: transform 0.2s; }
.navbtn.is-active { color: var(--brand-deep); }
.navbtn.is-active svg { transform: translateY(-1px); }
.navbtn:active svg { transform: scale(0.88); }
.navbtn__badge {
  position: absolute; top: 2px; left: 50%; margin-left: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--fail); color: white;
  font-size: 10px; font-weight: 800; line-height: 17px;
  text-align: center;
  border: 2px solid var(--surface);
  display: none;
}
.navbtn__badge.show { display: block; }

/* The central capture button pops out */
.navbtn--cta { transform: translateY(-2px); }
.navbtn--cta .navbtn__ring {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-bright), var(--brand-deep));
  color: white; box-shadow: var(--shadow-brand);
  margin-bottom: 2px;
  transition: transform 0.16s;
}
.navbtn--cta .navbtn__ring svg { width: 26px; height: 26px; }
.navbtn--cta:active .navbtn__ring { transform: scale(0.9); }

/* ============================================================
   Utility
   ============================================================ */
.muted { color: var(--ink-faint); }
.tnum  { font-variant-numeric: tabular-nums; }
.mono  { font-family: var(--font-mono); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-18 { gap: 18px; }
.grow { flex: 1; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}