/* ──────────────────────────────────────────────────────────────────────────
   Morning Paper — restyle preview (Session 47, D-055 candidate)
   Lives under /preview/morning/*. Self-contained: nothing here touches the
   live stylesheet. Tokens first; components set layout and colour but never
   re-declare type family or size (O-13 done right from the start).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --mp-paper:      #FBFAF7;
  --mp-paper-2:    #F0EDE5;   /* linen — own chat bubbles, pills */
  --mp-white:      #FFFFFF;
  --mp-ink:        #1C1B18;
  --mp-ink-2:      #3C3A34;
  --mp-ink-3:      #4E4B44;
  --mp-muted:      #8B877D;
  --mp-faint:      #A39E92;
  --mp-ghost:      #CFCAC0;
  --mp-rule:       #E6E2D8;
  --mp-rule-2:     #DAD6CB;
  --mp-ox:         #7A2E2B;   /* accent — used sparingly */
  --mp-ox-soft:    #F6E9E8;
  --mp-sage:       #3E5B45;   /* presence, check-in */
  --mp-sage-soft:  #E9EFE7;
  --mp-gold:       #9A7B3F;

  --mp-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --mp-font-ui:      "Figtree", "Helvetica Neue", Arial, sans-serif;

  --mp-t-hero:   58px;
  --mp-t-page:   44px;
  --mp-t-post:   34px;
  --mp-t-quote:  19px;
  --mp-t-body:   16.5px;
  --mp-t-ui:     14.5px;
  --mp-t-meta:   13px;
  --mp-t-label:  11px;

  --mp-r-sm: 4px;
  --mp-r-md: 14px;
  --mp-ease: 160ms ease-out;
}

/* ── base ─────────────────────────────────────────────────────────────── */
body.mp { margin: 0; background: var(--mp-paper); color: var(--mp-ink);
  font-family: var(--mp-font-ui); font-size: var(--mp-t-ui); line-height: 1.5;
  -webkit-font-smoothing: antialiased; }
body.mp a { color: inherit; text-decoration: none; }
body.mp [hidden] { display: none !important; }
body.mp a:hover { color: var(--mp-ox); }
.mp-display { font-family: var(--mp-font-display); font-weight: 400; letter-spacing: -0.012em; }
.mp-label { font-size: var(--mp-t-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mp-muted); font-weight: 600; }

/* ── preview banner ───────────────────────────────────────────────────── */
.mp-banner { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: 6px 48px; background: var(--mp-ink); color: var(--mp-paper); font-size: 12.5px; }
.mp-banner a { color: var(--mp-paper); text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.mp-banner a:hover { opacity: 1; color: var(--mp-paper); }

/* ── shell ────────────────────────────────────────────────────────────── */
.mp-page { position: relative; min-height: 100vh; }
.mp-sky { position: absolute; left: 0; top: 0; width: 100%; height: 360px; overflow: hidden; pointer-events: none; }
.mp-sky img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block;
  filter: saturate(.85); }
.mp-sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251,250,247,.22) 0%, rgba(251,250,247,.62) 40%, var(--mp-paper) 82%); }

.mp-top { position: relative; display: flex; align-items: center; gap: 24px; padding: 22px 48px;
  border-bottom: 1px solid rgba(28,27,24,.10); }
.mp-brand { display: flex; align-items: baseline; gap: 10px; }
.mp-brand-name { font-size: 24px; color: var(--mp-ink); }
.mp-brand-sub { font-size: 12px; color: var(--mp-muted); }
.mp-topnav { display: flex; gap: 26px; margin-left: 32px; color: var(--mp-ink-3); }
.mp-topnav a { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.mp-topnav a.is-current { color: var(--mp-ink); font-weight: 600; border-bottom-color: var(--mp-ox); }
.mp-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.mp-search { display: flex; align-items: center; gap: 8px; color: var(--mp-muted); font-size: 13.5px; }

.mp-grid { position: relative; display: grid; grid-template-columns: 200px minmax(0,1fr) 260px;
  gap: 56px; padding: 40px 48px 64px; }

/* column seams (mp_layout_controller) — a full-height strip centred on the
   gap between columns. Nothing shows until the pointer is over it: then a
   hairline runs the height of the page and a chevron notch sits at the top.
   On touch there is no hover, so the notch is always on. Collapsed, the seam
   moves to the page edge with the chevron pointing back in. */
.mp-seam { position: absolute; top: 0; bottom: 0; width: 24px; z-index: 3; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--mp-muted); }
.mp-seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px;
  background: var(--mp-rule-2); opacity: 0; transition: opacity .15s; }
.mp-seam-notch { position: absolute; top: 40px; left: 50%; width: 22px; height: 22px; margin-left: -11px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--mp-white); border: 1px solid var(--mp-rule-2); box-shadow: 0 1px 2px rgba(28,27,24,.08); opacity: 0; transition: opacity .15s; }
.mp-seam:hover::before, .mp-seam:focus-visible::before, .mp-seam:hover .mp-seam-notch, .mp-seam:focus-visible .mp-seam-notch { opacity: 1; }
.mp-seam:hover { color: var(--mp-ink); }
@media (pointer: coarse) { .mp-seam-notch { opacity: .85; } }
/* nav seam: centred on the 56px gap after the 200px column (48px page padding). */
.mp-seam--nav  { left: calc(48px + 200px + 28px - 12px); }
.mp-seam--rail { right: calc(48px + 260px + 28px - 12px); }
.mp-seam--rail .mp-seam-notch { transform: scaleX(-1); }
.mp-grid.nav-collapsed  .mp-seam--nav  { left: 0; }
.mp-grid.nav-collapsed  .mp-seam--nav  .mp-seam-notch { transform: scaleX(-1); }
.mp-grid.rail-collapsed .mp-seam--rail { right: 0; }
.mp-grid.rail-collapsed .mp-seam--rail .mp-seam-notch { transform: none; }
.mp-grid.nav-collapsed  .mp-seam--nav::before, .mp-grid.rail-collapsed .mp-seam--rail::before { display: none; }
.mp-grid.nav-collapsed  .mp-nav  { display: none; }
.mp-grid.rail-collapsed .mp-rail { display: none; }
.mp-grid.has-nav.has-rail.nav-collapsed:not(.rail-collapsed) { grid-template-columns: minmax(0,1fr) 260px; }
.mp-grid.has-nav.has-rail.rail-collapsed:not(.nav-collapsed) { grid-template-columns: 200px minmax(0,1fr); }
.mp-grid.has-nav.has-rail.nav-collapsed.rail-collapsed,
.mp-grid.has-nav:not(.has-rail).nav-collapsed { grid-template-columns: minmax(0,1fr); }

/* left nav */
.mp-nav { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
.mp-nav .mp-label { margin-left: -16px; padding: 22px 0 8px; }
.mp-nav .mp-label:first-child { padding-top: 0; }
.mp-nav a, .mp-nav .is-soon { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  color: var(--mp-ink-3); font-size: 15px; }
.mp-nav a.is-current { color: var(--mp-ink); font-weight: 600; }
.mp-nav a.is-current::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--mp-ox); margin-left: -16px; }
.mp-nav .is-soon { color: var(--mp-faint); }
.mp-nav-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mp-sage); }
.mp-nav-foot { margin-top: 28px; margin-left: -16px; font-size: 13px; color: var(--mp-muted);
  display: flex; gap: 8px; align-items: center; }

/* right rail */
.mp-rail { display: flex; flex-direction: column; gap: 30px; }
.mp-member { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.mp-member-name { font-size: 14px; }
a.mp-member:hover .mp-member-name { color: var(--mp-ox); }
.mp-member.is-online img, .mp-member.is-online .av { box-shadow: 0 0 0 2px var(--mp-paper), 0 0 0 3.5px var(--mp-sage); }
.mp-act { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--mp-rule); }
a.mp-act { text-decoration: none; color: inherit; }
a.mp-act:hover .mp-act-detail, a.mp-act:hover .mp-act-line b { color: var(--mp-ox); }
.mp-act-line { font-size: 13.5px; color: var(--mp-ink-2); }
.mp-act-line b { font-weight: 600; color: var(--mp-ink); }
.mp-act-detail { font-family: var(--mp-font-display); font-size: 16px; font-style: italic; color: var(--mp-ink-3); }
.mp-act-when { font-size: 11.5px; color: var(--mp-faint); }
.mp-cal { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mp-cal th { font-size: 10.5px; color: var(--mp-faint); font-weight: 500; padding-bottom: 6px; }
.mp-cal td { text-align: center; font-size: 12px; color: var(--mp-ink-3); padding: 5px 0; }
.mp-cal td.is-other { color: var(--mp-ghost); }
.mp-cal td a { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 999px; color: inherit; }
.mp-cal td a:hover { background: var(--mp-paper-2); color: var(--mp-ink); }
.mp-cal td.is-today a { background: var(--mp-ink); color: var(--mp-paper); font-weight: 600; }
.mp-cal td.is-today a:hover { background: #2C2A25; color: var(--mp-paper); }
.mp-cal td.has-event { position: relative; }
.mp-cal td.has-event::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--mp-sage); }

/* controls */
.mp-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background var(--mp-ease); }
.mp-btn--primary, body.mp a.mp-btn--primary { background: var(--mp-ink); color: var(--mp-paper); }
.mp-btn--primary:hover, body.mp a.mp-btn--primary:hover { background: #2C2A25; color: var(--mp-paper); }
.mp-btn--ghost { border: 1px solid var(--mp-rule-2); background: var(--mp-white); color: var(--mp-ink); }
.mp-btn--ghost:hover, body.mp a.mp-btn--ghost:hover { border-color: var(--mp-ink); color: var(--mp-ink); }
.mp-btn--ghost.is-on { background: var(--mp-ox-soft); border-color: transparent; color: var(--mp-ox); }
.mp-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--mp-r-sm);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; background: var(--mp-paper-2); color: #5A564D; }
.mp-pill--ox { background: var(--mp-ox-soft); color: var(--mp-ox); }
.mp-pill--sage { background: var(--mp-sage-soft); color: var(--mp-sage); }
/* initials fallback from app_avatar_tag (.av .av-<color>) — one paper-toned style, no gradients */
body.mp .av { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #EDE9E0 !important; border: 0 !important; color: var(--mp-ink-3); font-weight: 600; letter-spacing: .04em; }
.mp-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #EDE9E0; color: var(--mp-ink-3); font-weight: 600; font-size: 11px; flex: none; }
body.mp .app-avatar { border-radius: 999px; object-fit: cover; flex: none; }

/* ── page header (shared by sections) ─────────────────────────────────── */
.mp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 26px; }
.mp-head-titles { display: flex; flex-direction: column; gap: 8px; }
.mp-hero { margin: 0; font-size: clamp(36px, 3.6vw, var(--mp-t-hero)); line-height: .98; max-width: 22ch; text-wrap: balance; }
.mp-page-title { margin: 0; font-size: var(--mp-t-page); line-height: .98; }
.mp-scripture { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-bottom: 6px; text-align: right; }
.mp-scripture-text { font-family: var(--mp-font-display); font-style: italic; font-size: var(--mp-t-quote); color: var(--mp-ink-3); white-space: nowrap; }
.mp-filters { display: flex; gap: 22px; align-items: center; font-size: 13.5px; color: var(--mp-muted); padding-bottom: 6px; }
.mp-filters a.is-current { color: var(--mp-ink); font-weight: 600; border-bottom: 2px solid var(--mp-ink); padding-bottom: 6px; }
.mp-filters-count { margin-left: auto; }

