/* ============================================================
   Halal Spot — design tokens
   Forest green = trust and primary actions
   Warm sand     = welcoming food-discovery background
   Saffron       = highlights and ratings
   Terracotta    = caution / "options only"
   ============================================================ */
:root {
  /* Palette lifted verbatim from the Replit artifact's constants/colors.ts */
  --forest: #176B4D;          /* primary action */
  --forest-600: #145c42;
  --forest-100: #E5EFE8;      /* secondary surface */
  --forest-deep: #18332A;     /* foreground / deep brand */
  --mint: #CFE4D4;
  --sand: #F7F3EA;            /* background */
  --sand-200: #EDE7DA;        /* muted */
  --cream: #FFFCF5;           /* card */
  --saffron: #E1A23B;
  --saffron-100: #F4E5C7;
  --saffron-ink: #8A5B17;
  --terracotta: #B95E49;
  --terracotta-100: #F1D9CF;
  --destructive: #B94B3D;

  --ink: #18332A;
  --ink-2: #405348;
  --muted: #6E756F;
  --card: #FFFCF5;
  --line: #DDD5C6;
  --input: #D5CCBB;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 22px;               /* their card radius */
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(24, 51, 42, .05);
  --shadow-md: 0 6px 18px rgba(24, 51, 42, .08);

  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* Room for the fixed bottom tab bar + the iOS home indicator. */
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px);
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 10px; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }
.muted { color: var(--muted); }
.lede { color: var(--ink-2); font-size: 14.5px; max-width: 60ch; }

main { max-width: 720px; margin: 0 auto; padding: 14px 16px 24px; }
@media (min-width: 900px) { main { max-width: 1040px; } }

/* ---------------------------------------------------------- app bar */
.appbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 246, 239, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
}
.appbar-row {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
@media (min-width: 900px) { .appbar-row { max-width: 1040px; } }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--forest); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.brand strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.brand small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.appbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.langswitch { display: flex; background: var(--sand-200); border-radius: var(--r-pill); padding: 2px; }
.langswitch a {
  padding: 4px 9px; border-radius: var(--r-pill); font-size: 11.5px;
  font-weight: 600; color: var(--muted);
}
.langswitch a.on { background: var(--card); color: var(--forest); box-shadow: var(--shadow-sm); }

.whoami { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.rolebadge {
  background: var(--forest-100); color: var(--forest); font-size: 9.5px;
  padding: 2px 6px; border-radius: var(--r-pill); margin-left: 4px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.inlineform { display: inline; }
.linkbtn {
  background: none; border: none; color: var(--muted); font: inherit;
  font-size: 13px; font-weight: 550; padding: 6px; cursor: pointer;
}
.signin-btn {
  background: var(--forest); color: #fff; padding: 7px 14px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
}

/* ---------------------------------------------------------- bottom tabs */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  display: flex; align-items: stretch;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--muted);
  font-size: 10.5px; font-weight: 600; padding-top: 6px;
}
.tabbar a .ic { font-size: 19px; line-height: 1; }
.tabbar a.on { color: var(--forest); }
.tabbar a.on .ic { transform: translateY(-1px); }

/* ---------------------------------------------------------- cards */
.card, .panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.panel { padding: 16px; margin-bottom: 12px; }

