/* meet-offline, "Khối màu" — the 'new' arm of the meet experiment.
 *
 * A RESTYLE, not a rebuild, and deliberately so. This page hangs 24 element ids
 * off its create-form and filters, and its event cards come from
 * includes/meetup-card.php — the same partial the "load more" script injects,
 * so cards appearing after the first paint would not match rebuilt markup.
 * Re-skinning the existing .mo-* elements keeps every one of those contracts.
 *
 * Loaded ON TOP of the page's own stylesheet, so anything not restated here
 * keeps working. House rules: radius 0, no shadow, no gradient.
 */
/* .mo2-strip is a sibling of the skinned <main>, so it inherits none of these
   unless it is named here — see the note in flat-skin.css. */
.mo2-skin,.mo2-strip{
  --m2-ink:#0a0a0a; --m2-paper:#fff; --m2-dim:#4b5563; --m2-lab:#9aa1ab; --m2-hair:#e6e6e6;
  --m2-blue:#1a3aff; --m2-orange:#e8501e; --m2-green:#0f7a4a;
  --m2-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-family:var(--m2-font);
}
.mo2-skin *{box-sizing:border-box}

/* ── hero ── */
.mo2-skin .mo-hero{background:var(--m2-green);color:#fff;border-radius:0;border:0;
  padding:clamp(30px,4.5vw,58px) clamp(20px,5vw,56px);margin-bottom:26px}
