/* ============================================================================================
   The landing page's RE-DRAWN interface (Components/Landing/Mock.razor), which every picture on the
   landing is a baked render of (scripts/bake_mocks.ps1).

   Why this file exists: the nine screenshots the page used to show were captured on different screens
   at different zoom levels, so a run of them puts three or four different UI type sizes on one
   page no matter how they are laid out. Redrawing the same panels in markup fixes every one of
   them at 13px and lets them reflow into whatever column they land in.

   What it is NOT: a pixel-exact copy of the product. It is the same data (real Cebu listings, the
   counts and prices from the captures) in the product's own palette and font, close enough that a
   stranger recognises the app when they open it. Fidelity to the concept, not to the pixel.

   The tokens below are map.css's LIGHT theme, restated rather than referenced: map.css resolves
   :root per visitor and these panels must render the same for everyone.
   ============================================================================================ */

.mk {
  --bg: #faf7f2; --panel: #f2ece2; --divider: #ece3d5; --border: #e3d9c8; --border-2: #d4c7b2;
  --text: #2b2520; --text-2: #4a4038; --muted: #6b6152; --accent: #a95324; --card: #f5efe6;
  --chip-bg: #f3e7d8; --chip-fg: #7a3f1f; --chip-bd: #dcc3a8;
  --feat-bg: #e6f0dd; --feat-fg: #3c5a2c; --feat-bd: #b8d0a4;
  --check: #2563eb;
  --mk-r: 8px;

  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px; line-height: 1.45;
  color: var(--text); background: var(--bg);
  text-align: left;
  container-type: inline-size;
}
.mk * { box-sizing: border-box; }
.mk :where(p, ul, li, h4) { margin: 0; padding: 0; list-style: none; }
.mk b { font-weight: 700; }
.mk .ic { width: 14px; height: 14px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The little "?" affordance that sits beside every group title in the product. */
.mk-help {
  display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--chip-bd); color: var(--muted); font-size: 10px; font-weight: 700;
}

/* ------------------------------------------------------------------- the filter panel ------ */

.mk-filters { display: grid; grid-template-columns: 1fr; }
@container (min-width: 520px) { .mk-filters { grid-template-columns: 1fr 1fr; } }
.mk-group { padding: 14px 16px; border-bottom: 1px solid var(--divider); }
@container (min-width: 520px) { .mk-filters > .mk-group:nth-child(even) { border-left: 1px solid var(--divider); } }
.mk-group > h4 { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: 13px; font-weight: 700; }