.rcard { display: block; padding: 14px; margin-bottom: 10px; position: relative; }
.rcard:active { transform: scale(.995); }
.rcard-top { display: flex; align-items: flex-start; gap: 10px; }
.rcard h3 { flex: 1; min-width: 0; font-size: 15.5px; letter-spacing: -.01em; }
.rcard .addr { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
.rcard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

/* status badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--r-pill); background: var(--c-bg, #eee); color: var(--c, #555);
  line-height: 1.3;
}
.badge .dotmark { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.pin { width: 13px; height: 13px; display: inline-block; background: var(--c); flex: none; }
.pin.big { width: 20px; height: 20px; }
.shape-circle { border-radius: 50%; }
.shape-dot { border-radius: 50%; transform: scale(.62); }
.shape-square { border-radius: 3px; }
.shape-diamond { border-radius: 3px; transform: rotate(45deg) scale(.82); }
.shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape-star { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.shape-cross { clip-path: polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%); }

.chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--sand-200); color: var(--ink-2); font-weight: 550;
}
.chip.ok { background: var(--forest-100); color: var(--forest); }
.chip.warn { background: var(--terracotta-100); color: var(--terracotta); }
.chip.star { background: var(--saffron-100); color: #8a6206; }

/* save / bookmark */
.savebtn {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; cursor: pointer;
  font-size: 15px; color: var(--muted); padding: 0;
}
.savebtn.on { background: var(--forest); border-color: var(--forest); color: #fff; }

/* ---------------------------------------------------------- controls */
input[type=search], input[type=text], input[type=email],
input[type=password], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card);
  font: inherit; font-size: 16px; /* 16px stops iOS zoom-on-focus */
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-100);
}
button, .btn {
  padding: 11px 18px; border: none; border-radius: var(--r-pill);
  background: var(--forest); color: #fff; font: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; /* touch target */
}
button:active { transform: scale(.98); }
button.ghost { background: var(--card); color: var(--forest); border: 1px solid var(--line); }
button.sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }
button:disabled { opacity: .45; cursor: not-allowed; }

.searchrow { display: flex; gap: 8px; margin: 12px 0; }
.searchrow input { flex: 1; }