/* ── prayer wall ──────────────────────────────────────────────────────── */
.mp-post { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 32px; padding: 30px 0; border-top: 1px solid var(--mp-rule); }
.mp-post-side { display: flex; flex-direction: column; gap: 10px; }
.mp-post-who { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.mp-post-when { font-size: 12.5px; color: var(--mp-muted); }
.mp-post-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-post-main { display: flex; flex-direction: column; gap: 12px; }
.mp-post-title { margin: 0; font-size: var(--mp-t-post); line-height: 1.1; text-wrap: pretty; }
.mp-post-body { font-size: var(--mp-t-body); line-height: 1.6; color: var(--mp-ink-2); max-width: 60ch; text-wrap: pretty; }
.mp-post-body p { margin: 0 0 .6em; } .mp-post-body p:last-child { margin-bottom: 0; }
.mp-post-actions { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.mp-link { font-size: 13.5px; color: var(--mp-ox); font-weight: 600; }
.mp-thread { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--mp-rule); margin-top: 6px; }
.mp-reply { display: flex; gap: 10px; align-items: flex-start; }
.mp-reply-body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.mp-reply-who { font-weight: 600; } .mp-reply-when { color: var(--mp-faint); font-size: 12px; margin-left: 6px; }
.mp-reply-text { margin: 0; color: var(--mp-ink-2); }
.mp-empty { padding: 40px 0; color: var(--mp-muted); border-top: 1px solid var(--mp-rule); }

/* ── discussion ───────────────────────────────────────────────────────── */
.mp-head--tight { padding-bottom: 18px; }
.mp-chat { display: flex; flex-direction: column; border-top: 1px solid var(--mp-rule); }
.mp-chat-scroll { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; margin: 0 -12px; max-height: calc(100vh - 360px); overflow-y: auto; }
.mp-chat-day { display: flex; align-items: center; gap: 14px; color: var(--mp-faint); font-size: var(--mp-t-label);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.mp-chat-day span { flex: 1; height: 1px; background: var(--mp-rule); }
.mp-msg { display: flex; gap: 12px; align-items: flex-end; }
.mp-msg--in { max-width: 72%; }
.mp-msg--out { justify-content: flex-end; }
.mp-msg--out .mp-msg-col { max-width: 72%; align-items: flex-end; }
.mp-msg-col { display: flex; flex-direction: column; gap: 5px; }
.mp-msg-meta { display: flex; align-items: center; gap: 8px; padding-left: 2px; font-size: 12.5px; font-weight: 600; }
.mp-bubble { padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 132px; }
.mp-msg--in  .mp-bubble { background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: 14px 14px 14px 4px; }
.mp-msg--out .mp-bubble { background: var(--mp-paper-2); border-radius: 14px 14px 4px 14px; }
.mp-msg-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--mp-ink); white-space: pre-wrap; text-wrap: pretty; }
.mp-msg-foot { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--mp-faint); white-space: nowrap; }
.mp-msg-time { margin-left: auto; }
.mp-msg-capture { display: inline-flex; align-items: center; gap: 5px; color: var(--mp-ghost); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; }
.mp-msg-del { display: none; background: none; border: 0; padding: 0 4px; font-size: 15px; line-height: 1; color: var(--mp-ghost); cursor: pointer; }
body.mp-admin .mp-msg-del { display: inline-flex; } .mp-msg-del:hover { color: var(--mp-ox); }
.mp-msg.is-focus .mp-msg-col { position: relative; isolation: isolate; }
.mp-msg.is-focus .mp-msg-col::before { content: ""; position: absolute; inset: -7px -10px; border-radius: 20px; border: 1.5px solid var(--mp-ox); background: var(--mp-ox-soft); opacity: .55; pointer-events: none; z-index: -1; }
.mp-msg.is-focus .mp-bubble { background: transparent; border-color: transparent; }
.mp-composer-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--mp-ink); background: none; border: 0; outline: none; resize: none; line-height: 1.4; padding: 8px 0; height: 37px; max-height: 160px; overflow-y: auto; box-sizing: border-box; }
.mp-composer-input::placeholder { color: var(--mp-faint); }
.mp-composer-send { border: 0; cursor: pointer; }
.mp-capture-panel { display: flex; flex-direction: column; gap: 10px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: 12px; padding: 14px 16px; margin: 8px 0; }
.mp-capture-panel form { display: flex; flex-direction: column; gap: 10px; }
.mp-msg-capture em { font-style: normal; display: none; }
.mp-msg:hover .mp-msg-capture { color: var(--mp-ox); }
.mp-msg:hover .mp-msg-capture em { display: inline; }
.mp-composer { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--mp-rule); }
/* 26px radius = a pill at one line (box is ~52px tall) and a rounded rect once the textarea grows — 999px turned tall boxes into ellipses. */
.mp-composer-box { display: flex; align-items: flex-end; gap: 10px; background: var(--mp-white); border: 1px solid var(--mp-rule-2);
  border-radius: 26px; padding: 6px 6px 6px 18px; }
.mp-composer-plus { color: var(--mp-faint); display: inline-flex; }
.mp-composer-ph { flex: 1; font-size: 15px; color: var(--mp-faint); }
.mp-composer-send { width: 38px; height: 38px; border-radius: 999px; background: var(--mp-ink); color: var(--mp-paper);
  display: inline-flex; align-items: center; justify-content: center; }
.mp-composer-note { font-size: 12px; color: var(--mp-faint); text-align: center; }

/* ── calendar ─────────────────────────────────────────────────────────── */
.mp-calgrid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 40px; align-items: start; }
.mp-month { display: flex; flex-direction: column; gap: 14px; }
.mp-month-head { display: flex; align-items: center; gap: 14px; }
.mp-month-name { font-size: 26px; white-space: nowrap; }
.mp-month-nav { color: var(--mp-muted); display: inline-flex; }
.mp-month-cells { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px; border-top: 1px solid var(--mp-rule); padding-top: 10px; }
.mp-dow { text-align: center; font-size: 10px; padding: 4px 0 8px; }
.mp-day { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 64px; padding-top: 8px; border-radius: 10px; font-size: 15px; color: var(--mp-ink); }
.mp-day:hover { background: var(--mp-white); color: var(--mp-ink); }
.mp-day.is-other { color: var(--mp-ghost); }
.mp-day.is-selected { background: var(--mp-white); box-shadow: 0 0 0 1px var(--mp-rule-2); }
.mp-day-num { height: 30px; display: inline-flex; align-items: center; }
.mp-day.is-today .mp-day-num { width: 30px; justify-content: center; border-radius: 999px; background: var(--mp-ink); color: var(--mp-paper); font-weight: 600; }
.mp-day-dots { display: flex; gap: 3px; height: 5px; }
.mp-dot { width: 5px; height: 5px; border-radius: 999px; display: inline-block; flex: none; }
.mp-dot--meeting { background: var(--mp-ox); } .mp-dot--checkin { background: var(--mp-sage); } .mp-dot--birthday { background: var(--mp-gold); }
.mp-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; white-space: nowrap; font-size: 12px; color: var(--mp-muted); padding-top: 6px; }
.mp-legend span { display: inline-flex; gap: 6px; align-items: center; }
.mp-calside { display: flex; flex-direction: column; gap: 26px; }
.mp-next { display: flex; flex-direction: column; gap: 8px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 18px 20px; }
.mp-next-date { margin: 0; font-size: 26px; line-height: 1.1; }
.mp-next-title { font-size: 15px; color: var(--mp-ink-2); }
.mp-next-meta { font-size: 13px; color: var(--mp-muted); }
.mp-up { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--mp-rule); }
.mp-up:first-of-type { border-top: 0; }
.mp-up-date { display: flex; flex-direction: column; align-items: center; width: 40px; flex: none; }
.mp-up-day { font-size: 24px; line-height: 1; }
.mp-up-body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; min-width: 0; }
.mp-up-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.mp-up-sub { font-size: 12.5px; color: var(--mp-muted); }
@media (max-width: 1400px) { .mp-calgrid { grid-template-columns: 1fr; } .mp-calside { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; } }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .mp-grid { grid-template-columns: 168px minmax(0,1fr) 224px; gap: 32px; padding: 32px 28px 56px; }
  .mp-seam-notch { top: 32px; }
  .mp-seam--nav  { left: calc(28px + 168px + 16px - 12px); }
  .mp-seam--rail { right: calc(28px + 224px + 16px - 12px); }
  .mp-grid.has-nav.has-rail.nav-collapsed:not(.rail-collapsed) { grid-template-columns: minmax(0,1fr) 224px; }
  .mp-grid.has-nav.has-rail.rail-collapsed:not(.nav-collapsed) { grid-template-columns: 168px minmax(0,1fr); }
  .mp-top, .mp-banner { padding-left: 28px; padding-right: 28px; }
  .mp-topnav { margin-left: 20px; gap: 18px; }
  .mp-post { grid-template-columns: 128px minmax(0,1fr); gap: 22px; }
}
@media (max-width: 1024px) {
  .mp-grid { grid-template-columns: 168px minmax(0,1fr); }
  .mp-rail, .mp-seam--rail { display: none; }
  .mp-grid.has-nav.nav-collapsed { grid-template-columns: minmax(0,1fr); }
}
/* ── mobile tab bar ───────────────────────────────────────────────────── */
.mp-tabbar { display: none; }
@media (max-width: 820px) {
  .mp-top, .mp-banner { padding-left: 20px; padding-right: 20px; }
  .mp-topnav, .mp-search { display: none; }
  .mp-grid { grid-template-columns: 1fr; padding: 24px 20px calc(48px + 72px + env(safe-area-inset-bottom)); }
  .mp-nav, .mp-seam { display: none; }
  .mp-hero { font-size: 40px; }
  .mp-post { grid-template-columns: 1fr; gap: 12px; }
  .mp-scripture { display: none; }
  .mp-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: stretch; justify-content: space-around;
    height: calc(64px + env(safe-area-inset-bottom)); padding: 4px 6px env(safe-area-inset-bottom); box-sizing: border-box;
    background: rgba(251,250,247,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--mp-rule); }
  .mp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px;
    color: var(--mp-muted); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; background: none; border: 0; padding: 0; cursor: pointer; }
  .mp-tab.is-current { color: var(--mp-ink); }
  .mp-tab.is-current svg { color: var(--mp-ox); }
  .mp-menu--up { top: auto; bottom: calc(100% + 8px); right: 8px; }
  body.mp .fb-widget { bottom: calc(76px + env(safe-area-inset-bottom)); left: 16px; }
  body.mp .fb-fab-label { display: none; }
  .mp-chat-scroll { max-height: calc(100vh - 420px); }
}