/* One option row: name left, count right, so the counts line up as a column the eye can scan. */
.mk-opt { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mk-opt .mk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.mk-opt .mk-n { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-box {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 3px;
  border: 1.5px solid var(--border-2); background: #fff;
}
.mk-box.on { background: var(--check); border-color: var(--check); position: relative; }
.mk-box.on::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg);
}
/* The availability dots: the same three colours the map uses for the three states. */
.mk-state { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mk-state-a { background: #1d6b4f; }
.mk-state-p { background: #b8860b; }
.mk-state-r { background: #9b2c3a; }

.mk-field {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--panel); color: var(--text);
}
.mk-field.mk-focus { border-color: var(--accent); }
.mk-field.mk-ghost { color: var(--muted); }
.mk-row { display: flex; align-items: center; gap: 8px; }
.mk-row > .mk-field { flex: 1; min-width: 0; }
.mk-btn-o {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: 5px; background: var(--panel); color: var(--text);
}
.mk-sel { justify-content: space-between; }

/* ---------------------------------------------------------------------- the ads list ------- */

.mk-ads { padding: 14px 16px; }
.mk-ads-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.mk-ads-sub { margin-top: 2px; color: var(--muted); font-size: 12px; }
.mk-ad {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 9px 10px;
  border: 1px solid var(--chip-bd); border-radius: var(--mk-r); background: var(--card);
}
.mk-ad-av {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
  background: #dfe6f2; color: #52709b;
}
.mk-ad-av.mk-av-l { background: #f6dcc8; color: #a4551f; font-weight: 700; }
.mk-ad-av.mk-av-d { background: #d9ead0; color: #4a6b3b; font-weight: 700; }
.mk-ad-av.mk-av-f { background: #dde6f5; color: #3b5a9b; font-weight: 700; font-size: 17px; line-height: 1; }
.mk-ad-main { flex: 1; min-width: 0; }
.mk-ad-t { color: var(--accent); font-weight: 600; line-height: 1.35; }
.mk-ad-m { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.mk-ad-m .mk-price { color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-open { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent); }
.mk-more { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding-left: 10px; color: var(--text-2); font-size: 12px; }
/* An ad the source has taken down: still listed, visibly gone. */
.mk-ad.mk-gone { opacity: .55; }
.mk-gone-tag { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--border-2); border-radius: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; }

.mk-chip-direct {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--feat-bd); background: var(--feat-bg); color: var(--feat-fg);
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
}

/* ------------------------------------------------------------------- the listing card ------ */

.mk-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.mk-price-big { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-pager { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.mk-pager .mk-rnd { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); }
.mk-pager-n { text-align: center; line-height: 1.1; }
.mk-pager-n b { display: block; font-size: 15px; color: var(--text); }
.mk-pager-n span { font-size: 9px; letter-spacing: .1em; }

.mk-specs { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 11px 16px; }
.mk-spec { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.mk-spec .ic { width: 16px; height: 16px; color: var(--text-2); }

.mk-photos { position: relative; margin: 0 16px; border-radius: var(--mk-r); overflow: hidden; }
.mk-photos img { display: block; width: 100%; height: auto; }
.mk-photos-n {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(20,14,10,.62); color: #fff; font-size: 12px; font-weight: 700;
}

.mk-addr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; color: var(--accent); font-size: 14px; font-weight: 600; }
.mk-prec { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-variant-numeric: tabular-nums; }
.mk-dates { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 16px 0; }
.mk-date { display: flex; align-items: flex-start; gap: 7px; }
.mk-date .ic { color: var(--muted); margin-top: 2px; }
.mk-date-k { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.mk-date-v { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-feats { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 14px; }
.mk-feat {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--feat-bd); background: var(--feat-bg); color: var(--feat-fg); font-size: 12px; font-weight: 600;
}

/* ----------------------------------------------------------------------- the activity ------ */

.mk-act { padding: 14px 16px; }
.mk-act h4 { font-size: 13px; color: var(--text-2); }
.mk-ev { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 5px 0; }
.mk-ev time { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-ev span { color: var(--text); }
.mk-hist { display: flex; align-items: center; gap: 7px; padding: 4px 0; color: var(--text-2); }
.mk-sep { margin: 10px 0; border-top: 1px dashed var(--border-2); }
.mk-act-h2 { font-size: 13px; color: var(--text-2); }
.mk-act-h2 b { color: var(--text); }

/* -------------------------------------------------------------------- the private panel ---- */

.mk-priv { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--card); }
.mk-priv-h { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; }
.mk-rate { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mk-stars { display: flex; gap: 3px; color: #f5c518; font-size: 17px; line-height: 1; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.mk-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 12.5px; }
.mk-tag span { color: var(--text); }
.mk-tag i { font-style: normal; opacity: .7; }
.mk-note { margin-top: 11px; padding: 10px 12px; border-radius: var(--mk-r); background: var(--panel); border: 1px solid var(--divider); position: relative; }
.mk-note p { line-height: 1.55; }
.mk-note a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.mk-note .mk-pencil { position: absolute; right: 10px; top: 10px; color: var(--muted); }
.mk-input-ghost { margin-top: 10px; padding: 8px 12px; border-radius: var(--mk-r); background: var(--panel); border: 1px solid var(--divider); color: var(--muted); }

/* ------------------------------------------------------------------------- the presets ----- */

.mk-presets { padding: 12px; }
.mk-presets-t {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 11px; border: 2px solid var(--text); border-radius: 6px; font-weight: 600;
}
.mk-presets-m { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--card); overflow: hidden; }
.mk-presets-m li { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.mk-presets-m li + li { border-top: 1px solid var(--divider); }
.mk-presets-m .mk-new { color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------------------- the search ----- */

.mk-search { padding: 12px; }
.mk-search-bar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 11px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--panel); }
.mk-search-bar .mk-q { flex: 1; color: var(--muted); }
.mk-search-go { padding: 7px 15px; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 700; }
.mk-search-body { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--card); }
.mk-search-chk { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.mk-way { display: flex; gap: 11px; padding: 12px; }
.mk-way + .mk-way { border-top: 1px solid var(--divider); }
.mk-way-ic { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--chip-bg); color: var(--chip-fg); }
.mk-way h4 { font-size: 13px; font-weight: 700; }
.mk-way p { margin-top: 3px; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.mk-way p b { color: var(--text); }
/* The URL shapes the paste box accepts, monospaced as the product sets them. */
.mk-urls { margin-top: 7px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; line-height: 1.75; color: var(--muted); }
.mk-upload { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 13px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 600; font-size: 12.5px; }

/* ------------------------------------------------------------------------- the map view ---- */

/* The custom-area panel is a CAPTURE of the product (wwwroot/images/landing/customarea.png) with the
   map's own price pins laid back over it in markup. Drawn street grids were tried first and read as a
   wireframe; a live Leaflet map was tried after that and could only approximate a freehand outline with
   a polygon. The capture has the real line, and the real dimming outside it.

   The pins are positioned in PERCENTAGES of the picture, which is the whole reason they can be markup:
   the panel is baked at two widths and they land on the same streets in both. */
.mk-area { position: relative; }
.mk-area img { display: block; width: 100%; height: auto; }

/* One listing: what it costs, and — when the visitor has rated it — what they thought. Built to match
   the product's own pin rather than to look like it: .pin-wrap / .price-pin / .pin-top / .pin-stars in
   map.css, assembled by pinHtml in js/map/pins.js. The parts that matter are that the wrap is centred ON
   the point rather than standing on it, that the bubble carries a white border, and that the rating rides
   ABOVE the bubble instead of sitting inside it — which is what this panel had wrong.

   Everything is sized against the PANEL, not in fixed pixels, because the picture under it is scaled to
   the panel too: at a flat 12px the pins came out twice the size of the street names they stand among and
   the panel stopped reading as a photograph of a map. The floor keeps them legible on the narrow bake. */
.mk-pin {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center;
  font-size: clamp(8.5px, 2.3cqw, 11px); line-height: 1.2;
}
.mk-price-pin {
  background: #1d6b4f; color: #fff; white-space: nowrap;
  font-weight: 600; font-variant-numeric: tabular-nums;
  padding: .17em .58em; border-radius: 999px; border: .17em solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mk-pin-top {
  position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; white-space: nowrap;
}
.mk-pin-stars {
  font-style: normal; font-size: .84em; letter-spacing: .4px; line-height: 1;
  color: #f5c518; text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------- one listing, cut out ------ */

/* The proof panel is one sheet. Nothing here but the cuts: both halves bring their own padding. */
.mk-proof { display: block; }

/* The saw cut. Its shape comes in as an inline clip-path (TearStyle in Mock.razor) because it has to be
   exact at both baked widths; this only gives it its height and its colour. A flat shadow rather than a
   line: a cut edge is darkest right at the cut. */
.mk-tear {
  height: var(--tear-h, 9px);
  background: linear-gradient(to bottom, rgba(43,37,32,.3), rgba(43,37,32,.14));
}
/* ------------------------------------------------------------------ the bake page ---------- */

/* Pages/MockOnly.razor: one panel alone on an empty page, for scripts/bake_mocks.ps1 to photograph.
   No gutter, no shadow, no rounding — the plate those live in is drawn by the landing around the
   finished image, so baking them in would frame the picture twice. */
/* The panel light on BLACK: scripts/bake_mocks.ps1 captures deliberately too tall and lets ffmpeg's
   cropdetect find where the panel ends, which is the one thing it does natively. No shadow or rounding
   here -- the landing draws the plate around the finished image, so baking one in would frame it twice. */
.mk-bake { margin: 0; background: #faf7f2; }
body:has(.mk-bake) { margin: 0; padding: 0; background: #000; }