.scroller {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 10px;
  margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller a, .scroller .pillbtn {
  flex: none; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; font-weight: 550; color: var(--ink-2); white-space: nowrap;
}
.scroller a.on, .scroller .pillbtn.on {
  background: var(--forest); border-color: var(--forest); color: #fff;
}

.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chk {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
  color: var(--ink-2); background: var(--card); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: var(--r-pill); cursor: pointer;
}
.chk input { width: auto; margin: 0; accent-color: var(--forest); }
.chk:has(input:checked) { background: var(--forest-100); border-color: var(--forest); color: var(--forest); }

/* ---------------------------------------------------------- evidence */
.evidence { border-left: 3px solid var(--forest); }
.reason {
  background: var(--forest-100); color: #1b4a33; padding: 11px 13px;
  border-radius: var(--r-md); font-size: 13.5px; margin: 0 0 12px;
}
.cert { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin: 10px 0; }
.cert table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cert th {
  text-align: left; color: var(--muted); font-weight: 500;
  padding: 4px 10px 4px 0; white-space: nowrap; vertical-align: top;
}
.cert td { padding: 4px 0; word-break: break-word; }
.cert code { font-size: 12px; background: var(--sand-200); padding: 2px 6px; border-radius: 5px; }
.state { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); font-weight: 650; }
.state.verified { background: var(--forest-100); color: var(--forest); }
.state.pending { background: var(--saffron-100); color: #8a6206; }
.state.expired, .state.rejected { background: var(--terracotta-100); color: var(--terracotta); }
.verify {
  display: inline-block; margin-top: 8px; font-size: 13px;
  color: var(--forest); font-weight: 600;
}

.stars { color: var(--saffron); letter-spacing: 1px; }
.ratingbig { display: flex; align-items: baseline; gap: 6px; }
.ratingbig b { font-size: 19px; }

.menu, .reviews { list-style: none; padding: 0; margin: 0; }
.menu li {
  display: flex; gap: 10px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.menu li:last-child { border-bottom: none; }
.mname { flex: 1; }
.price { color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.reviews li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.reviews li:last-child { border-bottom: none; }
.rvhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.rvhead b { font-size: 13.5px; }
.sawcert { font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--sand-200); color: var(--ink-2); }
.saw-yes { background: var(--forest-100); color: var(--forest); }
.saw-no { background: var(--terracotta-100); color: var(--terracotta); }

.detailhead { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 16px; }
.back { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; padding: 6px 0; }

.history ol { font-size: 12.5px; color: var(--muted); padding-left: 16px; margin: 0; }
.history code { font-size: 11.5px; }
.trigger { font-size: 10px; background: var(--sand-200); padding: 1px 6px; border-radius: var(--r-pill); }

/* ---------------------------------------------------------- misc */
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.statcard { padding: 14px; }
.statcard .count { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.statcard h3 { color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.minibars { list-style: none; padding: 0; margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.minibars li { display: flex; align-items: center; gap: 5px; }
.swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.legendlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.legendlist li { display: flex; gap: 10px; align-items: flex-start; }
.legendlist small { display: block; color: var(--muted); font-size: 12.5px; }

.empty { color: var(--muted); text-align: center; padding: 26px 16px; }
.coverage {
  background: var(--saffron-100); color: #7a5a1e; padding: 13px 15px;
  border-radius: var(--r-md); font-size: 13.5px; text-align: left;
}
.coverage a { color: var(--forest); font-weight: 600; text-decoration: underline; }
.resultcount { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }

#map { height: 62vh; min-height: 340px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.maplegend { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.maplegend li { display: flex; align-items: center; gap: 5px; }
.leafpin { background: none; border: none; }

.modtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.modtable th { text-align: left; color: var(--muted); font-weight: 550; border-bottom: 1px solid var(--line); padding: 7px 8px 7px 0; }
.modtable td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.modtable .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { background: var(--sand-200); color: var(--ink-2); font-size: 11.5px; padding: 2px 9px; border-radius: var(--r-pill); font-weight: 650; }
.warn { color: var(--terracotta); }
.tablewrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }

.authbox { max-width: 400px; margin: 20px auto; }
.authbox form { display: flex; flex-direction: column; gap: 13px; margin: 16px 0; }
.authbox label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 550; }
.authbox small { color: var(--muted); font-size: 12px; font-weight: 400; }
.autherror { background: var(--terracotta-100); color: var(--terracotta); padding: 10px 13px; border-radius: var(--r-md); font-size: 13.5px; }

.legal h2 { margin-top: 20px; }
.legal p { font-size: 14px; color: var(--ink-2); }
.todo { background: var(--saffron-100); border-radius: var(--r-md); padding: 12px 14px; color: #7a5a1e; }

.formstack { display: flex; flex-direction: column; gap: 13px; }
.formstack label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 550; }
.radiorow { display: flex; gap: 8px; flex-wrap: wrap; }
.radiopill { flex: 1; min-width: 88px; }
.radiopill input { position: absolute; opacity: 0; pointer-events: none; }
.radiopill span {
  display: block; text-align: center; padding: 10px 8px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--card); font-size: 13.5px; cursor: pointer;
}
.radiopill input:checked + span {
  background: var(--forest-100); border-color: var(--forest);
  color: var(--forest); font-weight: 600;
}

footer {
  border-top: 1px solid var(--line); padding: 18px 16px;
  color: var(--muted); font-size: 12px; text-align: center;
}
.disclaimer { max-width: 62ch; margin: 0 auto 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Restaurant card — ported from the Replit RestaurantCard.tsx:
   colored header block with cuisine glyph, floating bookmark,
   title row with saffron star rating, status pill, tag row.
   ============================================================ */
.rcard { padding: 0; overflow: hidden; margin-bottom: 14px; display: block; }
.rcard-hero {
  height: 116px; position: relative; display: grid; place-items: center;
  background: var(--hero, var(--forest)); overflow: hidden;
}
.rcard-hero .glow {
  position: absolute; width: 168px; height: 168px; border-radius: 50%;
  border: 1px solid rgba(255, 252, 245, .22); transform: rotate(25deg);
}
.rcard-hero .glyph { font-size: 28px; color: rgba(255, 252, 245, .88); line-height: 1; }
.rcard-hero .cuisine {
  color: rgba(255, 252, 245, .78); font-size: 11.5px; letter-spacing: .5px;
  margin-top: 6px; font-weight: 500;
}
.rcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.rcard-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rcard-title h3 {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcard-rating { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.rcard-rating .st { color: var(--saffron); }
.rcard-meta { font-size: 13px; color: var(--muted); }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
.tagrow .tg {
  background: var(--forest-100); color: var(--forest);
  padding: 5px 8px; border-radius: 7px; font-size: 11px; font-weight: 500;
}
.savebtn {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border-radius: 50%; border: none; background: rgba(24, 51, 42, .32);
  color: var(--cream); display: grid; place-items: center; cursor: pointer;
  font-size: 16px; padding: 0; min-height: 0; backdrop-filter: blur(4px);
}
.savebtn.on { color: var(--saffron); }
.savebtn:active { transform: scale(.92); }

/* status pill with icon, per StatusPill.tsx */
.badge { align-self: flex-start; }
.badge .ic { font-size: 12px; line-height: 1; }

/* install prompt */
.installbar {
  display: none; align-items: center; gap: 10px; margin: 0 0 12px;
  background: var(--forest-100); border: 1px solid var(--forest);
  border-radius: var(--r-md); padding: 11px 13px; font-size: 13.5px; color: #14503a;
}
.installbar.show { display: flex; }
.installbar button { margin-left: auto; }
.offlinebar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b));
  background: var(--terracotta); color: #fff; font-size: 12.5px;
  text-align: center; padding: 7px; z-index: 45; display: none;
}
.offlinebar.show { display: block; }

/* ============================================================
   Venue photo + outbound actions
   Photos appear ONLY when openly licensed (Wikimedia/Mapillary);
   the attribution caption is a licence obligation, not decoration.
   ============================================================ */
.venuephoto { margin: 0 0 12px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--sand-200); }
.venuephoto img { width: 100%; height: 190px; object-fit: cover; display: block; }
.venuephoto figcaption {
  font-size: 11px; color: var(--muted); padding: 6px 12px; background: var(--card);
}

.actionpanel { padding: 12px; }
.actionrow { display: flex; gap: 8px; }
.actionbtn {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); min-height: 52px;
}
.actionbtn:active { background: var(--forest-100); }
.actionbtn .ic { font-size: 17px; flex: none; }
/* The text column must be allowed to shrink below its content width, or a
   long domain / phone number pushes straight out of the button on narrow
   phones. A flex item defaults to min-width:auto, which is what leaked. */