/* ── sign-in ──────────────────────────────────────────────────────────── */
.mp-login-body { min-height: 100vh; }
.mpl { display: grid; grid-template-columns: minmax(0,1fr) 560px; min-height: 100vh; }

.mpl-scene { position: relative; overflow: hidden; background: #6f7f92; }
.mpl-photo { position: absolute; inset: 0; }
.mpl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block;
  transform-origin: 50% 60%; animation: mpl-drift 40s ease-in-out infinite alternate; }
@keyframes mpl-drift { from { transform: scale(1.0) translateY(0); } to { transform: scale(1.08) translateY(-1.5%); } }
.mpl-scene-fade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,27,24,0) 55%, rgba(28,27,24,.18) 100%),
              linear-gradient(0deg, rgba(28,27,24,.55) 0%, rgba(28,27,24,.10) 40%, rgba(28,27,24,0) 60%); }
.mpl-scene-grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px; }
.mpl-verse { position: absolute; left: 56px; right: 56px; bottom: 56px; color: #FBFAF7;
  display: flex; flex-direction: column; gap: 14px; animation: mpl-rise 1.1s .25s cubic-bezier(.22,1,.36,1) both; }
.mpl-verse-text { margin: 0; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.12; font-weight: 300; font-style: italic;
  text-shadow: 0 1px 24px rgba(0,0,0,.25); text-wrap: balance; max-width: 22ch; }
.mpl-verse-ref { font-size: var(--mp-t-label); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }

.mpl-panel { position: relative; background: var(--mp-paper); display: flex; align-items: center; justify-content: center;
  padding: 48px 56px; }
.mpl-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--mp-rule); }
.mpl-panel-inner { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 36px; }
.mpl-brand { display: flex; align-items: center; gap: 16px; animation: mpl-rise .9s .05s cubic-bezier(.22,1,.36,1) both; }
.mpl-mark { width: 92px; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(28,27,24,.12)); }
.mpl-brand-text { display: flex; flex-direction: column; gap: 2px; }
.mpl-brand-name { font-size: 26px; line-height: 1; }
.mpl-brand-sub { font-size: 12.5px; color: var(--mp-muted); letter-spacing: .02em; }
.mpl-head { display: flex; flex-direction: column; gap: 8px; animation: mpl-rise .9s .15s cubic-bezier(.22,1,.36,1) both; }
.mpl-title { margin: 0; font-size: 52px; line-height: .98; letter-spacing: -.015em; }
.mpl-lede { margin: 0; font-size: 16px; color: var(--mp-ink-3); }
.mpl-flash { margin: -12px 0 0; padding: 10px 14px; border-radius: var(--mp-r-sm); background: var(--mp-ox-soft); color: var(--mp-ox); font-size: 13.5px; }
.mpl-flash--ok { background: var(--mp-sage-soft); color: var(--mp-sage); }
.mpl-form { display: flex; flex-direction: column; gap: 26px; animation: mpl-rise .9s .28s cubic-bezier(.22,1,.36,1) both; }
.mpl-field { display: flex; flex-direction: column; gap: 8px; }
.mpl-field input { font: inherit; font-size: 17px; color: var(--mp-ink); background: transparent; border: 0;
  border-bottom: 1px solid var(--mp-rule-2); padding: 8px 0 10px; outline: none; border-radius: 0;
  transition: border-color var(--mp-ease); }
.mpl-field input::placeholder { color: var(--mp-ghost); }
.mpl-field input:focus { border-bottom-color: var(--mp-ink); }
.mpl-field:focus-within .mp-label { color: var(--mp-ink); }
.mpl-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.mpl-remember { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--mp-ink-3); }
.mpl-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.mpl-check { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--mp-rule-2); background: var(--mp-white);
  display: inline-flex; align-items: center; justify-content: center; transition: all var(--mp-ease); }
.mpl-remember input:checked + .mpl-check { background: var(--mp-ink); border-color: var(--mp-ink); }
.mpl-remember input:checked + .mpl-check::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--mp-paper);
  border-bottom: 2px solid var(--mp-paper); transform: translateY(-1px) rotate(-45deg); }
.mpl-remember input:focus-visible + .mpl-check { box-shadow: 0 0 0 3px var(--mp-ox-soft); }
.mpl-submit { width: 100%; height: 48px; font-size: 15px; border: 0; justify-content: center; }
.mpl-foot { margin: 0; font-family: var(--mp-font-display); font-style: italic; font-size: 15px; color: var(--mp-muted);
  animation: mpl-rise .9s .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes mpl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mpl-photo img, .mpl-verse, .mpl-brand, .mpl-head, .mpl-form, .mpl-foot { animation: none; }
}
@media (max-width: 960px) {
  .mpl { grid-template-columns: 1fr; grid-template-rows: 42vh minmax(0,1fr); }
  .mpl-verse { left: 24px; right: 24px; bottom: 24px; }
  .mpl-verse-text { font-size: 24px; }
  .mpl-panel { padding: 32px 24px 48px; align-items: flex-start; }
  .mpl-panel::before { display: none; }
  .mpl-title { font-size: 40px; }
}
.mpl-field input:-webkit-autofill, .mpl-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--mp-paper) inset; -webkit-text-fill-color: var(--mp-ink);
  caret-color: var(--mp-ink); transition: background-color 9999s ease-out 0s; }

/* ── pathway ──────────────────────────────────────────────────────────── */
.mp-path-head { padding-bottom: 22px; }
.mp-path-hero { display: flex; gap: 32px; align-items: flex-start; }
.mp-cover { width: 150px; height: auto; flex: none; border-radius: 6px; box-shadow: 0 10px 28px -12px rgba(28,27,24,.45), 0 0 0 1px rgba(28,27,24,.06); }
.mp-path-author { font-size: 15px; color: var(--mp-muted); }
.mp-path-desc { margin: 6px 0 0; font-size: var(--mp-t-body); line-height: 1.55; color: var(--mp-ink-2); max-width: 58ch; text-wrap: pretty; }
.mp-path-attr { font-size: 12.5px; color: var(--mp-faint); }
.mp-path-progress { display: flex; align-items: center; gap: 16px; padding: 14px 0 22px; border-top: 1px solid var(--mp-rule); }
.mp-bar { flex: 1; max-width: 320px; height: 3px; background: var(--mp-rule); border-radius: 2px; overflow: hidden; }
.mp-bar-fill { height: 100%; background: var(--mp-ink); }
.mp-continue { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--mp-white);
  border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 20px 24px; margin-bottom: 36px; }
.mp-continue-body { display: flex; flex-direction: column; gap: 6px; }
.mp-continue-title { margin: 0; font-size: 26px; line-height: 1.1; }
.mp-trail { display: flex; flex-direction: column; gap: 40px; }
.mp-part { display: flex; flex-direction: column; gap: 18px; }
.mp-part.is-locked { opacity: .55; }
.mp-part-head { display: flex; gap: 22px; align-items: flex-start; }
.mp-part-num { font-size: 44px; line-height: 1; color: var(--mp-ghost); width: 56px; flex: none; text-align: right; }
.mp-part-titles { display: flex; flex-direction: column; gap: 6px; }
.mp-part-title { margin: 0; font-size: 30px; line-height: 1.1; }
.mp-part-desc { margin: 0; color: var(--mp-ink-2); max-width: 58ch; text-wrap: pretty; }
.mp-chapters { list-style: none; margin: 0; padding: 0 0 0 78px; display: flex; flex-direction: column; position: relative; }
.mp-chapters::before { content: ""; position: absolute; left: 89px; top: 14px; bottom: 14px; width: 1px; background: var(--mp-rule); }
.mp-ch { display: flex; align-items: center; gap: 16px; position: relative; }
.mp-ch-node { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--mp-paper); border: 1px solid var(--mp-rule-2); color: var(--mp-muted); flex: none; z-index: 1; }
.mp-ch.is-done .mp-ch-node { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-paper); }
.mp-ch.is-open .mp-ch-node { border-color: var(--mp-ox); color: var(--mp-ox); }
.mp-ch.is-locked .mp-ch-node { color: var(--mp-ghost); border-style: dashed; }
.mp-ch-link { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mp-rule); font-size: 15.5px; }
.mp-ch:last-child .mp-ch-link { border-bottom: 0; }
.mp-ch.is-locked .mp-ch-link { color: var(--mp-faint); }
a.mp-ch-link:hover .mp-ch-title { color: var(--mp-ox); }
.mp-ch-meta { font-size: 12px; color: var(--mp-muted); letter-spacing: .04em; text-transform: uppercase; }
.mp-ch.is-open .mp-ch-meta { color: var(--mp-ox); font-weight: 600; }

/* ── chapter ──────────────────────────────────────────────────────────── */
.mp-crumb { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--mp-muted); padding-bottom: 18px; }
.mp-crumb a { color: var(--mp-ox); font-weight: 600; }
.mp-crumb-sep { color: var(--mp-ghost); }
.mp-chapter { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 40px; align-items: start; border-top: 1px solid var(--mp-rule); padding-top: 24px; }
.mp-steps { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; }
.mp-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mp-step-link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--mp-rule); }
.mp-step:first-child .mp-step-link { border-top: 0; }
.mp-step-n { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--mp-rule-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--mp-muted); flex: none; }
.mp-step.is-current .mp-step-n { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-paper); }
.mp-step.is-past .mp-step-n { border-color: var(--mp-ink); color: var(--mp-ink); }
.mp-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp-step-type { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-faint); font-weight: 600; }
.mp-step-title { font-size: 13.5px; color: var(--mp-ink-3); }
.mp-step.is-current .mp-step-title { color: var(--mp-ink); font-weight: 600; }
.mp-section { display: flex; flex-direction: column; gap: 18px; max-width: 66ch; }
.mp-section-type { color: var(--mp-ox); }
.mp-section-title { margin: -8px 0 0; font-size: 34px; line-height: 1.1; }
.mp-prose { font-family: var(--mp-font-display); font-size: 19px; line-height: 1.6; color: var(--mp-ink); }
.mp-prose p { margin: 0 0 1em; } .mp-prose p:last-child { margin-bottom: 0; }
.mp-prose h1, .mp-prose h2, .mp-prose h3 { font-weight: 500; line-height: 1.2; margin: 1.4em 0 .5em; }
.mp-prose h3 { font-size: 22px; }
.mp-prose blockquote { margin: 1em 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--mp-rule-2); color: var(--mp-ink-3); font-style: italic; }
.mp-prose ul, .mp-prose ol { padding-left: 1.3em; } .mp-prose li { margin: .3em 0; }
.mp-prose strong { font-weight: 600; }
body.mp .mp-prose.learn-reading-truncated { max-height: 22em; overflow: hidden; position: relative; }
body.mp .mp-prose.learn-reading-truncated::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; background: linear-gradient(180deg, rgba(251,250,247,0), var(--mp-paper)); }
.mp-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--mp-ox); align-self: flex-start; margin-top: 8px; }
.mp-q { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--mp-rule); }
.mp-q-text { margin: 0; font-size: 16.5px; color: var(--mp-ink); line-height: 1.5; }
.mp-textarea { font: inherit; font-size: 15.5px; line-height: 1.55; color: var(--mp-ink); background: var(--mp-white); border: 1px solid var(--mp-rule-2);
  border-radius: 10px; padding: 12px 14px; resize: vertical; outline: none; min-height: 96px; }
