/* MundaApp Market — one screen, one market, in the order a buyer reads it.
 *
 *   the photo answers "what am I looking at"
 *   the circle line answers "who is selling, and where"
 *   the price answers "what does one cost"
 *   the lot box answers "what does the whole lot cost, and what do I save"
 *   the ladder answers "what if I take ten, or twenty"
 *   the attributes answer "is it any good"
 *   the backers answer "do other people trust this price"
 *   the wayfinding answers "where do I stand"
 *   the pool answers "who is coming with me"
 *
 * Nothing below 12px (11px only for uppercase micro-labels), every control at
 * 44px, body contrast 9.3:1, muted on paper 5.2:1.
 */

@font-face {
  font-family: 'Munda Serif';
  src: url('https://mundaapp.pages.dev/fonts/fraunces.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Munda Sans';
  src: url('https://mundaapp.pages.dev/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #f7f4ec;
  --card: #ffffff;
  --ink: #14211a;
  --ink-2: #3d4a41;
  --muted: #5d6a60;
  --line: #e6e0d2;
  --green: #198a00;
  --green-deep: #0e5b22;
  --green-wash: #edf6e8;
  --orange: #ef7d00;
  --orange-wash: #fff3e2;
  --r: 18px;
  --shadow: 0 1px 2px rgba(20, 33, 26, .06), 0 8px 24px rgba(20, 33, 26, .07);
  --ribbon: linear-gradient(90deg, #198a00 0 58%, #de2010 58% 72%, #111 72% 86%, #ef7d00 86% 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font-family: 'Munda Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.mk { max-width: 480px; margin: 0 auto; padding-bottom: 96px; }

/* ------------------------------------------------------------------ header */
.mk-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 9px;
  background: rgba(247, 244, 236, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.mk-top__mark { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; background: var(--ribbon); box-shadow: inset 0 0 0 3px #fff; }
.mk-top__where { flex: 1; min-width: 0; }
.mk-top__where b { display: block; font-size: 15px; letter-spacing: -.01em; }
.mk-top__where span { display: block; font-size: 12px; color: var(--muted); }
.mk-top__btn {
  min-width: 44px; height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
}

/* -------------------------------------------------------------------- hero */
.mk-hero { position: relative; margin: 12px 14px 0; border-radius: 22px; overflow: hidden; }
.mk-hero img { display: block; width: 100%; height: 200px; object-fit: cover; }
.mk-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 26, 14, .05) 0%, rgba(8, 26, 14, .35) 46%, rgba(8, 26, 14, .86) 100%);
}
.mk-hero__in { position: absolute; inset: auto 0 0 0; padding: 16px 16px 15px; z-index: 1; color: #fff; }
.mk-hero__hello { font-family: 'Munda Serif', Georgia, serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .88; }
.mk-hero__h { font-family: 'Munda Serif', Georgia, serif; font-size: 27px; line-height: 1.1; margin: 4px 0 8px; letter-spacing: -.01em; }
.mk-hero__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-hero__basket {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
  font-size: 12px;
}
.mk-hero__basket b { font-size: 16px; letter-spacing: -.01em; }
.mk-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 11px;
  background: rgba(25, 138, 0, .92); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.mk-open i { width: 7px; height: 7px; border-radius: 50%; background: #d8ffcb; animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(216,255,203,.6); }
  70% { box-shadow: 0 0 0 7px rgba(216,255,203,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,255,203,0); }
}

/* ------------------------------------------------------------------ basket */
.mk-sec { padding: 22px 0 0; }
.mk-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px 10px; }
.mk-sec__head h2 { margin: 0; font-family: 'Munda Serif', Georgia, serif; font-size: 19px; letter-spacing: -.01em; }
.mk-sec__head a { font-size: 12px; font-weight: 600; color: var(--green-deep); text-decoration: none; }
.mk-sec__note { margin: 2px 16px 0; font-size: 12px; color: var(--muted); }

.mk-basket { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 8px; scroll-snap-type: x mandatory; }
.mk-basket::-webkit-scrollbar { display: none; }
.mk-b {
  flex: 0 0 116px; scroll-snap-align: start; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px 8px 10px; box-shadow: var(--shadow);
}
.mk-b img { width: 100%; height: 74px; object-fit: cover; border-radius: 11px; display: block; }
.mk-b b { display: block; margin-top: 7px; font-size: 13px; letter-spacing: -.01em; }
.mk-b span { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.mk-b strong { display: block; margin-top: 5px; font-size: 16px; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ search */
.mk-search { display: flex; gap: 8px; padding: 0 16px 10px; }
.mk-search input {
  flex: 1; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ink);
}
.mk-search input::placeholder { color: var(--muted); }

/* -------------------------------------------------------------------- rail */
.mk-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 6px; scroll-snap-type: x mandatory; }
.mk-rail::-webkit-scrollbar { display: none; }
.mk-tile {
  position: relative; flex: 0 0 134px; height: 98px; scroll-snap-align: start;
  border-radius: 16px; overflow: hidden; border: 0; padding: 0; background: #ddd; text-align: left;
}
.mk-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,26,14,.02) 30%, rgba(8,26,14,.84) 100%); }
.mk-tile b { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.mk-tile i { position: absolute; left: 10px; bottom: 28px; z-index: 1; font-style: normal; color: #fff; font-size: 12px; opacity: .92; }

/* ------------------------------------------------------------------- group */
.mk-stalls { display: grid; gap: 12px; padding: 8px 14px 0; }
.mk-market { display: grid; gap: 12px; padding-top: 14px; }
.mk-market__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 6px 2px 0; border-top: 1px solid var(--line); }
.mk-market__town h2 { margin: 0; font-family: 'Munda Serif', Georgia, serif; font-size: 22px; letter-spacing: -.015em; }
.mk-market__town p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.mk-market__meta { text-align: right; }
.mk-market__meta b { display: block; font-size: 13px; color: var(--green-deep); }
.mk-market__meta span { font-size: 12px; color: var(--muted); }
.mk-market__note { margin: -6px 2px 0; font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------------- card */
.mk-card {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); position: relative;
}
.mk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ribbon); z-index: 3; }
.mk-card__ph { position: relative; }
.mk-card__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-card__state {
  position: absolute; top: 12px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 25px; padding: 0 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .95); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mk-card__state.is-open { background: rgba(25, 138, 0, .95); color: #fff; }
.mk-card__off {
  position: absolute; left: 8px; bottom: 8px;
  padding: 4px 8px; border-radius: 8px;
  background: rgba(20, 33, 26, .78); color: #fff; font-size: 12px; font-weight: 700;
}

.mk-card__body { padding: 13px 12px 12px; min-width: 0; }
.mk-card__circle { margin: 0 0 3px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card__head { display: flex; align-items: flex-start; gap: 8px; }
.mk-card__head h3 { margin: 0; font-size: 16px; letter-spacing: -.015em; line-height: 1.24; flex: 1; min-width: 0; }
.mk-card__head b { font-size: 19px; letter-spacing: -.03em; white-space: nowrap; }
.mk-card__head b span { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.mk-lot { margin: 9px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--orange-wash); border: 1px solid #f6e2c6; }
.mk-lot__line { display: flex; align-items: center; gap: 8px; }
.mk-lot__line b { font-size: 13px; color: #523610; letter-spacing: -.01em; }
.mk-lot__line em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #8a4a00; white-space: nowrap; }
.mk-lot__sub { margin-top: 3px; font-size: 12px; color: #7a5a22; }

.mk-tiers { display: flex; gap: 5px; margin-top: 9px; }
.mk-tiers button {
  flex: 1; min-height: 44px; padding: 5px 3px;
  border: 1px solid var(--line); border-radius: 10px; background: #fbfaf6;
  font: inherit; color: var(--ink); text-align: center;
}
.mk-tiers button i { display: block; font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mk-tiers button b { display: block; font-size: 13px; margin-top: 1px; }
.mk-tiers button[aria-pressed="true"] { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); }

.mk-attrs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.mk-attrs span { padding: 3px 8px; border-radius: 999px; background: #f4f7f1; border: 1px solid #e2ebdc; font-size: 12px; color: #34503a; }

.mk-back { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.mk-back b { color: var(--ink-2); }
.mk-back button {
  margin-left: auto; min-height: 44px; padding: 0 14px;
  border: 1px solid #cfe3c8; border-radius: 9px; background: var(--green-wash);
  color: var(--green-deep); font: inherit; font-size: 12px; font-weight: 700;
}

.mk-way { display: flex; align-items: flex-start; gap: 5px; margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
.mk-way svg { flex: 0 0 auto; margin-top: 1px; color: var(--muted); }
.mk-card__fine { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.mk-card__fine b { color: var(--ink-2); font-weight: 600; }

.mk-pool { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
.mk-faces { display: flex; }
.mk-faces i {
  width: 22px; height: 22px; margin-left: -6px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-deep); color: #fff; font-style: normal;
  font-size: 11px; font-weight: 700; border: 2px solid #fff;
}
.mk-faces i:first-child { margin-left: 0; }
.mk-pool__t { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.3; }
.mk-pool__t b { color: var(--ink-2); }
.mk-pool button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--green-deep); color: #fff; font: inherit; font-size: 12px; font-weight: 700;
}
.mk-pool button[disabled] { background: #cfd8ce; color: #66756a; }
.mk-pool__bar { height: 5px; margin-top: 6px; border-radius: 3px; background: #eee7d8; overflow: hidden; }
.mk-pool__bar i { display: block; height: 100%; background: var(--orange); border-radius: 3px; }

.mk-acts2 { display: flex; gap: 7px; margin-top: 11px; }
.mk-acts2 button {
  flex: 1; min-height: 44px; border-radius: 11px;
  font: inherit; font-size: 13px; font-weight: 700;
}
.mk-find { background: var(--green-deep); color: #fff; border: 0; }
.mk-group { background: #fff; color: var(--ink); border: 1px solid var(--line); }

.mk-empty { margin: 4px 2px; padding: 18px 16px; border-radius: 16px; background: #fff; border: 1px dashed var(--line); font-size: 13px; color: var(--muted); text-align: center; }

/* --------------------------------------------------------------------- run */
.mk-runs { display: grid; gap: 10px; padding: 0 16px; }
.mk-run { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; box-shadow: var(--shadow); }
.mk-run__top { display: flex; align-items: flex-start; gap: 10px; }
.mk-run__top h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.mk-run__top p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.mk-run__when { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green-deep); white-space: nowrap; }
.mk-run__stats { display: flex; gap: 14px; margin-top: 10px; }
.mk-run__stats div { font-size: 12px; color: var(--muted); }
.mk-run__stats b { display: block; font-size: 16px; color: var(--ink); letter-spacing: -.02em; }
.mk-nb__join {
  width: 100%; min-height: 44px; margin-top: 9px;
  border: 0; border-radius: 12px; background: var(--green-deep); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700;
}
.mk-nb__join[disabled] { background: #cfd8ce; color: #66756a; }

/* ------------------------------------------------------------------- units */
.mk-units { padding: 0 16px; display: grid; }
.mk-unit { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.mk-unit:first-child { border-top: 0; }
.mk-unit b { font-size: 13px; letter-spacing: .02em; }
.mk-unit p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.mk-units__photo { margin: 0 16px 12px; border-radius: 16px; overflow: hidden; }
.mk-units__photo img { display: block; width: 100%; height: 150px; object-fit: cover; }
.mk-units__photo figcaption { padding: 9px 12px; background: #fff; border: 1px solid var(--line); border-top: 0; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ footer */
.mk-foot { margin: 26px 16px 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.mk-foot p { margin: 0 0 7px; }
.mk-foot a { color: var(--green-deep); }

.mk-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; max-width: 480px; margin: 0 auto;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mk-nav a {
  flex: 1; min-height: 52px; display: grid; place-items: center; gap: 2px;
  text-decoration: none; color: var(--muted); font-size: 12px; letter-spacing: .02em;
}
.mk-nav a[aria-current="page"] { color: var(--green-deep); font-weight: 700; }
.mk-nav svg { display: block; }

@media (prefers-reduced-motion: reduce) { .mk-open i { animation: none; } }
@media (max-width: 359px) { .mk-card { grid-template-columns: 96px minmax(0, 1fr); } }