.actionbtn > span:not(.ic) { min-width: 0; flex: 1; overflow: hidden; }
.actionbtn b {
  display: block; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actionbtn small {
  display: block; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Three buttons side by side leave ~33% of a 360px screen each — not enough
   for "Website" plus a domain. Stack them below the narrowest phones. */
@media (max-width: 430px) {
  .actionrow { flex-wrap: wrap; }
  .actionrow .actionbtn { flex: 1 1 100%; }
}
.maplinks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12px; }
/* "ca." marker: the street came from the coordinates, not from the venue,
   so the address is honest about being approximate rather than implying a
   precision we do not have. */
.chip.approx {
  font-size: 10px; padding: 1px 6px; vertical-align: 1px;
  background: var(--sand-200); color: var(--ink-2); font-weight: 600;
}
.maplinks a { color: var(--forest); font-weight: 550; }
.hours { font-size: 12.5px; color: var(--ink-2); margin: 10px 0 0; }
.hours code { background: var(--sand-200); padding: 2px 6px; border-radius: 5px;
  font-size: 11.5px; }

/* website chip on cards */
.rcard-meta .sitelink { color: var(--forest); font-weight: 550; }

/* photo hero on cards */
.rcard-hero .heroimg { width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; }
.rcard-hero .heroattr {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 10px;
  font-size: 9.5px; color: rgba(255,252,245,.9);
  background: linear-gradient(transparent, rgba(24,51,42,.7));
}
.cardlinks {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 16px 13px;
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.cardlinks a { color: var(--forest); font-weight: 550; }
.cardlinks a:active { opacity: .6; }

.evidencedate { font-size: 12.5px; color: var(--muted); margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evidencedate b { color: var(--ink-2); }

/* hero photo overlays */
.rcard-hero .heroshade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,51,42,.05) 0%, rgba(24,51,42,.55) 100%);
}
.rcard-hero .heroattr.stock {
  left: auto; right: 10px; bottom: 8px; background: rgba(24,51,42,.55);
  border-radius: var(--r-pill); padding: 3px 9px; backdrop-filter: blur(3px);
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.rcard-hero .cuisine.over {
  position: absolute; left: 12px; bottom: 9px; margin: 0;
  color: #fff; font-weight: 650; font-size: 11px; letter-spacing: .6px;
  text-shadow: 0 1px 3px rgba(24,51,42,.6);
}
.venuephoto figcaption b { color: var(--ink-2); }
.venuephoto figcaption a { color: var(--forest); }

/* ---------------------------------------------------------- image studio */
.studiobar { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.studioactions { display: flex; gap: 8px; flex-wrap: wrap; }
.scroller .cnt { font-size: 10.5px; opacity: .75; margin-left: 4px; }

.imggrid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.imgcell { margin: 0; }
.imgwrap { position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--sand-200); }
.imgcell img { width: 100%; height: 108px; object-fit: cover; display: block; }
.imgcell.state-rejected .imgwrap { opacity: .32; }
.imgcell.state-approved .imgwrap { border-color: var(--forest); border-width: 2px; }

.statetag { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  font-weight: 700; color: #fff; background: var(--muted); }
.statetag.approved { background: var(--forest); }
.statetag.rejected { background: var(--destructive); }
.statetag.pending { background: var(--saffron); color: #4a3208; }
.usedby { position: absolute; top: 6px; right: 6px; background: rgba(24,51,42,.7);
  color: #fff; font-size: 10px; padding: 2px 6px; border-radius: var(--r-pill); }

.imgacts { display: flex; gap: 5px; margin-top: 5px; }
button.tiny, a.tiny { min-height: 0; padding: 4px 9px; font-size: 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2); font-weight: 700; }
button.tiny.ok { color: var(--forest); }
button.tiny.no { color: var(--destructive); }
a.tiny.link { display: inline-flex; align-items: center; }
.imgmeta { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.imgbtn { padding: 0; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: none; width: 100%; min-height: 0; position: relative;
  display: block; }
.imgbtn .imgadd { position: absolute; inset: auto 0 0 0; background: rgba(23,107,77,.9);
  color: #fff; font-size: 11px; padding: 4px; font-weight: 600; }

/* ============================================================
   GSAP-style polish: depth, spring easing, tactile feedback.
   Layout is untouched — this is surface treatment only.
   ============================================================ */

/* Spring curve used by GSAP's back.out, mirrored for CSS transitions */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --smooth: cubic-bezier(.4, 0, .2, 1);
}

/* Cards lift toward the pointer instead of sitting flat */
.rcard, .statcard, .panel {
  transition: transform .38s var(--smooth), box-shadow .38s var(--smooth),
              border-color .38s var(--smooth);
  will-change: transform;
}
@media (hover: hover) {
  .rcard:hover, .statcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(24, 51, 42, .13);
    border-color: rgba(23, 107, 77, .34);
  }
  .rcard:hover .heroimg { transform: scale(1.045); }
}
.rcard:active, .statcard:active { transform: translateY(-1px) scale(.996); }
.rcard-hero .heroimg { transition: transform .7s var(--smooth); }

/* Buttons get a spring press and a soft glow */
button, .btn, .signin-btn {
  transition: transform .28s var(--spring), box-shadow .28s var(--smooth),
              background-color .2s var(--smooth), opacity .2s;
}
@media (hover: hover) {
  button:hover:not(:disabled), .btn:hover, .signin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23, 107, 77, .26);
  }
  button.ghost:hover { box-shadow: 0 8px 20px rgba(24, 51, 42, .10); }
}
button:active:not(:disabled), .btn:active { transform: translateY(0) scale(.97); }

/* Chips, pills and filters */
.chk, .scroller a, .scroller .pillbtn, .chip, .tg {
  transition: transform .26s var(--spring), background-color .24s var(--smooth),
              border-color .24s var(--smooth), color .24s var(--smooth);
}
@media (hover: hover) {
  .scroller a:hover, .scroller .pillbtn:hover, .chk:hover { transform: translateY(-2px); }
}
.scroller a:active, .chk:active { transform: scale(.96); }

/* Save button: springy and obvious */
.savebtn { transition: transform .3s var(--spring), background-color .25s var(--smooth),
                       color .25s var(--smooth); }
.savebtn:hover { transform: scale(1.12); }
.savebtn:active { transform: scale(.88); }

/* Links and rows */
.cardlinks a, .maplinks a, .actionbtn {
  transition: transform .24s var(--smooth), background-color .24s var(--smooth),
              opacity .2s;
}
@media (hover: hover) {
  .actionbtn:hover { transform: translateY(-2px); background: var(--forest-100); }
  .cardlinks a:hover, .maplinks a:hover { transform: translateY(-1px); opacity: .78; }
}

/* Studio tiles */
.imgcell .imgwrap, .imgbtn {
  transition: transform .3s var(--spring), box-shadow .3s var(--smooth),
              border-color .25s var(--smooth);
}
@media (hover: hover) {
  .imgcell:hover .imgwrap, .imgbtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 24px rgba(24, 51, 42, .16);
  }
}