.mp-textarea:focus { border-color: var(--mp-ink); }
.mp-saved { display: none; font-size: 12px; color: var(--mp-sage); align-self: flex-end; }
.mp-section-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--mp-rule); }
@media (max-width: 1024px) { .mp-chapter { grid-template-columns: 1fr; } .mp-steps { position: static; } }

/* ── shell: menus, flash, notices ─────────────────────────────────────── */
.mp-brand:hover { color: inherit; }
.mp-topnav-btn { font: inherit; background: none; border: 0; padding: 0 0 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--mp-ink-3); }
.mp-topnav .is-current { color: var(--mp-ink); font-weight: 600; border-bottom: 2px solid var(--mp-ox); padding-bottom: 4px; }
.mp-menu-wrap { position: relative; }
.mp-avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; border-radius: 999px; }
.mp-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: 12px;
  box-shadow: 0 12px 32px -16px rgba(28,27,24,.35); padding: 6px; z-index: 30; display: flex; flex-direction: column; }
.mp-menu-form { display: contents; }
.mp-menu-item { display: flex; flex-direction: column; gap: 1px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; font-size: 14px; color: var(--mp-ink); background: none; border: 0; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.mp-menu-item:hover { background: var(--mp-paper); color: var(--mp-ink); }
.mp-menu-item.is-current { font-weight: 600; cursor: default; }
.mp-menu-sub { font-size: 11px; color: var(--mp-faint); font-weight: 400; }
.mp-flash-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px; }
.mp-flash { padding: 10px 16px; border-radius: 999px; background: var(--mp-ink); color: var(--mp-paper); font-size: 13.5px; box-shadow: 0 10px 30px -12px rgba(28,27,24,.5); }
.mp-flash--ok { background: var(--mp-sage); }
.mp-notice { position: relative; display: flex; gap: 16px; align-items: flex-start; background: var(--mp-white); border: 1px solid var(--mp-rule); border-left: 3px solid var(--mp-sage); border-radius: 10px; padding: 14px 44px 14px 18px; margin-bottom: 24px; font-size: 14.5px; line-height: 1.5; color: var(--mp-ink-2); }
.mp-notice p { margin: 0; } .mp-notice a { color: var(--mp-ox); font-weight: 600; }
.mp-notice-x { position: absolute; right: 8px; top: 8px; background: none; border: 0; font-size: 18px; color: var(--mp-faint); cursor: pointer; padding: 4px 8px; }
body.mp .coming-soon-toast { background: var(--mp-ink); color: var(--mp-paper); border: 0; }
.mp-nav .nav-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--mp-sage); margin-left: 8px; vertical-align: middle; }
.mp-nav a.is-current .nav-dot { display: none; }
body.mp-no-rail .mp-grid { grid-template-columns: 200px minmax(0,1fr); }

/* ── wall: compose, forms, thread ─────────────────────────────────────── */
.mp-compose { display: flex; flex-direction: column; gap: 12px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 20px 22px; margin-bottom: 26px; }
.mp-compose form { display: flex; flex-direction: column; gap: 12px; }
.mp-compose-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mp-seg { display: inline-flex; gap: 4px; background: var(--mp-paper-2); border-radius: 999px; padding: 3px; align-self: flex-start; }
.mp-seg-opt { position: relative; }
.mp-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-seg-opt span, .mp-seg-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--mp-muted); background: none; border: 0; cursor: pointer; }
.mp-seg-opt input:checked + span, .mp-seg-btn.is-on { background: var(--mp-white); color: var(--mp-ink); box-shadow: 0 1px 2px rgba(28,27,24,.08); }
.mp-input { font: inherit; font-size: 15.5px; color: var(--mp-ink); background: var(--mp-white); border: 1px solid var(--mp-rule-2); border-radius: 10px; padding: 10px 14px; outline: none; width: 100%; box-sizing: border-box; }
.mp-input:focus, .mp-textarea:focus { border-color: var(--mp-ink); }
.mp-input--title { font-family: var(--mp-font-display); font-size: 22px; padding: 8px 14px; }
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--mp-faint); }
.mp-textarea { width: 100%; box-sizing: border-box; }
.mp-inline-form { display: contents; }
.mp-btn { border: 0; font-family: inherit; }
.mp-btn--sq { width: 40px; height: 40px; padding: 0; justify-content: center; flex: none; }
.mp-count { color: var(--mp-muted); font-weight: 500; }
.mp-post-main { position: relative; }
.mp-post-x { position: absolute; right: 0; top: -6px; color: var(--mp-ghost); font-size: 20px; line-height: 1; padding: 4px 6px; }
.mp-post-x:hover { color: var(--mp-ox); }
.mp-capture { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mp-ghost); }
.mp-capture em { font-style: normal; display: none; }
.mp-post:hover .mp-capture { color: var(--mp-ox); } .mp-post:hover .mp-capture em { display: inline; }
@media (hover: none) { .mp-capture { color: var(--mp-ox); } .mp-capture em { display: inline; } }
.mp-faces { display: flex; align-items: center; padding-top: 4px; }
.mp-faces img, .mp-faces .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--mp-paper); } .mp-faces img:first-child, .mp-faces .av:first-child { margin-left: 0; }
.mp-faces-more { font-size: 11px; color: var(--mp-muted); margin-left: 6px; }
.mp-card-form { display: flex; flex-direction: column; gap: 10px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: 12px; padding: 14px 16px; margin-top: 4px; }
.mp-card-form form { display: flex; flex-direction: column; gap: 10px; }
.mp-card-form[hidden] { display: none; }
.mp-reply-tag { font-size: 11px; color: var(--mp-ox); font-weight: 600; margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }
.mp-reply--prayer .mp-reply-text { font-family: var(--mp-font-display); font-style: italic; font-size: 16px; }
.mp-reply-x { background: none; border: 0; color: var(--mp-ghost); font-size: 15px; line-height: 1; padding: 0 4px; margin-left: 4px; cursor: pointer; }
.mp-reply-x:hover { color: var(--mp-ox); }
.mp-reply-actions { display: flex; gap: 12px; align-items: center; padding-top: 2px; }
.mp-reply-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mp-muted); cursor: pointer; }
.mp-reply-btn:hover { color: var(--mp-ox); }
.mp-replies { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 0 4px; border-left: 2px solid var(--mp-rule); margin: 4px 0 0 -2px; padding-left: 12px; }
.mp-reply--nested { font-size: 13.5px; }
.mp-thread-reply { padding-top: 8px; } .mp-thread-reply[hidden] { display: none; }
.mp-thread-reply-form { display: flex; gap: 8px; align-items: center; }

/* ── calendar: live ───────────────────────────────────────────────────── */
.mp-day-detail { display: flex; flex-direction: column; }
.mp-up-actions { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.mp-up-actions .mp-linkbtn { margin-top: 0; align-self: auto; }
.mp-up-actions .mp-capture--evt { font-size: 13.5px; }
.mp-link--muted { color: var(--mp-muted); } .mp-link--muted:hover { color: var(--mp-ox); }
.mp-capture--evt { margin-left: 0; color: var(--mp-muted); } .mp-capture--evt em { display: inline; }
.mp-evt-pray-form { margin-top: 10px; }
.mp-compose .mp-field-error { font-size: 13px; line-height: 1.4; color: var(--mp-ox); padding: 8px 12px; border-radius: 8px; background: var(--mp-ox-soft); }
.mp-compose .mp-field-error[hidden] { display: none; }
.mp-compose select.mp-input { appearance: none; -webkit-appearance: none; cursor: pointer; height: 100%; padding-right: 34px;
  background: var(--mp-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='rgba(28,27,24,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center; }
.mp-input.is-invalid { border-color: var(--mp-ox); box-shadow: 0 0 0 2px var(--mp-ox-soft); }
.mp-calside .mp-next { margin-bottom: 0; }

/* ── feedback widget (shared/_feedback_widget) on paper ───────────────── */
body.mp .fb-widget { position: fixed; left: 24px; bottom: 24px; z-index: 30; }
body.mp .fb-fab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--mp-white); border: 1px solid var(--mp-rule-2); color: var(--mp-ink-3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px -12px rgba(28,27,24,.4); }
body.mp .fb-fab:hover { border-color: var(--mp-ink); color: var(--mp-ink); }
body.mp .fb-dialog { border: 1px solid var(--mp-rule); border-radius: 16px; padding: 22px 24px; background: var(--mp-paper); color: var(--mp-ink); width: min(440px, 92vw); box-shadow: 0 30px 60px -30px rgba(28,27,24,.5); font-family: var(--mp-font-ui); }
body.mp .fb-dialog::backdrop { background: rgba(28,27,24,.35); }
body.mp .fb-title { margin: 0 0 4px; font-family: var(--mp-font-display); font-size: 24px; }
body.mp .fb-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--mp-muted); }
body.mp .fb-dialog textarea, body.mp .fb-dialog input[type=text] { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--mp-ink); background: var(--mp-white); border: 1px solid var(--mp-rule-2); border-radius: 10px; padding: 10px 12px; outline: none; }
body.mp .fb-dialog textarea:focus { border-color: var(--mp-ink); }
body.mp .fb-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }
body.mp .fb-btn { height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--mp-rule-2); background: var(--mp-white); color: var(--mp-ink); }
body.mp .fb-btn--send { background: var(--mp-ink); color: var(--mp-paper); border-color: var(--mp-ink); }
@media (max-width: 1400px) { .mp-calside { align-items: start; } }

