/* ============================================================
   KitchiKame app — mobile shell and shared components.
   The design shows a 393x852 phone mockup; here the app IS the
   phone, so the frame, status bar and home indicator are dropped
   and the OS provides them. On wide screens the app centres in a
   phone-width column so it stays legible on desktop.
   ============================================================ */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--khadi);
  color: var(--ink);
  font-family: var(--in);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle, var(--dots) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  overscroll-behavior-y: none;
}

a { color: var(--jade); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--moss); color: var(--jade-ink); }

@keyframes kkin  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kkup  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kkfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kkpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Shell ---------- */

.app {
  position: relative;
  width: 100%; max-width: 460px; margin: 0 auto;
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--khadi);
}
@media (min-width: 560px) {
  body { background-color: #E8E4DA; }
  :root[data-theme="dark"] body { background-color: #0B0C0E; }
  .app {
    max-width: 420px; min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--steam), 0 40px 90px -50px rgba(26,27,30,.5);
  }
}

.screen {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  animation: kkin .2s ease both;
}
.screen--noTabs { padding-bottom: env(safe-area-inset-bottom, 0px); }

.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Headers ---------- */

.hero { padding: 14px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero__eyebrow { font-family: var(--mo); font-size: 10px; letter-spacing: .14em; color: var(--mut2); }
.hero__title {
  font-family: var(--gro); font-weight: 700; font-size: 31px; line-height: 1.12; letter-spacing: -.02em;
  margin: 4px 0 0;
}
.hero__title--sm { font-size: 26px; }

.navbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 6px; min-height: 46px;
}
.navbar__back { font-size: 22px; line-height: 1; color: var(--mut2); padding: 4px 8px; cursor: pointer; }
.navbar__title { font-family: var(--gro); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.navbar__sub { font-family: var(--mo); font-size: 9.5px; letter-spacing: .1em; color: var(--mut2); }
.navbar__x { font-size: 17px; color: var(--mut2); padding: 4px 8px; cursor: pointer; }

.eyebrow { font-family: var(--mo); font-size: 10px; letter-spacing: .14em; color: var(--mut2); }
.section-label { font-family: var(--mo); font-size: 9.5px; letter-spacing: .14em; color: var(--mut2); }

/* ---------- Shell-grid chip (today's scutes) ---------- */

.scutes {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--steam); flex: none;
}
.scutes__n { font-family: var(--mo); font-size: 10px; color: var(--mut); }

/* ---------- Meal cards ---------- */

.meals { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 0; }

.meal {
  display: flex; gap: 12px; padding: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--steam); border-radius: var(--r-lg);
  align-items: center; cursor: pointer;
}
.meal:active { transform: scale(.995); }
.meal--alert { border-color: var(--mirchi); background: var(--mirchi-a08); }
.meal--done { opacity: .62; }

.glyph {
  position: relative; width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; flex: none;
  background-image: radial-gradient(circle, rgba(26,27,30,.045) .7px, transparent .9px);
  background-size: 6px 6px;
}
.glyph--morn { background-color: var(--moss); }
.glyph--noon { background-color: var(--steam); }
.glyph--eve  { background-color: var(--genda-a16); }
.glyph--alert { background-color: rgba(217,72,43,.14); }
.glyph--sm { width: 44px; height: 44px; border-radius: 10px; }
.glyph--lg { width: 100%; height: 132px; border-radius: var(--r-lg); }

.meal__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meal__when { display: flex; align-items: baseline; gap: 6px; }
.meal__time { font-family: var(--mo); font-size: 11px; font-weight: 700; color: var(--ink); }
.meal__slot { font-family: var(--mo); font-size: 9px; letter-spacing: .14em; color: var(--mut2); }
.meal__dish { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.meal__state {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--jade);
}
.meal__state--wait { color: var(--mut); }
.meal__state--alert { color: var(--mirchi); }

/* ---------- Banners ---------- */

.banner {
  margin: 18px 24px 0; padding: 16px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 4px;
}
.banner--calm { background: var(--moss); border: 1px solid var(--moss-br); }
.banner--alert { background: var(--mirchi-a08); border: 1px solid var(--mirchi-a35); }
.banner__t {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--jade-ink);
}
.banner--alert .banner__t { color: var(--mirchi); }
.banner__b { font-size: 12px; color: var(--jade-sub); }
.banner--alert .banner__b { color: var(--mirchi-ink); }