/* Inputs focus with a soft expanding ring */
input, select, textarea { transition: border-color .22s var(--smooth), box-shadow .28s var(--smooth); }

/* Evidence panel accent bar draws itself in */
.evidence { position: relative; overflow: hidden; }
.evidence::before {
  content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
  background: var(--forest); transform-origin: top;
  animation: drawbar .8s var(--smooth) both;
}
@keyframes drawbar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Reveal fallback: without the gsap-ready class everything stays visible,
   so a failed script load never leaves a blank page. */
.gsap-ready .rcard,
.gsap-ready .statcard,
.gsap-ready .panel { will-change: transform, opacity; }

/* Skeleton shimmer for images still loading */
.rcard-hero { background-image: linear-gradient(100deg,
  rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 70%);
  background-size: 220% 100%; animation: shimmer 2.2s infinite linear; }
.rcard-hero:has(.heroimg) { animation: none; }
@keyframes shimmer { to { background-position: -220% 0; } }

@media (prefers-reduced-motion: reduce) {
  .rcard, .statcard, .panel, button, .btn, .savebtn, .scroller a,
  .imgcell .imgwrap, .imgbtn, .actionbtn { transition: none !important; }
  .rcard:hover, .statcard:hover, button:hover, .savebtn:hover { transform: none !important; }
  .evidence::before { animation: none; }
  .rcard-hero { animation: none; }
}