/* ── members ──────────────────────────────────────────────────────────── */
.mp-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; border-top: 1px solid var(--mp-rule); padding-top: 22px; }
.mp-member-card { display: flex; flex-direction: column; gap: 12px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 16px 18px; }
.mp-member-card-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mp-member-card-main:hover .mp-member-card-name { color: var(--mp-ox); }
.mp-member-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-member-card-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-member-card-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mp-muted); }
.mp-member-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--mp-rule); font-size: 12.5px; color: var(--mp-muted); }
.mp-member-card-actions { display: flex; gap: 12px; flex: none; }
.mp-profile { display: flex; gap: 28px; align-items: center; padding-bottom: 28px; }
.mp-avatar-remove { margin-top: 10px; }
.mp-file { font: inherit; font-size: 14px; color: var(--mp-ink-2, var(--mp-ink)); }
.mp-file::file-selector-button { font: inherit; font-size: 14px; height: 36px; padding: 0 14px; margin-right: 12px; border-radius: 999px; border: 1px solid var(--mp-rule-2); background: var(--mp-white); color: var(--mp-ink); cursor: pointer; }
.mp-file::file-selector-button:hover { border-color: var(--mp-ink); }
.mp-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; margin: 0; border-top: 1px solid var(--mp-rule); }
.mp-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--mp-rule); }
.mp-facts-wide { grid-column: 1 / -1; }
.mp-facts dd { margin: 0; font-size: 16px; color: var(--mp-ink); }

/* ── check-in hub (ch-* markup from check_in_hub views) ────────────────── */
body.mp .ch-content { display: flex; flex-direction: column; gap: 22px; }
body.mp .ch-ingredients .mp-scripture-text { font-size: 16px; }
body.mp .ch-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 22px 26px; }
body.mp .ch-cta-left { display: flex; flex-direction: column; gap: 6px; }
body.mp .ch-cta-eyebrow { font-size: var(--mp-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-ox); font-weight: 600; }
body.mp .ch-cta-title { font-family: var(--mp-font-display); font-size: 28px; line-height: 1.1; }
body.mp .ch-cta-note { color: var(--mp-ink-3); font-size: 14.5px; }
body.mp .ch-cta-meta { display: flex; gap: 28px; padding-top: 10px; }
body.mp .ch-cta-stat { display: flex; flex-direction: column; gap: 2px; }
body.mp .ch-cta-stat b { font-family: var(--mp-font-display); font-size: 22px; font-weight: 400; line-height: 1; }
body.mp .ch-cta-stat span { font-size: 12px; color: var(--mp-muted); }
body.mp .ch-cta-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--mp-ink); color: var(--mp-paper); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
body.mp .ch-cta-btn:hover { background: #2C2A25; color: var(--mp-paper); }
body.mp .ch-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--mp-rule); }
body.mp .ch-tab { background: none; border: 0; padding: 0 0 10px; font: inherit; font-size: 13.5px; color: var(--mp-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
body.mp .ch-tab.active { color: var(--mp-ink); font-weight: 600; border-bottom-color: var(--mp-ink); }
body.mp .ch-pane { display: none; } body.mp .ch-pane.active { display: block; }
body.mp .ch-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0 8px; }
body.mp .ch-board-title { margin: 0; font-family: var(--mp-font-display); font-weight: 400; font-size: 24px; }
body.mp .ch-board-meta { font-size: 12.5px; color: var(--mp-muted); }
body.mp .ch-rows { display: flex; flex-direction: column; }
body.mp .ch-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--mp-rule); color: var(--mp-ink); }
body.mp .ch-row.is-focus { scroll-margin-top: 96px; position: relative; isolation: isolate; }
body.mp .ch-row.is-focus::before { content: ""; position: absolute; inset: 6px -16px; border-radius: 16px; border: 1.5px solid var(--mp-ox); background: var(--mp-ox-soft); opacity: .55; pointer-events: none; z-index: -1; }
body.mp a.ch-row:hover .ch-row-name { color: var(--mp-ox); }
body.mp .ch-row.muted, body.mp .ch-row.waiting { color: var(--mp-muted); }
body.mp .ch-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
body.mp .ch-row-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
body.mp .ch-row-when { font-size: 12.5px; color: var(--mp-muted); }
body.mp .ch-row-teaser { font-size: 13.5px; color: var(--mp-ink-3); display: flex; gap: 8px; align-items: baseline; }
body.mp .ch-row-teaser.draft { color: var(--mp-ox); }
body.mp .ch-rt-q { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-ox); font-weight: 600; }
body.mp .ch-row-locked { font-size: 12.5px; color: var(--mp-faint); display: flex; gap: 6px; align-items: center; }
body.mp .ch-row-right { display: flex; align-items: center; gap: 12px; flex: none; }
body.mp .ch-lead-tag, body.mp .ch-you-tag { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--mp-sage-soft); color: var(--mp-sage); }
body.mp .ch-you-tag { background: var(--mp-paper-2); color: var(--mp-muted); }
body.mp .ch-mood-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--mp-paper-2); color: var(--mp-ink-3); }
body.mp .ch-vis { font-size: 12px; color: var(--mp-muted); display: inline-flex; gap: 4px; align-items: center; }
body.mp .ch-status { font-size: 12px; color: var(--mp-sage); display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
body.mp .ch-status.draft { color: var(--mp-ox); }
body.mp .ch-chevron { color: var(--mp-ghost); display: inline-flex; }
body.mp .ch-start-link { font-size: 13px; font-weight: 600; color: var(--mp-ox); }
body.mp .ch-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 0; border-top: 1px solid var(--mp-rule); }
body.mp .ch-empty-ic { color: var(--mp-ox); }
body.mp .ch-empty-title { font-family: var(--mp-font-display); font-size: 24px; }
body.mp .ch-empty-note { margin: 0; color: var(--mp-ink-3); max-width: 56ch; }
body.mp .ch-empty-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--mp-ink); color: var(--mp-paper); font-weight: 600; font-size: 13.5px; margin-top: 6px; }
/* detail */
body.mp .ch-detail-topbar { display: flex; align-items: center; justify-content: space-between; }
body.mp .ch-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mp-ox); }
body.mp .ch-detail-actions { display: flex; gap: 14px; align-items: center; }
body.mp .ch-action { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--mp-muted); background: none; border: 0; cursor: pointer; padding: 0; }
body.mp .ch-action:hover { color: var(--mp-ink); } body.mp .ch-action-danger:hover { color: var(--mp-ox); }
body.mp .ch-detail-card { display: flex; flex-direction: column; gap: 22px; }
body.mp .ch-detail-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--mp-rule); }
body.mp .ch-detail-who { display: flex; flex-direction: column; gap: 3px; flex: 1; }
body.mp .ch-detail-name { font-family: var(--mp-font-display); font-size: 28px; display: flex; align-items: center; gap: 10px; }
body.mp .ch-detail-when { font-size: 13px; color: var(--mp-muted); }
body.mp .ch-detail-stage { display: flex; flex-direction: column; gap: 14px; }
body.mp .ch-detail-k { margin: 0; font-size: var(--mp-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-ox); font-weight: 600; }
body.mp .ch-detail-qa { display: flex; flex-direction: column; gap: 6px; }
body.mp .ch-detail-q { font-size: 14px; font-weight: 600; color: var(--mp-ink-3); }
body.mp .ch-detail-v { font-family: var(--mp-font-display); font-size: 18px; line-height: 1.55; color: var(--mp-ink); }
body.mp .ch-detail-v p { margin: 0 0 .5em; } body.mp .ch-detail-v p:last-child { margin: 0; }
body.mp .ch-detail-support { background: var(--mp-white); border: 1px solid var(--mp-rule); border-left: 3px solid var(--mp-ox); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
body.mp .ch-detail-support-q { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--mp-ox); }
body.mp .ch-detail-vis { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--mp-muted); padding-top: 8px; border-top: 1px solid var(--mp-rule); }

/* ── check-in stepper (cf-* markup from checkin_flow/show) ─────────────── */
body.mp .cf-content { max-width: 720px; }
body.mp .cf-form { display: flex; flex-direction: column; gap: 18px; }
body.mp .cf-stepper { display: flex; gap: 8px; align-items: center; }
body.mp .cf-dot { width: 40px; height: 3px; border-radius: 2px; background: var(--mp-rule); transition: background var(--mp-ease); }
body.mp .cf-dot.now { background: var(--mp-ox); } body.mp .cf-dot.done { background: var(--mp-ink); }
body.mp .cf-step-label { font-size: var(--mp-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-muted); font-weight: 600; margin-top: -8px; }
body.mp .cf-step { display: flex; flex-direction: column; gap: 10px; }
body.mp .cf-step-title { margin: 0; font-family: var(--mp-font-display); font-weight: 400; font-size: 48px; line-height: .98; letter-spacing: -.012em; }
body.mp .cf-step-sub { margin: 0; font-size: 17px; color: var(--mp-ink-2); }
body.mp .cf-ogden { margin: 0 0 8px; font-family: var(--mp-font-display); font-style: italic; font-size: 17px; color: var(--mp-muted); }
body.mp .cf-card { display: flex; flex-direction: column; gap: 18px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 22px 24px; margin-top: 8px; }
body.mp .cf-tag { margin: 0; font-size: var(--mp-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-ox); font-weight: 600; }
body.mp .cf-moods { display: flex; flex-wrap: wrap; gap: 8px; }
body.mp .cf-mood { font: inherit; font-size: 13.5px; font-weight: 600; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--mp-rule-2); background: var(--mp-paper); color: var(--mp-ink-3); cursor: pointer; }
body.mp .cf-mood.sel { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-paper); }
body.mp .cf-qcols { display: flex; flex-direction: column; gap: 22px; }
body.mp .cf-q { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--mp-rule); }
body.mp .cf-moods + .cf-qcols .cf-q:first-child { border-top: 0; padding-top: 6px; }
body.mp .cf-q-label { margin: 0; font-size: var(--mp-t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--mp-muted); font-weight: 600; display: flex; gap: 10px; align-items: center; }
body.mp .cf-rotates { font-size: 10px; letter-spacing: .04em; text-transform: none; padding: 1px 7px; border-radius: 4px; background: var(--mp-paper-2); color: var(--mp-muted); font-weight: 600; }
body.mp .cf-q-text { margin: 0; font-size: 16.5px; color: var(--mp-ink); line-height: 1.5; }
body.mp .cf-q-scripture { margin: 0; font-family: var(--mp-font-display); font-style: italic; font-size: 15.5px; color: var(--mp-ink-3); }
body.mp .cf-q-ref { font-family: var(--mp-font-ui); font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-faint); margin-left: 8px; }
body.mp .cf-q textarea { font: inherit; font-size: 15.5px; line-height: 1.55; color: var(--mp-ink); background: var(--mp-paper); border: 1px solid var(--mp-rule-2); border-radius: 10px; padding: 12px 14px; min-height: 96px; resize: vertical; outline: none; margin-top: 4px; }
body.mp .cf-q textarea:focus { border-color: var(--mp-ink); background: var(--mp-white); }
body.mp .cf-sumrow { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--mp-rule); }
body.mp .cf-sum-k { font-size: 13px; color: var(--mp-muted); font-weight: 600; }
body.mp .cf-sum-v { font-family: var(--mp-font-display); font-size: 17px; }
body.mp .cf-vis-title { margin: 0; font-family: var(--mp-font-display); font-size: 24px; }
body.mp .cf-vis-help { margin: 0; font-size: 14px; color: var(--mp-ink-3); }
body.mp .cf-seg { display: flex; flex-direction: column; gap: 8px; }
body.mp .cf-seg-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--mp-rule-2); background: var(--mp-paper); color: var(--mp-ink); cursor: pointer; }
body.mp .cf-seg-opt.sel { border-color: var(--mp-ink); background: var(--mp-white); box-shadow: 0 0 0 1px var(--mp-ink); }
body.mp .cf-seg-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
body.mp .cf-seg-desc { font-size: 13px; color: var(--mp-muted); }
body.mp .cf-default-pill { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--mp-sage-soft); color: var(--mp-sage); }
body.mp .cf-vis-preview { margin: 0; font-size: 14px; color: var(--mp-ink-3); padding-top: 6px; }
body.mp .cf-nav { display: flex; justify-content: space-between; padding-top: 10px; }
body.mp .cf-btn { font: inherit; font-size: 14px; font-weight: 600; height: 42px; padding: 0 20px; border-radius: 999px; cursor: pointer; border: 1px solid var(--mp-rule-2); background: var(--mp-white); color: var(--mp-ink); }
body.mp .cf-btn[disabled] { opacity: .4; cursor: default; }
body.mp .cf-btn-fill { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-paper); }