.mo2-skin .mo-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.75);background:none;padding:0;border:0}
.mo2-skin .mo-h{font-size:clamp(26px,4vw,48px);line-height:1.06;letter-spacing:-.045em;
  font-weight:800;color:#fff;margin:14px 0 0}
.mo2-skin .mo-h-n{font-variant-numeric:tabular-nums;color:#fff}
.mo2-skin .mo-p{font-size:clamp(14px,1.5vw,17px);line-height:1.55;color:rgba(255,255,255,.9);
  margin:14px 0 0;max-width:56ch}

/* ── filters + chips ── */
.mo2-skin .mo-filters{background:var(--m2-paper);border:2px solid var(--m2-ink);border-radius:0;
  padding:14px 16px}
.mo2-skin .mo-search input,.mo2-skin .mo-filter-adv input,.mo2-skin .mo-filter-adv select{
  border:2px solid var(--m2-ink);border-radius:0;font-family:inherit;padding:10px 12px}
.mo2-skin .mo-filter-toggle{border:2px solid var(--m2-ink);border-radius:0;background:var(--m2-paper);
  color:var(--m2-ink);font-family:inherit;font-weight:800;padding:10px 15px}
.mo2-skin .mo-filter-n{background:var(--m2-ink);color:#fff;border-radius:0}
.mo2-skin .mo-chip{border:1px solid var(--m2-hair);border-radius:0;color:var(--m2-ink);
  font-weight:700;padding:6px 11px;text-decoration:none}
.mo2-skin .mo-chip:hover{border-color:var(--m2-ink)}
.mo2-skin .mo-clear{color:var(--m2-ink);font-weight:700}
/* .mo-topline is the row holding the people bar and the invite button — a
   layout wrapper, not a label. It was carrying font-size:11px + uppercase +
   letter-spacing, which shouted a whole sentence ("337 NGƯỜI Ở … ĐĂNG NHẬP ĐỂ
   XEM HỌ LÀ AI") and the button text with it. Reset the type; page-meet-offline
   .css owns the layout. */
.mo2-skin .mo-topline{font-size:inherit;letter-spacing:normal;text-transform:none;
  font-weight:inherit;color:inherit}

/* ── event cards ── */
.mo2-skin .mo-card{border:2px solid var(--m2-ink);border-radius:0;box-shadow:none;
  background:var(--m2-paper);margin-bottom:14px}
.mo2-skin .mo-card:hover{background:#fafafa}
.mo2-skin .mo-card.is-flagged{border-color:var(--m2-orange)}

/* ── create a meetup ── */
.mo2-skin .mo-create-open{border:2px solid var(--m2-ink);border-radius:0;background:var(--m2-ink);
  color:#fff;font-family:inherit;font-weight:800;font-size:14.5px;padding:14px 26px;cursor:pointer}
.mo2-skin .mo-create-open:hover{background:#252525}
.mo2-skin .mo-form{border:2px solid var(--m2-ink);border-radius:0;padding:18px;background:var(--m2-paper)}
.mo2-skin .mo-form input,.mo2-skin .mo-form textarea{border:2px solid var(--m2-ink);border-radius:0;
  font-family:inherit;padding:10px 12px}
.mo2-skin .mo-form button{border-radius:0;font-family:inherit;font-weight:800}
.mo2-skin .mo-more{border:2px solid var(--m2-ink);border-radius:0;background:var(--m2-paper);
  color:var(--m2-ink);font-family:inherit;font-weight:800;padding:12px 22px;cursor:pointer}

/* ── the strip this arm adds ── */
.mo2-strip{background:var(--m2-ink);color:#fff;padding:clamp(26px,4vw,46px) clamp(20px,5vw,56px);
  margin-top:34px;display:flex;gap:22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;font-family:var(--m2-font)}
.mo2-strip-t{font-size:clamp(18px,2.4vw,28px);font-weight:800;letter-spacing:-.032em;
  line-height:1.15;margin:0;color:#fff;max-width:28ch}
.mo2-strip-s{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.7);margin:8px 0 0;
  max-width:56ch}
.mo2-btn{display:inline-block;padding:14px 26px;font-weight:800;font-size:14.5px;
  text-decoration:none;border:2px solid #fff;background:#fff;color:var(--m2-ink);border-radius:0;
  font-family:inherit;line-height:1.2}
.mo2-btn:hover{background:#f0f0f0;border-color:#f0f0f0}

/* ── defensive ── */
.mo2-skin a.mo-chip,.mo2-skin a.mo-chip:hover,
.mo2-skin a.mo-clear,.mo2-skin a.mo-clear:hover{color:var(--m2-ink);text-decoration:none}
.mo2-strip a.mo2-btn,.mo2-strip a.mo2-btn:hover{color:var(--m2-ink);text-decoration:none}
.mo2-skin .mo-h,.mo2-skin .mo-h-n{color:#fff}
.mo2-skin .mo-p{color:rgba(255,255,255,.9)}

/* ── full-bleed hero ──────────────────────────────────────────────────────
   .mo-layout is a centred, padded container, so the hero was sitting inside
   it as an inset green rectangle while every other new-design hero runs edge
   to edge. Pulled back out with the container's own gutter, and its padding
   put back inside so the text still lines up with the content below it.
   100vw + the negative margin rather than position:absolute, because the hero
   is now a nature host and the canvas is inset:0 to its padding box. */
.mo2-skin .mo-hero{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;
  padding-left:max(var(--m2-pad,24px),calc(50vw - 50% + var(--m2-pad,24px)));
  padding-right:max(var(--m2-pad,24px),calc(50vw - 50% + var(--m2-pad,24px)));
}
/* Hosting the landscape means the text sits on a photograph, not a flat field. */
.mo2-skin .mo-hero.nature-host{overflow:hidden}

/* ── elements the skin did not reach ─────────────────────────────────────
   Verified against the rendered page, not guessed: the first pass invented
   .mo-presence / .mo-rsvp and styled nothing at all. The real names are
   .mo-people-bar for the strip and .mo-go (JS-rendered cards) / .mo-btn-go
   (server-rendered) for the button. */
.mo2-skin .mo-people-bar{background:#f5f7ff;border:0;border-left:6px solid var(--m2-ink);
  border-radius:0;color:var(--m2-ink)}
.mo2-skin .mo-people-bar-t{color:var(--m2-ink)}
.mo2-skin .mo-people-bar a,.mo2-skin .mo-signin{color:var(--m2-ink);font-weight:800}
.mo2-skin .mo-pf{border-radius:0}

/* The RSVP button: outlined blue in a design with no blue outlines. */
.mo2-skin .mo-go,.mo2-skin .mo-btn-go{border-radius:0;border:2px solid var(--m2-ink);
  background:var(--m2-paper);color:var(--m2-ink);font-weight:800}
.mo2-skin .mo-go:hover,.mo2-skin .mo-btn-go:hover{background:var(--m2-ink);color:#fff}
.mo2-skin .mo-go.is-on,.mo2-skin .mo-btn-go.is-on{background:var(--m2-green);
  border-color:var(--m2-green);color:#fff}
.mo2-skin .mo-more-spin{border-top-color:var(--m2-ink)}

.mo2-skin select,.mo2-skin input[type=text],.mo2-skin input[type=search],
.mo2-skin .mo-card,.mo2-skin .mo-prev-map,.mo2-skin .mo-btn{border-radius:0}

/* ── text protection over the landscape ───────────────────────────────────
   Hosting a scene means the headline sits on a photograph, and the scene's own
   scrim is tuned per palette — 0.22 on the misty-morning one, which measured
   1.57:1 for white text here. Far under the 3.0 that large text needs.

   A gradient of its own, independent of which scene the clock picked, so the
   worst-case palette is still readable. z-index 1 puts it above the canvas
   (hero-nature.css pins that at 0) and the content is lifted to 2 —
   :not(.nature-bg) so the canvas is not lifted along with it. */
.mo2-skin .mo-hero.nature-host::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.68),rgba(10,10,10,.36) 58%,rgba(10,10,10,.06) 88%)}
.mo2-skin .mo-hero.nature-host > *:not(.nature-bg){position:relative;z-index:2}

/* ══ second pass — APPEARANCE ONLY ═════════════════════════════════════════
   The first pass restyled 27 of the 72 classes this page emits and left the
   whole card interior in the old look. The obvious next move — write the missing
   layout — was wrong: page-meet-offline.css already defines 71 of those 72
   classes, including a complete responsive layout (.mo-card goes
   flex-direction:column under 560px, .mo-filter-adv is display:contents and
   collapses behind the Lọc toggle under 640px).

   A first attempt here did add layout and broke both: `flex:0 0 100%` on .mo-map
   beat the page's `flex:0 0 96px`, and because the container is column at that
   breakpoint, flex-basis is the MAIN size and the height:120px beside it was
   ignored — the map rendered 563px tall. `display:flex` on .mo-filter-adv beat
   the page's `display:none` mobile collapse, so the advanced filters could not
   be closed.

   So: no display, flex, grid, position, width, height, margin or padding below.
   Colour, border, and type only. The page keeps its layout; this changes how it
   looks. */

/* ── people bar ── */
.mo2-skin .mo-pf{border:2px solid #fff;font-weight:800;color:#fff}
.mo2-skin .mo-pf-ghost{background:#c7ccff}
.mo2-skin .mo-pf-more{background:var(--m2-ink);color:#fff;font-weight:800}
.mo2-skin .mo-people-bar-t{font-size:14px;line-height:1.5;font-weight:500;
  letter-spacing:normal;text-transform:none;color:var(--m2-ink)}
.mo2-skin .mo-people-bar-t b{font-weight:800}
.mo2-skin .mo-signin{font-size:13px;line-height:1.55;color:var(--m2-dim);font-weight:500;
  letter-spacing:normal;text-transform:none}

/* ── city headers ── */
.mo2-skin .mo-city{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--m2-lab)}
.mo2-skin .mo-city-mine{font-size:10px;letter-spacing:.12em;background:var(--m2-ink);color:#fff;
  border-radius:0;font-weight:800}

/* ── card interior ── */
.mo2-skin .mo-map{background:#eef0f4;border-right:2px solid var(--m2-ink);border-radius:0}
.mo2-skin .mo-map img{border-radius:0}
.mo2-skin .mo-map-pin{color:var(--m2-orange)}
.mo2-skin .mo-map-attr{background:rgba(255,255,255,.82);color:#555}
.mo2-skin .mo-map-none{background:#f4f5f7;color:var(--m2-lab);font-size:11px;line-height:1.35}
.mo2-skin .mo-place{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.mo2-skin .mo-place a{color:var(--m2-ink);text-decoration:none}
.mo2-skin .mo-place a:hover{text-decoration:underline;text-underline-offset:3px}
.mo2-skin .mo-ext{color:var(--m2-lab)}
.mo2-skin .mo-time{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--m2-ink);
  font-variant-numeric:tabular-nums}
.mo2-skin .mo-date{font-size:13.5px;font-weight:700;color:var(--m2-dim);
  font-variant-numeric:tabular-nums}
.mo2-skin .mo-rel{font-size:12.5px;font-weight:700;color:var(--m2-lab)}
.mo2-skin .mo-desc{font-size:13.5px;line-height:1.55;color:var(--m2-dim)}
.mo2-skin .mo-by{font-size:13px;line-height:1.55;color:var(--m2-dim)}
.mo2-skin .mo-by strong{color:var(--m2-ink);font-weight:800}
.mo2-skin .mo-people-t{font-size:12.5px;color:var(--m2-green);font-weight:700}
.mo2-skin .mo-people-t b{font-weight:800}
.mo2-skin .mo-flagged{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--m2-orange);border:1px solid var(--m2-orange);border-radius:0}
.mo2-skin .mo-card-side{border-left:1px solid var(--m2-hair);background:#fafafa}
.mo2-skin .mo-tally-n{font-size:26px;font-weight:800;letter-spacing:-.04em;color:var(--m2-ink);
  font-variant-numeric:tabular-nums}
.mo2-skin .mo-tally-l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--m2-lab)}
.mo2-skin .mo-tally-anon{font-size:10.5px;color:var(--m2-lab)}
.mo2-skin .mo-no{border:1px solid var(--m2-hair);border-radius:0;background:#fff;
  color:var(--m2-lab)}
.mo2-skin .mo-no:hover{border-color:var(--m2-orange);color:var(--m2-orange)}

/* ── filters ── */
.mo2-skin .mo-btn-submit{background:var(--m2-ink);color:#fff;border:2px solid var(--m2-ink);
  border-radius:0;font-weight:800}
.mo2-skin .mo-btn-submit:hover{background:#252525;border-color:#252525}
.mo2-skin .mo-search i{color:var(--m2-lab)}

/* ── create form ── */
.mo2-skin .mo-form label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--m2-dim)}
.mo2-skin .mo-form input,.mo2-skin .mo-form textarea{font-size:14.5px;font-weight:500;
  letter-spacing:normal;text-transform:none;color:var(--m2-ink)}
.mo2-skin .mo-opt{text-transform:none;letter-spacing:normal;font-weight:500;color:var(--m2-lab)}
.mo2-skin .mo-prev{border:2px solid var(--m2-hair);border-radius:0}
.mo2-skin .mo-prev-map{border:1px solid var(--m2-hair);border-radius:0}
.mo2-skin .mo-prev-txt{font-size:13px;line-height:1.5;color:var(--m2-dim)}
.mo2-skin .mo-btn-go{background:var(--m2-ink);color:#fff;border:2px solid var(--m2-ink)}
.mo2-skin .mo-btn-go:hover{background:#252525;border-color:#252525;color:#fff}
.mo2-skin .mo-btn-ghost{background:transparent;border:2px solid var(--m2-ink);color:var(--m2-ink);
  border-radius:0;font-weight:800}
.mo2-skin .mo-btn-ghost:hover{background:var(--m2-ink);color:#fff}
.mo2-skin .mo-note{font-size:12px;color:var(--m2-lab)}

/* ── status + empty ── */
.mo2-skin .mo-msg{font-size:13.5px;font-weight:700;color:var(--m2-ink)}
.mo2-skin .mo-empty{border:2px dashed var(--m2-hair);border-radius:0;background:#fafafa}
.mo2-skin .mo-empty i{color:var(--m2-lab)}
.mo2-skin .mo-empty p{font-size:15px;line-height:1.55;color:var(--m2-dim)}

/* ── goal sections this arm adds (mine alone — no page CSS to respect) ── */
.mo2-join{border:2px solid #0a0a0a;border-left-width:10px;border-left-color:#1a3aff;
  padding:clamp(20px,3vw,30px);margin-top:clamp(28px,4vw,44px);background:#fff}
.mo2-join-k{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#6b7280;margin-bottom:9px}
.mo2-join-t{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.16;
  margin:0;color:#0a0a0a}
.mo2-join-p{font-size:14.5px;line-height:1.6;color:#4b5563;margin:9px 0 0;max-width:62ch}
.mo2-join-btn{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:800;
  text-decoration:none;padding:12px 20px;border:2px solid #0a0a0a;background:#0a0a0a;color:#fff;
  border-radius:0}
.mo2-join-btn:hover{background:#252525;border-color:#252525;color:#fff;text-decoration:none}
.mo2-next{margin-top:clamp(28px,4vw,44px)}
.mo2-next-h{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;
  color:#0a0a0a}
.mo2-next-grid{display:grid;grid-template-columns:1fr;border:2px solid #0a0a0a}
@media (min-width:760px){ .mo2-next-grid{grid-template-columns:repeat(3,1fr)} }
.mo2-next-c{display:block;padding:18px 20px;text-decoration:none;color:#0a0a0a;
  border-bottom:1px solid #e6e6e6;background:#fff}
.mo2-next-c:last-child{border-bottom:0}
@media (min-width:760px){
  .mo2-next-c{border-right:1px solid #e6e6e6;border-bottom:0}
  .mo2-next-c:last-child{border-right:0}
}
.mo2-next-c:hover{background:#f6f7ff;text-decoration:none;color:#0a0a0a}
.mo2-next-c b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em}
.mo2-next-c span{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:#4b5563}