.legallinks { margin-top: 6px; }
.legallinks a { color: var(--muted-foreground); text-decoration: underline; }
.legallinks a:hover { color: var(--forest); }

/* Map city bar: same pill treatment as the homepage scroller, with the
   checkbox pushed to sit alongside rather than inheriting pill styling. */
.mapbar { align-items: center; padding-top: 6px; }
.mapbar .chk { flex: none; margin-left: 4px; }

/* ============================================================
   KOMPAKTES RASTER (Wolt-Vorbild)
   Vorher: eine Karte pro Zeile, sehr hoch. Jetzt: so viele
   nebeneinander wie passen, Text UNTER dem Bild statt darauf.
   ============================================================ */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}
/* Auf schmalen Handys zwei Spalten statt einer — genau der Punkt:
   mehr Lokale auf einen Blick. */
@media (max-width: 560px) {
  .cardgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 360px) {
  .cardgrid { grid-template-columns: 1fr; }
}

.cardgrid .rcard {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(24,51,42,.05);
}
.cardgrid .rcard:hover { box-shadow: 0 8px 22px rgba(24,51,42,.10); }

/* Bild: festes Seitenverhältnis wie bei Wolt, ~2.1:1 */
.cardgrid .rcard-hero {
  aspect-ratio: 21 / 10;
  height: auto;
  border-radius: 0;
}
/* Küche NICHT mehr über das Foto legen — Wolt hält das Bild frei */
.cardgrid .rcard-hero .cuisine.over { display: none; }
.cardgrid .rcard-hero .heroshade { opacity: .35; }
.cardgrid .heroattr {
  font-size: 9.5px; padding: 2px 6px; bottom: 6px; left: 6px;
}
.cardgrid .savebtn {
  width: 30px; height: 30px; font-size: 15px; top: 8px; right: 8px;
}