/* ── Prayer Center (pm-* / pmf-* markup with its own inline styles): map the
   app token names those styles use onto the paper palette, then correct type. */
body.mp { --text-primary: var(--mp-ink); --text-secondary: var(--mp-ink-2); --text-muted: var(--mp-muted); --text-faint: var(--mp-faint);
  --input-bg: var(--mp-white); --input-border: var(--mp-rule-2); --glass-card-border: var(--mp-rule); --glass-card-bg: var(--mp-white); }
body.mp .pm { max-width: none; padding-bottom: 40px; }
body.mp .pm-toolbar { border-top: 1px solid var(--mp-rule); padding-top: 14px; }
body.mp .pm-chip-ctl { font-weight: 500; } body.mp .pm-chip-ctl.active { background: var(--mp-ink); color: var(--mp-paper); }
body.mp .pm-req { border-radius: 12px; }
body.mp .pm-req.is-focus, body.mp .pm-req.is-focus[open] { scroll-margin-top: 96px; border-color: var(--mp-ox); box-shadow: 0 0 0 4px var(--mp-ox-soft); background: #FFFCFB; }
body.mp .pm-req-title { font-family: var(--mp-font-display); font-size: 20px; }
body.mp .pm-section-label { color: var(--mp-muted); letter-spacing: .12em; }
body.mp .chip { border-radius: 4px; }
body.mp .a-s { background: #E5ECFB; color: #2358D6; } body.mp .a-t { background: var(--mp-sage-soft); color: var(--mp-sage); }
body.mp .a-a { background: #EFE7F6; color: #6B3FA0; } body.mp .a-c { background: var(--mp-ox-soft); color: var(--mp-ox); }
body.mp .p-low { background: var(--mp-paper-2); color: var(--mp-muted); } body.mp .p-med { background: #E5ECFB; color: #2358D6; } body.mp .p-high { background: #FBF0DC; color: #8A5A0C; }
body.mp .st-answered { background: var(--mp-sage-soft); color: var(--mp-sage); } body.mp .st-archived { background: var(--mp-paper-2); color: var(--mp-faint); }
body.mp .pm-dot--fresh { background: var(--mp-sage); } body.mp .pm-dot--aging { background: var(--mp-gold); } body.mp .pm-dot--stale { background: var(--mp-ox); } body.mp .pm-dot--never { background: var(--mp-ghost); }
body.mp .pm-act--go:hover { color: var(--mp-sage); } body.mp .pm-act--danger:hover { color: var(--mp-ox); }
body.mp .pm-logbtn, body.mp .pm-ef-save { background: var(--mp-ink); color: var(--mp-paper); border-color: var(--mp-ink); }
body.mp .pm-empty { border-top: 1px solid var(--mp-rule); color: var(--mp-muted); }
body.mp .pmf { max-width: 560px; margin: 0; }
body.mp .pmf-title { font-family: var(--mp-font-display); font-weight: 400; font-size: var(--mp-t-page); line-height: .98; margin: 6px 0 18px; letter-spacing: -.012em; }
body.mp .pmf-back { display: inline-block; font-size: 13.5px; color: var(--mp-muted); margin-bottom: 4px; }
body.mp .pmf-submit { background: var(--mp-ink); color: var(--mp-paper); border-color: var(--mp-ink); border-radius: 999px; }
body.mp .pmf-error { background: var(--mp-ox-soft); color: var(--mp-ox); border-color: transparent; }
body.mp .pmf-form { display: flex; flex-direction: column; gap: 16px; }
body.mp .pmf-field { display: flex; flex-direction: column; gap: 6px; }
body.mp .pmf-label { font-size: var(--mp-t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mp-muted); }
body.mp .pmf-input, body.mp .pmf-textarea, body.mp .pmf-select { width: 100%; box-sizing: border-box; font: inherit; font-size: 15.5px; color: var(--mp-ink); background: var(--mp-white); border: 1px solid var(--mp-rule-2); border-radius: 10px; padding: 11px 13px; outline: none; }
body.mp .pmf-input:focus, body.mp .pmf-textarea:focus, body.mp .pmf-select:focus { border-color: var(--mp-ink); }
body.mp .pmf-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
body.mp .pmf-actions { display: flex; gap: 10px; margin-top: 4px; }
body.mp .pmf-submit { font: inherit; font-size: 14px; font-weight: 600; height: 42px; padding: 0 20px; cursor: pointer; }
body.mp .pmf-error { border-radius: 10px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 12px; }

/* ── today ────────────────────────────────────────────────────────────── */
.mp-today { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; border-top: 1px solid var(--mp-rule); padding-top: 22px; }
.mp-today-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mp-today-card { display: flex; flex-direction: column; gap: 8px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); padding: 20px 22px; }
.mp-today-card--lead { border-color: var(--mp-ox-soft); box-shadow: 0 0 0 1px var(--mp-ox-soft); }
.mp-today-title { margin: 2px 0 0; font-size: 26px; line-height: 1.12; text-wrap: pretty; }
.mp-today-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--mp-rule); font-size: 14px; color: var(--mp-ink-2); }
.mp-today-row:first-of-type { border-top: 0; }
.mp-today-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-today-row-text b { font-weight: 600; color: var(--mp-ink); margin-right: 4px; }
.mp-today-row:hover .mp-today-row-text b { color: var(--mp-ox); }
@media (max-width: 1024px) { .mp-today { grid-template-columns: 1fr; } }

/* ── covenant ─────────────────────────────────────────────────────────── */
body.mp .cov-content { max-width: 66ch; }
body.mp .cov-card { display: flex; flex-direction: column; gap: 14px; }
body.mp .cov-title { margin-bottom: 6px; }
body.mp .cov-intro { margin: 0; font-family: var(--mp-font-display); font-size: 19px; line-height: 1.55; color: var(--mp-ink); }
body.mp .cov-list { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: cov; display: flex; flex-direction: column; }
body.mp .cov-list li { counter-increment: cov; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--mp-rule); }
body.mp .cov-list li::before { content: counter(cov, upper-roman); font-family: var(--mp-font-display); font-size: 26px; line-height: 1; color: var(--mp-ghost); }
body.mp .cov-item-body { font-family: var(--mp-font-display); font-size: 18px; line-height: 1.55; color: var(--mp-ink); }
body.mp .cov-attribution { margin: 8px 0 0; font-size: 12.5px; color: var(--mp-faint); border-top: 1px solid var(--mp-rule); padding-top: 14px; }

/* ── forms (profile, account) ─────────────────────────────────────────── */
.mp-form { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.mp-form-section { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--mp-rule); }
.mp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; }
.mp-form-grid--2 { grid-template-columns: 1fr 1.4fr; gap: 12px; }
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-field--wide { grid-column: 1 / -1; }
.mp-field > span { font-size: var(--mp-t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-muted); font-weight: 600; }
.mp-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mp-faint); margin-left: 6px; }
.mp-account { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.mp-account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mp-rule); font-size: 15px; color: var(--mp-ink); }
.mp-account-row--btn { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--mp-rule); font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 720px) { .mp-form-grid { grid-template-columns: 1fr; } }

