/* ============================================================
   RULES OF ENGAGEMENT PAGE — page-specific chrome only.
   Ported verbatim from `rules.jsx`'s inline <style> block (the reference
   defines this page's CSS inline in the component rather than in a
   shared file, unlike FAQ/legal) — everything below is built from the
   global tokens in colors_and_type.css.

   ~~SCOPE NOTE (Batch 1)~~ — RESOLVED. The Batch-1 note here deferred the
   `ModerationNotice` band to Batch 3, because it reads event-moderation
   state that did not exist yet. **That deferral was COLLECTED by FF-14
   (2026-08-26)**: the state shipped in sub-batch 3.1 and was completed by
   FF-10, and `.roe-notice-*` is now built below, port-complete against
   `rules.jsx:346-393`. `03_PAGE_DATA_CONTRACTS.md` §4.1's "No DB" was
   corrected with that item — still true of Privacy and Terms, no longer
   true of this page.
   ============================================================ */

.roe-shell { max-width: 1440px; margin: 0 auto; padding: var(--rhythm-80) 96px calc(var(--rhythm-96) + 16px); }
.roe-shell-inner { max-width: 1260px; display: flex; flex-direction: column; gap: calc(var(--rhythm-128) - 16px); }

/* Hero — same grid anatomy as the reference RulesHero. */
.roe-hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--rhythm-64); align-items: center;
}
.roe-report-mail-link {
  color: var(--couple-purple); font-weight: 700; text-decoration: none;
  border-bottom: var(--border-hairline) solid var(--couple-violet-soft);
  transition: border-color 140ms ease, color 140ms ease;
}
.roe-report-mail-link:hover { color: var(--couple-purple-hover); border-bottom-color: var(--couple-purple); }

/* SC-3 (2026-08-26) — the hero's image column. The ≤900 rule below has
   shipped since Batch 1 for a column the template never rendered; this is
   its base rule (Lesson 2: every ported class needs one v3 loads). The
   img's own box lives inline in the template, as `rules.jsx:186-190` has
   it. */
.roe-hero-image { position: relative; }

/* ===== FF-14 (2026-08-26) — the moderation notice. Port of
   `rules.jsx:346-393`. Sits in its own band just below the hero, for a
   member the live-event runtime redirected here after removing them from
   an event (`?code=&type=`).

   ⚠ This is NOT the top-banner slot, and must not be confused with it —
   SC-4 removed that slot from this page entirely (`Core\BannerSlot`).
   This band is page content: it renders inside the page template, below
   the hero, and answers a question about THIS member's last event rather
   than about the site.

   Per the Guide's "One red, and only for errors," red stays a text/mark
   color on a normal surface — so this is the standard card surface (white
   + hairline --lavender-border) with --couple-red carried only by the
   title and the outlined alert mark (a sibling to the zero-tolerance
   ProhibitionMark above). Reading-plate ruling — hugs its reading column
   (760 measure + the mark gutter + insets) and centers on the frame, like
   the zero-tolerance plate.

   ⚠ The fixed red is a DECISION, not a default (FF-14-D2, owner-ruled
   2026-08-26). `couple_blockCodesDefine.blockCodeColor` carries a real
   severity ramp — green for `temp`, orange for `event`, red for `perm` —
   and legacy paints its plate with it. v3 takes the design's single
   treatment for all six variants; severity is carried by the words and by
   whether a rejoin link is offered. ===== */
.roe-notice-band {
  max-width: 1440px; margin: 0 auto;
  padding: var(--rhythm-64) 96px 0;
}
.roe-notice {
  max-width: calc(var(--measure-intro) + 160px);
  margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: start;
  padding: 28px 32px;
  background: #fff;
  border: var(--border-hairline) solid var(--lavender-border);
  border-radius: var(--r-card);
}
.roe-notice-mark {
  width: 28px; height: 28px; flex-shrink: 0; display: block;
  margin-top: 2px;
}
.roe-notice-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.roe-notice-title {
  font: 700 var(--fs-h3)/1.3 var(--font-display);
  color: var(--couple-red);
  letter-spacing: -0.3px;
}
.roe-notice-body {
  font: var(--type-body-lg);
  color: var(--ink-700);
  margin: 0;
}
.roe-notice-link {
  color: var(--couple-purple); font-weight: 700; text-decoration: none;
  border-bottom: var(--border-hairline) solid var(--lavender-edge);
  transition: border-color 140ms ease, color 140ms ease;
}
.roe-notice-link:hover {
  color: var(--couple-purple-hover); border-bottom-color: var(--couple-purple);
  text-decoration: none;
}

/* General policies — neutral two-column dot list, no containers. Reuses
   the FAQ answer-list bullet (.faq-a-ul li::before): a 7px
   --couple-violet-soft dot drawn as a ::before, not an invented marker. */
.roe-policy-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px 64px;
}
.roe-policy-item {
  position: relative;
  padding-left: 26px;
}
.roe-policy-item::before {
  content: ""; position: absolute;
  left: 4px; top: 0.7em; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--couple-violet-soft);
}

/* Zero-tolerance — lavender section frame. */
.roe-zero-shell {
  background: var(--lavender);
  border-radius: var(--r-section);
  padding: var(--rhythm-80) 80px;
  max-width: calc(var(--measure-intro) + 194px);
  margin-inline: auto;
}
.roe-zero-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 24px;
  max-width: calc(var(--measure-intro) + 34px);
}
.roe-zero-item {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: start;
}
.roe-zero-mark {
  font-size: var(--fs-h3);
  width: 0.74em; height: 0.74em;
  flex-shrink: 0; display: block;
  margin-top: 0.27em;
}
.roe-zero-title {
  font: 700 var(--fs-h3)/1.3 var(--font-display);
  color: var(--couple-purple-dark);
  letter-spacing: -0.3px;
}

/* ===== Responsive — project 1100/900/768/640 cadence ===== */
@media (max-width: 1100px) {
  .roe-shell { padding: 80px 56px 96px; }
  .roe-zero-shell { padding: 64px 56px; }
  .roe-notice-band { padding-left: 56px; padding-right: 56px; }
}
@media (max-width: 900px) {
  .roe-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .roe-hero-image img { max-width: 600px; margin: 0 auto; }
  .roe-shell { padding: 64px 48px 80px; }
  .roe-shell-inner { gap: 88px; }
  .roe-policy-list { grid-template-columns: 1fr; gap: 20px; max-width: 760px; }
  .roe-notice-band { padding-left: 48px; padding-right: 48px; }
  .roe-zero-shell { padding: 56px 40px; border-radius: var(--r-card-lg); }
  .roe-zero-title { font-size: 20px !important; }
  .roe-zero-mark { font-size: 20px; }
}
@media (max-width: 640px) {
  .roe-shell { padding: 48px 20px 64px; }
  .roe-shell-inner { gap: 72px; }
  .roe-zero-shell { padding: 40px 24px; border-radius: var(--r-card); }
  .roe-zero-item { gap: 14px; }
  .roe-notice-band { padding-left: 20px; padding-right: 20px; }
  .roe-notice { padding: 24px 22px; gap: 14px; }
  .roe-notice-mark { width: 24px; height: 24px; }
}