/* Textteil: kompakt, klare Reihenfolge Name -> Adresse -> Status */
.cardgrid .rcard-body { padding: 10px 12px 12px; display: block; }
.cardgrid .rcard-title { gap: 6px; align-items: flex-start; }
.cardgrid .rcard-title h3 {
  font-size: 15px; line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cardgrid .rcard-rating { font-size: 13px; flex: none; }
.cardgrid .rcard-meta {
  font-size: 12.5px; margin: 4px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardgrid .badge { font-size: 11px; padding: 3px 8px; }
/* Tags und Links kosten in der Rasteransicht nur Platz */
.cardgrid .tagrow, .cardgrid .cardlinks { display: none; }

@media (max-width: 560px) {
  .cardgrid .rcard-body { padding: 8px 10px 10px; }
  .cardgrid .rcard-title h3 { font-size: 13.5px; }
  .cardgrid .rcard-meta { font-size: 11.5px; margin: 3px 0 6px; }
  .cardgrid .badge { font-size: 10px; padding: 2px 6px; }
}

/* ============================================================
   WOLT-FEINSCHLIFF
   Wolts Karte hat eine klare Anatomie: randloses Bild oben,
   darunter ein weisses Textfeld mit Name + Zeit-Chip nebeneinander,
   dann eine Trennlinie, dann eine Metazeile. Genau das hier.
   ============================================================ */

/* Ruhigerer Hintergrund, damit weisse Karten "schweben" wie bei Wolt */
body { background: #FAF8F3; }

.cardgrid { gap: 20px; }
@media (max-width: 560px) { .cardgrid { gap: 14px; } }

.cardgrid .rcard {
  border: 1px solid #EFEDE7;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(24,51,42,.04);
  transition: transform .22s var(--smooth), box-shadow .22s var(--smooth);
}
@media (hover: hover) {
  .cardgrid .rcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(24,51,42,.12);
    border-color: #E3DFD5;
  }
  /* Wolt zoomt das Foto leicht beim Hover — wirkt lebendig, ohne zu stoeren */
  .cardgrid .rcard:hover .heroimg { transform: scale(1.05); }
}
.cardgrid .heroimg { transition: transform .5s var(--smooth); }

/* Bild: kein Schatten drueber, das Essen soll klar sein */
.cardgrid .rcard-hero .heroshade { opacity: 0; }
.cardgrid .rcard-hero { aspect-ratio: 20 / 11; }

/* Titelzeile: Name links, Bewertung als Chip rechts (Wolts Zeit-Chip-Platz) */
.cardgrid .rcard-body { padding: 12px 13px 0; gap: 0; }
.cardgrid .rcard-title { align-items: flex-start; gap: 10px; margin-bottom: 2px; }
.cardgrid .rcard-title h3 {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
  color: var(--ink); line-height: 1.3;
}
.cardgrid .rcard-rating {
  flex: none; background: var(--forest-100); color: var(--forest);
  border-radius: 8px; padding: 4px 8px; font-size: 12.5px; font-weight: 700;
}
.cardgrid .rcard-rating .st { color: var(--saffron); }

.cardgrid .rcard-meta {
  font-size: 12.5px; color: var(--muted); margin: 0 0 10px;
}

/* Trennlinie + Statuszeile: Wolts Metastreifen, randlos wie dort */
.cardgrid .rcard-body .badge {
  margin: 0 -13px; padding: 9px 13px; border-radius: 0;
  border-top: 1px solid #F0EEE8; background: transparent;
  width: calc(100% + 26px); font-size: 11.5px; font-weight: 600;
  justify-content: flex-start;
}

/* Herz/Stern: weisser Kreis wie bei Wolt statt dunkler Blase */
.cardgrid .savebtn {
  background: rgba(255,255,255,.92); color: #9AA09B;
  box-shadow: 0 1px 4px rgba(0,0,0,.16); backdrop-filter: none;
  width: 32px; height: 32px; font-size: 16px;
}
.cardgrid .savebtn.on { color: var(--saffron); background: #fff; }

/* Symbolbild-Hinweis dezent, aber lesbar — die Ehrlichkeit bleibt */
.cardgrid .heroattr {
  background: rgba(24,51,42,.55); color: #fff;
  font-size: 9px; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; bottom: 7px; left: 7px;
}

@media (max-width: 560px) {
  .cardgrid .rcard { border-radius: 12px; }
  .cardgrid .rcard-body { padding: 10px 11px 0; }
  .cardgrid .rcard-title h3 { font-size: 13.5px; }
  .cardgrid .rcard-rating { font-size: 11px; padding: 3px 6px; }
  .cardgrid .rcard-meta { font-size: 11.5px; margin-bottom: 8px; }
  .cardgrid .rcard-body .badge {
    margin: 0 -11px; padding: 7px 11px; width: calc(100% + 22px); font-size: 10.5px;
  }
  .cardgrid .savebtn { width: 28px; height: 28px; font-size: 14px; top: 6px; right: 6px; }
}

/* Bild-Fallback: der Kuechen-Glyph liegt hinter dem Foto und wird erst
   sichtbar, wenn das Bild wegfaellt (onerror entfernt das <img>).
   Vorher blieb in dem Fall eine leere weisse Flaeche stehen. */
.rcard-hero .glyph.fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; opacity: 0; z-index: 0;
}
.rcard-hero.noimg { background: var(--hero, #6E756F); }
.rcard-hero.noimg .glyph.fallback { opacity: .55; }
.rcard-hero.noimg .heroshade,
.rcard-hero.noimg .heroattr { display: none; }

/* ============================================================
   ERKLÄRSEITE (/halal-erkennen)
   Langer Fliesstext braucht andere Regeln als eine Kartenliste:
   begrenzte Zeilenlaenge, mehr Zeilenabstand, klare Hierarchie.
   ============================================================ */
.guide { max-width: 720px; margin: 0 auto; }
.guide h1 { font-size: 27px; line-height: 1.25; letter-spacing: -.4px;
  margin: 0 0 14px; }
.guide .lede { font-size: 16.5px; line-height: 1.65; color: var(--ink-2);
  margin: 0 0 22px; }
.guide h2 { font-size: 19px; margin: 0 0 12px; letter-spacing: -.2px; }
.guide h3 { font-size: 15.5px; margin: 0 0 6px; }
.guide p { line-height: 1.7; font-size: 15px; }
.guide .panel { margin-bottom: 18px; }

.guide blockquote {
  margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--forest);
  background: var(--forest-100); border-radius: 0 8px 8px 0;
  font-size: 15px; line-height: 1.65;
}
.guide blockquote cite { display: block; margin-top: 8px; font-size: 13px;
  font-style: normal; color: var(--muted); }

/* Nummerierte Fragen: die Zahl steht schon in der Ueberschrift, damit sie
   beim Kopieren erhalten bleibt -- daher hier kein Listenmarker. */
.guide .qlist { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.guide .qlist > li { padding: 14px 0; border-top: 1px solid var(--line); }
.guide .qlist > li:first-child { border-top: none; padding-top: 4px; }
.guide .qlist p { margin: 0; color: var(--ink-2); }

/* Statusbeispiele: echte Badges statt nachgebauter, damit die Erklaerseite
   nicht von der App abweichen kann. */
.statuslist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.statusrow { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.statusrow .badge { flex: none; }
.statusdesc { font-size: 14px; line-height: 1.55; color: var(--ink-2);
  flex: 1; min-width: 200px; }

@media (max-width: 560px) {
  .guide h1 { font-size: 22px; }
  .guide .lede { font-size: 15.5px; }
  .guide h2 { font-size: 17px; }
  .statusdesc { min-width: 100%; }
}