/* ── Project Lab (pl-* markup + project_lab.css, loaded via :head) ────── */
body.mp.mp-wide .mp-grid { grid-template-columns: minmax(0,1fr); padding: 28px 48px 64px; }
body.mp { --glass-outer-bg: var(--mp-white); --nav-btn-hover: var(--mp-paper-2); --nav-btn-active-bg: var(--mp-ink); --nav-btn-active-color: var(--mp-paper); }
body.mp .pl-shell { padding: 0; gap: 40px; grid-template-columns: 200px minmax(0,1fr); }
body.mp .pl-nav { background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; top: 24px; }
body.mp .pl-nav-eyebrow { color: var(--mp-muted); font-weight: 600; letter-spacing: .14em; }
body.mp .pl-nav-item { border-radius: 0; padding: 7px 0; font-size: 15px; color: var(--mp-ink-3); }
body.mp .pl-nav-item:hover { background: none; color: var(--mp-ox); }
body.mp .pl-nav-item.active { background: none; color: var(--mp-ink); font-weight: 600; position: relative; }
body.mp .pl-nav-item.active::before { content: ""; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--mp-ox); }
body.mp .pl-nav-list { padding-left: 16px; }
body.mp .pl-nav-back { border-top-color: var(--mp-rule); color: var(--mp-muted); padding-left: 0; }
body.mp .pl-nav-back:hover { color: var(--mp-ox); }
body.mp .pl-nav-badge { background: var(--mp-ox); color: var(--mp-paper); }
/* Lab seam: same treatment as the shell's, centred on the 40px gap after the 200px nav. */
body.mp .pl-seam { position: absolute; top: 0; bottom: 0; left: calc(200px + 20px - 12px); width: 24px; z-index: 3; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--mp-muted); }
body.mp .pl-seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: var(--mp-rule-2); opacity: 0; transition: opacity .15s; }
body.mp .pl-seam-notch { position: absolute; top: 4px; left: 50%; width: 22px; height: 22px; margin-left: -11px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--mp-white); border: 1px solid var(--mp-rule-2); box-shadow: 0 1px 2px rgba(28,27,24,.08); opacity: 0; transition: opacity .15s; }
body.mp .pl-seam:hover::before, body.mp .pl-seam:focus-visible::before, body.mp .pl-seam:hover .pl-seam-notch, body.mp .pl-seam:focus-visible .pl-seam-notch { opacity: 1; }
body.mp .pl-seam:hover { color: var(--mp-ink); }
@media (pointer: coarse) { body.mp .pl-seam-notch { opacity: .85; } }
body.mp .pl-shell.is-collapsed { grid-template-columns: minmax(0,1fr); }
body.mp .pl-shell.is-collapsed .pl-seam { left: -24px; }
body.mp .pl-shell.is-collapsed .pl-seam::before { display: none; }
body.mp .pl-shell.is-collapsed .pl-seam-notch { transform: scaleX(-1); }
body.mp .pl-main { background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.mp .pl-content-title, body.mp .pl-doc-h1 { font-family: var(--mp-font-display); font-weight: 400; font-size: 40px; letter-spacing: -.012em; line-height: 1; margin-bottom: 8px; }
body.mp .pl-doc-h1 { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
body.mp .pl-content-sub { font-size: 15px; margin-bottom: 26px; }
body.mp .pl-kicker, body.mp .pl-doc-card-title { color: var(--mp-ox); }
body.mp .pl-snap-card, body.mp .pl-card, body.mp .pl-doc-card, body.mp .pl-fb-form { background: var(--mp-white); border-color: var(--mp-rule); border-radius: var(--mp-r-md); }
body.mp .pl-doc-body, body.mp .pl-prose { font-size: 15.5px; line-height: 1.65; color: var(--mp-ink-2); }
body.mp .pl-doc-body h1, body.mp .pl-doc-body h2 { font-family: var(--mp-font-display); font-weight: 400; color: var(--mp-ink); }
body.mp .pl-doc-body h1 { font-size: 30px; } body.mp .pl-doc-body h2 { font-size: 24px; border-bottom-color: var(--mp-rule); }
body.mp .pl-doc-body h3, body.mp .pl-doc-body h4 { color: var(--mp-ink); }
body.mp .pl-doc-body a, body.mp .pl-inline-link, body.mp .pl-back { color: var(--mp-ox); }
body.mp .pl-doc-body blockquote { border-left: 2px solid var(--mp-rule-2); color: var(--mp-ink-3); }
body.mp .pl-doc-body code { background: var(--mp-paper-2); color: var(--mp-ink); border-radius: 4px; padding: 1px 5px; font-size: .9em; }
body.mp .pl-doc-body pre { background: var(--mp-paper-2); border: 1px solid var(--mp-rule); border-radius: 10px; }
body.mp .pl-doc-body table { border-color: var(--mp-rule); } body.mp .pl-doc-body th, body.mp .pl-doc-body td { border-color: var(--mp-rule); }
body.mp .pl-doc-body img { border-radius: 8px; border: 1px solid var(--mp-rule); }
body.mp .pl-fb-btn, body.mp .pl-print-btn { border-radius: 999px; border: 1px solid var(--mp-rule-2); background: var(--mp-white); color: var(--mp-ink); }
body.mp .pl-fb-status--open { background: var(--mp-ox-soft); color: var(--mp-ox); }
body.mp .pl-fb-row--done { opacity: .6; }
body.mp .pl-news-more > summary { color: var(--mp-ox); }
body.mp .pl-deploy-strip { color: var(--mp-faint); border-bottom: 1px solid var(--mp-rule); padding-bottom: 12px; }
@media (max-width: 900px) {
  body.mp .pl-shell { grid-template-columns: 1fr; } body.mp .pl-nav { position: static; }
  /* One column: the nav stacks above the content, so the toggle goes top-right
     in either state and the nav no longer needs headroom for it. */
  /* One column: the seam becomes a horizontal rule between nav and content
     (it is the grid child between them), chevron pointing up; collapsed, it
     sits at the top pointing down. */
  body.mp .pl-seam, body.mp .pl-shell.is-collapsed .pl-seam { position: static; width: auto; height: 22px; left: auto; }
  body.mp .pl-seam::before, body.mp .pl-shell.is-collapsed .pl-seam::before { display: block; top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; margin: 0; opacity: 1; }
  body.mp .pl-seam { position: relative; }
  body.mp .pl-seam-notch { top: 0; opacity: .85; transform: rotate(90deg); }
  body.mp .pl-shell.is-collapsed .pl-seam-notch { transform: rotate(-90deg); }
  body.mp .pl-shell.is-collapsed .pl-main { padding-top: 0; }
}

/* ── admin shell (layouts/admin + admin.css) — light touch before the refactor ── */
body.mp-adminshell { background: var(--mp-paper); color: var(--mp-ink); font-family: var(--mp-font-ui); --divider: var(--mp-rule); }
body.mp-adminshell .adm-sidebar { background: var(--mp-white); border-right-color: var(--mp-rule); }
body.mp-adminshell .adm-wordmark { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--mp-ink); }
body.mp-adminshell .adm-system-badge { background: var(--mp-ox-soft); color: var(--mp-ox); border: 0; }
body.mp-adminshell .adm-nav-item { color: var(--mp-ink-3); border-radius: 8px; }
body.mp-adminshell .adm-nav-item:hover { background: var(--mp-paper); color: var(--mp-ink); }
body.mp-adminshell .adm-nav-item.active { background: var(--mp-ink); color: var(--mp-paper); }
body.mp-adminshell .adm-page-title { font-family: var(--mp-font-display); font-weight: 400; font-size: 36px; letter-spacing: -.012em; color: var(--mp-ink); }
body.mp-adminshell .adm-page-sub { color: var(--mp-muted); }
body.mp-adminshell .adm-card, body.mp-adminshell .adm-stat-card, body.mp-adminshell .group-card, body.mp-adminshell .wizard-wrap { background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); box-shadow: none; }
body.mp-adminshell .adm-card-title, body.mp-adminshell .adm-section-label, body.mp-adminshell .section-label, body.mp-adminshell .adm-stat-label { color: var(--mp-muted); letter-spacing: .12em; }
body.mp-adminshell .adm-stat-value { font-family: var(--mp-font-display); font-weight: 400; color: var(--mp-ink); }
body.mp-adminshell .adm-btn, body.mp-adminshell .wz-btn-primary, body.mp-adminshell .adm-invite-btn { background: var(--mp-ink); color: var(--mp-paper); border: 0; border-radius: 999px; }
body.mp-adminshell .adm-btn-sm, body.mp-adminshell .wz-btn, body.mp-adminshell .rm-btn, body.mp-adminshell .add-row-btn { border-radius: 999px; border: 1px solid var(--mp-rule-2); background: var(--mp-white); color: var(--mp-ink); }
body.mp-adminshell .adm-btn-danger, body.mp-adminshell .adm-btn-sm--danger { background: var(--mp-ox-soft); color: var(--mp-ox); border-color: transparent; }
body.mp-adminshell .adm-table th { color: var(--mp-muted); border-bottom-color: var(--mp-rule); letter-spacing: .1em; }
body.mp-adminshell .adm-table td { border-bottom-color: var(--mp-rule); color: var(--mp-ink); }
body.mp-adminshell .adm-field input, body.mp-adminshell .adm-field select, body.mp-adminshell .adm-field textarea, body.mp-adminshell .adm-textarea, body.mp-adminshell .wz-input, body.mp-adminshell .wz-select, body.mp-adminshell .adm-search { background: var(--mp-white); border: 1px solid var(--mp-rule-2); color: var(--mp-ink); border-radius: 10px; font-family: inherit; }
body.mp-adminshell .adm-field input:focus, body.mp-adminshell .wz-input:focus, body.mp-adminshell .adm-textarea:focus { border-color: var(--mp-ink); outline: none; }
body.mp-adminshell .adm-flash { border-radius: 10px; }
body.mp-adminshell .adm-flash--success { background: var(--mp-sage-soft); color: var(--mp-sage); border: 0; }
body.mp-adminshell .adm-flash--error { background: var(--mp-ox-soft); color: var(--mp-ox); border: 0; }
body.mp-adminshell .role-pill { border-radius: 4px; }
body.mp-adminshell .role-pill--leader, body.mp-adminshell .role-pill--group_leader { background: var(--mp-sage-soft); color: var(--mp-sage); border-color: transparent; }
body.mp-adminshell .role-pill--admin { background: #FBF0DC; color: #8A5A0C; border-color: transparent; }
body.mp-adminshell .role-pill--member { background: var(--mp-paper-2); color: var(--mp-muted); border-color: transparent; }
body.mp-adminshell .adm-user-name { color: var(--mp-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   MAC TILT (branch morning-paper-mac, for review) — four levers, tokens only
   where possible. Delete this block to return to the flat/linear version.
   1. UI face: the system font on Macs (SF), Inter Tight elsewhere.
   2. Depth: one soft ambient shadow on floating surfaces; top bar floats.
   3. Geometry: larger continuous radii.
   4. Inset: the page is a sheet on a desk, not a fill of the window.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --mp-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mp-r-sm: 6px;
  --mp-r-md: 18px;
  --mp-r-input: 12px;
  --mp-desk: #EFECE6;
  --mp-shadow: 0 1px 1.5px rgba(28,27,24,.04), 0 8px 24px -14px rgba(28,27,24,.22);
  --mp-shadow-lift: 0 2px 4px rgba(28,27,24,.05), 0 18px 44px -22px rgba(28,27,24,.35);
}
body.mp { letter-spacing: -0.005em; background: var(--mp-desk); }
body.mp .mp-page { max-width: 1480px; margin: 0 auto; background: var(--mp-paper);
  box-shadow: 0 0 0 1px rgba(28,27,24,.05), 0 40px 90px -50px rgba(28,27,24,.35); }
@media (min-width: 1560px) { body.mp .mp-page { margin: 24px auto; min-height: calc(100vh - 48px); border-radius: 22px; overflow: hidden; } body.mp .mp-sky { border-radius: 22px 22px 0 0; } }
body.mp .mp-top { border-bottom: 0; box-shadow: 0 1px 0 rgba(28,27,24,.06), 0 10px 24px -20px rgba(28,27,24,.35); }
body.mp .mp-input, body.mp .mp-textarea, body.mp .pmf-input, body.mp .pmf-textarea, body.mp .pmf-select, body.mp .cf-q textarea { border-radius: var(--mp-r-input); }
body.mp .mp-input--title { border-radius: var(--mp-r-input); }
/* floating surfaces get the ambient shadow */
body.mp .mp-compose, body.mp .mp-today-card, body.mp .mp-member-card, body.mp .mp-next, body.mp .mp-continue, body.mp .mp-card-form,
body.mp .mp-capture-panel, body.mp .mp-notice, body.mp .mp-msg--in .mp-bubble, body.mp .ch-cta, body.mp .cf-card, body.mp .ch-detail-support,
body.mp .mp-composer-box, body.mp .pl-snap-card, body.mp .pl-card, body.mp .pl-doc-card, body.mp .adm-card, body.mp .adm-stat-card, body.mp .group-card {
  box-shadow: var(--mp-shadow); border-color: rgba(28,27,24,.07); }
body.mp .mp-menu { box-shadow: var(--mp-shadow-lift); border-radius: 14px; }
body.mp .mp-btn--primary, body.mp a.mp-btn--primary { box-shadow: 0 1px 2px rgba(28,27,24,.25), inset 0 1px 0 rgba(255,255,255,.08); }
body.mp .mp-btn--ghost, body.mp a.mp-btn--ghost { box-shadow: 0 1px 1.5px rgba(28,27,24,.05); }
body.mp .mp-day.is-selected { box-shadow: var(--mp-shadow); border-radius: 12px; }
body.mp .mp-cover { border-radius: 10px; }
body.mp .mp-msg--in .mp-bubble { border-radius: 18px 18px 18px 6px; } body.mp .mp-msg--out .mp-bubble { border-radius: 18px 18px 6px 18px; }
body.mp .mp-pill { border-radius: 999px; padding: 0 10px; }
body.mp .mp-label { letter-spacing: .12em; }
body.mp .mp-sky::after { background: linear-gradient(180deg, rgba(251,250,247,.28) 0%, rgba(251,250,247,.66) 40%, var(--mp-paper) 82%); }
/* sign-in page sits on the desk too */
body.mp-login-body { background: var(--mp-paper); }
body.mp .mpl-mark { filter: drop-shadow(0 10px 22px rgba(28,27,24,.18)); }

/* ── choice list (account preferences) ───────────────────────────────── */
.mp-choices { display: flex; flex-direction: column; gap: 8px; }
.mp-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--mp-rule-2); background: var(--mp-paper); cursor: pointer; }
.mp-choice.is-on, .mp-choice:has(input:checked) { border-color: var(--mp-ink); background: var(--mp-white); box-shadow: 0 0 0 1px var(--mp-ink); }
.mp-choice input { margin-top: 3px; accent-color: var(--mp-ink); }
.mp-choice-text { display: flex; flex-direction: column; gap: 2px; }
.mp-choice-name { font-weight: 600; font-size: 15px; }
.mp-choice-desc { font-size: 13px; color: var(--mp-muted); }