.whisper { font-family: var(--mo); font-size: 11px; color: var(--mut2); text-align: center; margin-top: 16px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  background: var(--card); border: 1.5px solid var(--steam); color: var(--ink);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--jade); border-color: var(--jade); color: #FBFAF6; }
.btn--danger { background: var(--mirchi); border-color: var(--mirchi); color: #FBFAF6; }
.btn--ghost { background: none; border-color: transparent; color: var(--mut); font-weight: 500; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn--xs { height: 30px; padding: 0 13px; font-size: 12.5px; border-width: 1px; }
.btn--block { width: 100%; }
.btn--pill { border-radius: 999px; }

.btnrow { display: flex; gap: 10px; padding: 18px 24px 0; }
.btnrow > .btn { flex: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--steam);
  font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip.is-on { background: var(--jade); border-color: var(--jade); color: var(--khadi); font-weight: 600; }
.chip--sm { height: 26px; padding: 0 11px; font-size: 11.5px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--mo); font-size: 9px; letter-spacing: .08em;
  background: var(--khadi); border: 1px solid var(--steam); color: var(--mut);
}
.tag--jade { background: var(--moss); border-color: var(--moss-br); color: var(--jade); }
.tag--genda { background: var(--genda-a18); border-color: var(--genda); color: #8A5A12; }
.tag--mirchi { background: var(--mirchi-a08); border-color: var(--mirchi-a35); color: var(--mirchi); }
:root[data-theme="dark"] .tag--genda { color: var(--genda); }

/* ---------- Rows / lists ---------- */

.card {
  background: var(--card); border: 1px solid var(--steam); border-radius: var(--r-lg); padding: 14px;
}
.card--flush { padding: 0; overflow: hidden; }
.pad { padding: 0 24px; }
.pad-t { padding-top: 18px; }

.row { display: flex; align-items: center; gap: 10px; }
.row--top { align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.gap2{gap:2px}.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}
.gap12{gap:12px}.gap14{gap:14px}.gap16{gap:16px}.gap20{gap:20px}
.f1 { flex: 1; min-width: 0; }
.push { margin-left: auto; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--mut); }
.muted2 { color: var(--mut2); }
.mono { font-family: var(--mo); }
.center { text-align: center; }

.listrow {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--steam); width: 100%; text-align: left;
}
.listrow:last-child { border-bottom: 0; }
.listrow--btn { cursor: pointer; }
.listrow__name { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }
.listrow__meta { font-family: var(--mo); font-size: 10px; color: var(--mut2); }

.avatar {
  border-radius: 999px; background: var(--jade); color: var(--khadi);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--gro); font-weight: 700;
}
.avatar--24 { width: 24px; height: 24px; font-size: 10px; }
.avatar--28 { width: 28px; height: 28px; font-size: 11px; }
.avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.avatar--40 { width: 40px; height: 40px; font-size: 15px; }
.avatar--56 { width: 56px; height: 56px; font-size: 20px; }
.avatar--sand { background: var(--sand); color: var(--ink); }
.avatar--genda { background: var(--genda); color: var(--ink); }
.avatar--neel { background: var(--neel); }

.receipt { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.receipt__t { font-family: var(--mo); font-size: 10px; color: var(--mut2); width: 44px; flex: none; }
.receipt__b { font-size: 12px; color: var(--mut); flex: 1; }

.hr { height: 1px; background: var(--steam); margin: 16px 0; }

/* ---------- Tab bar ---------- */

.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 460px; z-index: 20;
  display: flex; border-top: 1px solid var(--steam); background: var(--card);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 560px) { .tabbar { max-width: 420px; } }

.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; color: var(--mut2); position: relative;
}
.tab svg { stroke: var(--mut2); }
.tab span { font-size: 11px; font-weight: 500; color: var(--mut2); }
.tab.is-on svg { stroke: var(--jade); }
.tab.is-on span { color: var(--jade); font-weight: 600; }
.tab__dot {
  position: absolute; top: -1px; right: 50%; margin-right: -16px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--mirchi);
}

/* ---------- Bottom sheet ---------- */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 30; background: rgba(26,27,30,.42);
  animation: kkfade .18s ease both;
}
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 460px; z-index: 31;
  background: var(--card); border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--steam);
  max-height: 88dvh; display: flex; flex-direction: column;
  animation: kkup .24s cubic-bezier(.22,1,.36,1) both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 560px) { .sheet { max-width: 420px; } }
.sheet__grab {
  width: 40px; height: 4px; border-radius: 999px; background: var(--sand);
  margin: 10px auto 4px; flex: none;
}
.sheet__body { overflow-y: auto; padding: 8px 20px 20px; }
.sheet__title { font-family: var(--gro); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin: 6px 0 0; }

/* ---------- Option rows (resolve sheet) ---------- */

.option {
  display: flex; align-items: center; gap: 12px; padding: 14px; width: 100%; text-align: left;
  background: var(--khadi); border: 1px solid var(--steam); border-radius: var(--r-md); cursor: pointer;
}
.option:active { transform: scale(.995); }
.option.is-primary { background: var(--moss); border-color: var(--moss-br); }
.option__t { font-size: 14.5px; font-weight: 600; }
.option__b { font-size: 12px; color: var(--mut); line-height: 1.35; }
.option__r { font-family: var(--mo); font-size: 12px; font-weight: 700; color: var(--jade); flex: none; }
.option__chev { color: var(--mut2); font-size: 16px; flex: none; }

/* ---------- Progress ---------- */

.bar { height: 4px; border-radius: 999px; background: var(--steam); overflow: hidden; display: block; }
.bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--jade); }

.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--sand); display: block; }
.dots i.is-on { background: var(--jade); }

/* ---------- Illustration placeholder ---------- */

.illus-tk {
  display: flex; align-items: center; justify-content: center;
  background: var(--steam); border-radius: var(--r-md);
  font-family: var(--mo); font-size: 9px; color: var(--mut2); letter-spacing: .06em;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px); transform: translateX(-50%);
  background: var(--ink); color: var(--khadi); padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; z-index: 40; animation: kkin .18s ease both;
  max-width: calc(100% - 40px); text-align: center;
}
:root[data-theme="dark"] .toast { background: var(--card); border: 1px solid var(--steam); color: var(--ink); }

.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;
}

.note-hand {
  font-family: var(--hand); font-size: 19px; line-height: 1.3; color: var(--mut);
  padding: 22px 24px 8px; transform: rotate(-.5deg);
}