/* ── focused card (arriving from an email or Today link) ─────────────── */
.mp-post.is-focus { scroll-margin-top: 96px; position: relative; isolation: isolate; }
.mp-post.is-focus::before { content: ""; position: absolute; inset: 8px -20px; border-radius: 16px; border: 1.5px solid var(--mp-ox); background: var(--mp-ox-soft); opacity: .55; pointer-events: none; z-index: -1;
  animation: mp-focus-settle 2.4s ease-out forwards; }
@keyframes mp-focus-settle { 0% { opacity: .9; } 70% { opacity: .55; } 100% { opacity: .35; } }

/* ── front page (S50) — a page you read ──────────────────────────────────
   Today is the root. The sky band grows into a hero on this page only; the
   greeting and the day's one line sit in its fade, and the page proper
   begins at the pathway card. Sections are rules on paper, sentences in
   the display face; no boxes, no avatars, no counts. */
.mp-page--hero .mp-sky { height: 440px; }
.mp-page--hero .mp-sky img { object-position: center 46%; }
.mp-page--hero .mp-sky::after { background: linear-gradient(180deg, rgba(251,250,247,.08) 0%, rgba(251,250,247,.22) 38%, rgba(251,250,247,.78) 72%, var(--mp-paper) 100%); }
.mp-page--hero .mp-grid { padding-top: 40px; }

.mp-front-head { display: flex; flex-direction: column; gap: 10px; padding: 0 0 30px; }
.mp-front-greet { display: flex; flex-direction: column; gap: 10px; }
.mp-front-head .mp-label { color: var(--mp-ink-2); }
.mp-front-hero { margin: 0; font-size: clamp(40px, 4.4vw, 64px); line-height: .96; text-wrap: balance; }
.mp-front-verse { margin: 4px 0 0; font-style: italic; font-size: 20px; color: var(--mp-ink-2); }
.mp-front-verse .mp-label { font-style: normal; margin-left: 8px; }
.mp-front-line { display: block; margin: 0; font-family: var(--mp-font-display); font-size: 17px; line-height: 1.35; color: var(--mp-ink-2); text-wrap: pretty; }
.mp-front-line b { font-weight: 500; color: var(--mp-ink); }
a.mp-front-line:hover b { color: var(--mp-ox); }
.mp-front-day { padding-top: 10px; font-size: 19px; }
.mp-front-a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mp-ghost); }
.mp-front-a:hover { text-decoration-color: currentColor; }
.mp-front-quiet { color: var(--mp-muted); font-style: italic; }

.mp-front { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 40px; }
.mp-front-lead { grid-column: 1 / -1; }
.mp-front-lead { display: flex; flex-direction: column; gap: 8px; padding: 26px 0 28px; border-top: 1px solid var(--mp-rule); }
.mp-front-lead-title { margin: 0; font-size: 40px; line-height: 1.1; text-wrap: pretty; }
.mp-front-lead-sub { font-size: 18px; color: var(--mp-muted); }
.mp-front-lead-row { display: flex; align-items: center; gap: 14px; padding-top: 10px; }
.mp-front-lead.has-cover { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
.mp-front-lead-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-front-lead-cover { flex: 0 0 auto; display: block; }
.mp-front-lead-cover img { display: block; width: 112px; height: auto; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 24px -12px rgba(0,0,0,.45); }

.mp-front-sec { display: flex; flex-direction: column; gap: 6px; padding: 22px 0 24px; border-top: 1px solid var(--mp-rule); }
/* bulleted, tight: a 5px dot in the margin */
.mp-front-sec .mp-front-line, .mp-front-quote { position: relative; padding-left: 16px; }
.mp-front-sec .mp-front-line::before, .mp-front-quote::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 999px; background: var(--mp-ghost); }
.mp-front-line em { font-style: normal; font-family: var(--mp-font-ui); font-size: 12.5px; color: var(--mp-muted); margin-left: 6px; }
.mp-front-line.is-closed { color: var(--mp-muted); } .mp-front-line.is-closed b { color: var(--mp-ink-3); }
.mp-front-sec-head { display: flex; align-items: baseline; justify-content: space-between; }
.mp-front-quote { display: flex; flex-direction: column; gap: 0; }
.mp-front-q { font-family: var(--mp-font-display); font-size: 17px; line-height: 1.35; color: var(--mp-ink-2); text-wrap: pretty; }
.mp-front-quote:hover .mp-front-q { color: var(--mp-ox); }
.mp-front-by { font-size: 12px; color: var(--mp-muted); }
.mp-front-line em.is-stale { color: var(--mp-ox); font-weight: 500; }

@media (max-width: 820px) {
  .mp-page--hero .mp-sky { height: 300px; }
  .mp-front-head { padding-top: 0; }
  .mp-front-hero { font-size: 38px; }
  .mp-front-verse { font-size: 16px; }
  .mp-front { grid-template-columns: 1fr; }
  .mp-front-lead-title { font-size: 30px; }
  .mp-front-lead-cover img { width: 76px; }
}

/* ── welcome video on Today (S50) — until dismissed ─────────────────────── */
.mp-welcome { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 26px; align-items: center;
  padding: 22px 26px; margin-bottom: 8px; background: var(--mp-white); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); }
.mp-welcome-text { display: flex; flex-direction: column; gap: 10px; }
.mp-welcome-title { margin: 0; font-size: 24px; line-height: 1.15; text-wrap: pretty; }
.mp-welcome-form { margin-top: 6px; }
.mp-welcome-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--mp-paper-2); }
.mp-welcome-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 820px) { .mp-welcome { grid-template-columns: 1fr; gap: 16px; padding: 18px; } }

/* ── rail invite (D-064) ──────────────────────────────────────────────── */
.mp-invite { margin-top: 6px; }
.mp-invite summary { list-style: none; cursor: pointer; display: inline-block; padding: 6px 0; }
.mp-invite summary::-webkit-details-marker { display: none; }
.mp-invite-form { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; }
.mp-invite-form .mp-input { height: 34px; padding: 0 10px; border: 1px solid var(--mp-rule-2); border-radius: 8px; background: var(--mp-white); font: inherit; font-size: 13.5px; color: var(--mp-ink); }
.mp-invite-form .mp-input:focus { outline: none; border-color: var(--mp-ink); }
.mpl-invite { display: flex; flex-direction: column; gap: 8px; }
.mpl-legal { margin: 28px 0 0; font-family: var(--mp-font-ui); font-size: 11px; letter-spacing: .04em; color: var(--mp-muted); opacity: .7; }
.mpl-resend summary { list-style: none; cursor: pointer; font-size: 13.5px; }
.mpl-resend summary::-webkit-details-marker { display: none; }
.mpl-resend-form { display: flex; gap: 8px; padding-top: 10px; }
.mpl-resend-form input { flex: 1; height: 36px; padding: 0 12px; border: 1px solid var(--mp-rule-2); border-radius: 999px; background: var(--mp-white); font: inherit; font-size: 13.5px; }

/* ── admin "who's here" strip in the top bar (S50) ─────────────────────── */
.mp-online { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mp-muted); margin-right: 4px; }
.mp-online-user { display: inline-flex; align-items: center; gap: 6px; color: var(--mp-ink-2); }
.mp-online-user img, .mp-online-user .av { box-shadow: 0 0 0 2px var(--mp-paper), 0 0 0 3.5px var(--mp-sage); border-radius: 999px; }
.mp-online-none { color: var(--mp-faint); font-style: italic; }
@media (max-width: 1024px) { .mp-online { display: none; } }

/* ── pathway videos (branch pathway-video) ─────────────────────────────── */
.mp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--mp-ink);
  box-shadow: 0 10px 28px -12px rgba(28,27,24,.45), 0 0 0 1px rgba(28,27,24,.06); }
.mp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-video.is-placeholder { background: var(--mp-paper-2); box-shadow: none; border: 1.5px dashed var(--mp-rule-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--mp-muted); }
.mp-video-ph { font-size: 12.5px; text-align: center; padding: 0 18px; }
.mp-kickoff { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 32px; align-items: center;
  padding: 28px 0 8px; }
.mp-kickoff-body { display: flex; flex-direction: column; gap: 8px; }
.mp-kickoff-title { margin: 0; font-size: 30px; line-height: 1.1; }
.mp-kickoff-text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--mp-ink-2); max-width: 44ch; }
.mp-ch-intro { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 4px 0 26px; border-bottom: 1px solid var(--mp-rule); margin-bottom: 26px; }
.mp-ch-intro-body { display: flex; flex-direction: column; gap: 6px; }
.mp-ch-intro-title { margin: 0; font-size: 24px; line-height: 1.15; }
.mp-ch-intro-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mp-ink-2); max-width: 46ch; }
@media (max-width: 760px) {
  .mp-kickoff, .mp-ch-intro { grid-template-columns: 1fr; gap: 16px; }
  .mp-kickoff-title { font-size: 26px; }
}