/* ============================================================
   Resonance — member pages (profile wizard + own profile)
   Loads AFTER assets/style.css and only adds m-* classes, so the
   marketing pages are untouched. Design lifted from
   mockups/mockup-profile.html: dark charcoal night-sky hero,
   cream body, 20px cards, uppercase orange kickers, no numbers.
   Phone first: the primary target is 390px wide.
   ============================================================ */

:root { --t-realist:#C4744F; --t-idealist:#C75D74; --t-seeker:#F0A63C; --t-guardian:#55503F; }

.m-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.m-narrow { max-width: 660px; margin: 0 auto; padding: 0 20px; }
.m-muted { color: var(--ink-soft); }
.m-fine { font-size: .88rem; color: #8A8271; }
.m-center { text-align: center; }

/* ---------- the reward hint ----------
   One quiet line at the moment a member is deciding whether to do the thing: do X, get Y.
   Never a list, never a ladder, never a number — the whole reward system is described one
   sentence at a time, where the sentence is true. The spark is a 6px orange dot; the copy
   is pre-launch on purpose ("when the network opens"), because the network is not open.
   Defined identically in three other places that cannot see this file: the report's
   STRIP_CSS (render-report.mjs), the survey finish page (build_survey_pages.py FINISH_CSS)
   — change one, change all. */
.reward-hint {
  font-size: .85rem; line-height: 1.5; color: var(--ink-soft);
  margin: 8px 0 0; display: flex; align-items: flex-start; gap: 8px;
}
.reward-hint::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .48em; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px rgba(240, 166, 60, .18);
}

/* ---------- night-sky hero ---------- */
.m-hero {
  position: relative; overflow: hidden; margin-top: 20px; border-radius: 26px;
  background: var(--charcoal); color: var(--white);
  border: 1px solid rgba(255,253,248,.07);
  box-shadow: 0 26px 64px rgba(20,20,20,.30);
}
.m-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(108% 96% at 76% 14%, rgba(240,166,60,.155) 0%, rgba(240,166,60,.045) 34%, rgba(20,20,20,0) 68%);
}
.m-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(150% 130% at 50% 118%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 62%);
}
.m-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.m-hero-inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr;
  justify-items: center; text-align: center; gap: 20px; padding: 32px 22px;
}
.m-hero h1 { color: var(--white); font-size: clamp(2rem, 8vw, 3.2rem); margin-bottom: 2px; }
.m-avatar {
  width: 128px; height: 128px; border-radius: 50%; flex: none; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 3rem; color: #fff;
  background: radial-gradient(circle at 34% 28%, #E39CA8 0%, #C75D74 55%, #9A3F55 100%);
  box-shadow: 0 0 0 1px rgba(255,253,248,.16), 0 0 0 11px rgba(199,93,116,.10), 0 18px 42px rgba(0,0,0,.5);
}
.m-typeline { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; margin-top: 2px; }
.m-meta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: rgba(255,253,248,.68); font-size: .95rem; }
.m-sig { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m-sig svg { display: block; overflow: visible; }
.m-cap { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,166,60,.75); font-weight: 700; }
.m-hero .m-chip { background: rgba(255,253,248,.045); border: 1.5px solid rgba(240,166,60,.38); color: rgba(255,253,248,.86); }
.m-hero .m-chiplabel { color: rgba(255,253,248,.45); }
.m-privacy { font-size: .8rem; color: rgba(255,253,248,.5); border: 1px dashed rgba(255,253,248,.22); border-radius: 999px; padding: 3px 11px; display: inline-block; }
@media (min-width: 900px) {
  .m-hero-inner { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; gap: 34px; padding: 42px 44px; align-items: center; }
  .m-avatar { width: 158px; height: 158px; font-size: 3.8rem; }
  .m-meta { justify-content: flex-start; }
}

/* ---------- chips ---------- */
.m-chiprow { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 14px; justify-content: center; }
@media (min-width: 900px) { .m-chiprow { justify-content: flex-start; } }
.m-chip { padding: 8px 16px; border-radius: 999px; background: var(--white); border: 1.5px solid rgba(33,29,22,.14); font-size: .92rem; font-weight: 600; color: var(--ink); cursor: default; }
.m-chiplabel { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8A8271; }
button.m-chip { cursor: pointer; font-family: inherit; transition: border-color .18s, background .18s, box-shadow .18s; }
button.m-chip:hover { border-color: rgba(217,142,31,.55); }
button.m-chip[aria-pressed="true"] { border-color: var(--orange-deep); background: var(--orange-soft); box-shadow: 0 0 0 4px rgba(240,166,60,.14); }
.m-chip .x { margin-left: 8px; color: #8A8271; font-weight: 700; }

/* A chip you and the person reading you both have. It is FILLED — solid orange with ink
   text and the deep-orange border — where every other chip is outlined on white, because a
   reader scanning someone else's interests should be able to see what the two of them have
   in common without reading a word. The fill replaces the small orange dot this rule used
   to draw in front: a dot the colour of its own background is no marker at all. Ordering is
   not decoration either — assets/interest-order.js sorts these to the front, exact matches
   before family ones — so the filled chips are also the first chips.
   This only ever applies where somebody ELSE is looking (the preview sheet's simulated
   viewer, and Phase C's real visitor page); the member's own page draws no shared chips,
   because on your own page every interest is yours. */
.m-chip.shared {
  border-color: var(--orange-deep); background: var(--orange); color: var(--ink);
  box-shadow: 0 0 0 4px rgba(240,166,60,.13);
  display: inline-flex; align-items: center; gap: 8px;
}
/* A row of forty chips is a screenful. It keeps about four lines, fades at the cut and
   puts one plain control underneath — no count of what is folded, ever, and nothing is
   ever hidden for good. */
.m-chiprow.m-chips-clip { max-height: 156px; overflow: hidden; position: relative; }
.m-chiprow.m-chips-clip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(250,245,236,0), var(--cream));
}
.m-hero .m-chiprow.m-chips-clip::after { background: linear-gradient(to bottom, rgba(20,20,20,0), var(--charcoal)); }
.m-card .m-chiprow.m-chips-clip::after { background: linear-gradient(to bottom, rgba(255,253,248,0), var(--white)); }
.m-chips-more {
  font: inherit; font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-deep); background: none; border: none; cursor: pointer; padding: 8px 2px 0; margin-top: 2px;
}
.m-chips-more:hover { text-decoration: underline; }

/* "See how others see you" — the standing control under the hero on your own page. */
.m-viewbar { display: flex; justify-content: center; margin-top: 12px; }
@media (min-width: 900px) { .m-viewbar { justify-content: flex-end; } }
.m-viewas { border-color: rgba(217,142,31,.42); }
.m-previewnote { margin-top: 10px; max-width: 46ch; }

/* ---------- cards ---------- */
.m-card { background: var(--white); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); border: 1px solid rgba(33,29,22,.05); }
.m-stack { display: grid; gap: 16px; }
@media (min-width: 700px) { .m-card { padding: 26px 26px; } }

/* ---------- lens cards ---------- */
.m-lensgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 860px) { .m-lensgrid { grid-template-columns: repeat(3, 1fr); } }
.m-lens { position: relative; cursor: pointer; user-select: none; transition: box-shadow .2s, transform .2s, border-color .2s; text-align: left; width: 100%; font: inherit; }
.m-lens:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.m-lens[aria-pressed="true"] { border-color: var(--orange-deep); box-shadow: 0 0 0 4px rgba(240,166,60,.16), var(--shadow); }
.m-lens .eye { width: 40px; height: 40px; border-radius: 13px; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.m-lens .dirn { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--orange-deep); margin-bottom: 8px; }
.m-lens .stmt { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.m-lens .cue { margin-top: 12px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--orange-deep); }
.m-lens .gloss { max-height: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease, margin .3s ease; opacity: 0; color: var(--ink-soft); font-size: .94rem; margin-top: 0; }
.m-lens.open .gloss { max-height: 240px; opacity: 1; margin-top: 10px; }

/* ---------- forms ---------- */
.m-label { display: block; font-weight: 700; margin-bottom: 6px; }
.m-input, .m-textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid rgba(33,29,22,.16); border-radius: 14px; padding: 13px 15px;
}
.m-input:focus, .m-textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--ring); }
.m-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.m-hint { font-size: .88rem; color: #8A8271; margin-top: 6px; }
.m-row { display: grid; gap: 14px; }
@media (min-width: 700px) { .m-row.two { grid-template-columns: 1fr 1fr; } }

/* ---------- photo ---------- */
.m-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.m-photo-prev { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--cream-deep); border: 1px solid rgba(33,29,22,.08); display: flex; align-items: center; justify-content: center; color: #A99E88; font-size: .8rem; text-align: center; }
/* ---------- the photo adjustment step ----------
   Between choosing a photo and uploading it. A fixed square frame with the circular
   preview mask that matches how .m-avatar renders the hero (a circle inscribed in the
   square we upload), drag to reposition, a slider or two fingers to zoom. Phone first:
   the frame is capped so it never widens the column at 390px, and touch-action:none is
   what lets a drag inside it be a drag rather than a page scroll. */
.m-crop { margin-top: 14px; }
.m-crop-frame {
  position: relative; width: min(280px, 100%); aspect-ratio: 1 / 1; margin: 0 auto;
  overflow: hidden; border-radius: 18px; background: var(--cream-deep);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.m-crop-frame.grabbing { cursor: grabbing; }
.m-crop-frame img {
  position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none;
  -webkit-user-drag: none;
}
/* the circle is cut out of a dim: a round element with an enormous spread shadow, clipped
   by the frame's overflow. inset:0 makes it exactly the inscribed circle, which is exactly
   what .m-avatar shows. */
.m-crop-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(33, 29, 22, .45);
  border: 2px solid rgba(255, 253, 248, .9);
}
.m-crop-zoom { width: 100%; max-width: 280px; display: block; margin: 12px auto 0; accent-color: var(--orange-deep); }
.m-crop .m-actions { margin-top: 14px; }

.m-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.m-gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; }
.m-gallery .cell { position: relative; }
.m-gallery .drop { position: absolute; top: 6px; right: 6px; border: none; border-radius: 999px; width: 26px; height: 26px; background: rgba(20,20,20,.62); color: #fff; cursor: pointer; font-weight: 700; line-height: 1; }

/* ---------- arranging the gallery ----------
   The order of the array is the order everyone sees, so a member has to be able to change
   it. Two ways in, deliberately: DRAG on a desktop (HTML5 drag-and-drop, which is what a
   mouse expects), and ARROWS everywhere. The arrows are not a fallback — on a phone they
   are the primary control, because a long-press drag inside a scrolling page is the least
   reliable gesture there is, and a member arranging six photographs on a bus should not
   have to fight the scroller. Everything below is sized for 390px first: two columns, so
   each cell is wide enough for three 34px targets in a row with room to spare. */
.m-gallery.edit { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .m-gallery.edit { grid-template-columns: repeat(3, 1fr); } }
.m-gallery.edit .cell { cursor: grab; border-radius: 14px; }
.m-gallery.edit .cell.dragging { opacity: .45; cursor: grabbing; }
.m-gallery.edit .cell.dropinto img { outline: 3px solid var(--orange); outline-offset: -3px; }
/* the first photo is the one a visitor meets first — say so, in words, with no number */
.m-gallery.edit .cell .first {
  position: absolute; top: 6px; left: 6px; z-index: 2; padding: 3px 9px; border-radius: 999px;
  background: rgba(20,20,20,.66); color: rgba(255,253,248,.94);
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
}
.m-galbar {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2;
  display: flex; gap: 5px; align-items: center; justify-content: center;
  background: rgba(20,20,20,.62); border-radius: 999px; padding: 4px;
}
.m-galbar button {
  font: inherit; flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: rgba(255,253,248,.14);
  color: rgba(255,253,248,.95); font-size: 1rem; line-height: 1;
}
.m-galbar button:hover { background: rgba(255,253,248,.3); }
.m-galbar button[disabled] { opacity: .3; cursor: default; }
.m-galbar button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.m-galbar .mkmain svg { display: block; }
.m-galbar .mkmain[aria-pressed="true"] { background: var(--orange); color: #2A2115; }

/* ---------- the two optional links ----------
   A playlist and a film diary, sitting just under the interests: two pills with a small
   drawn glyph, opening in a new tab. Quiet on purpose — they are a footnote to a person,
   not a call to action, and nothing renders at all when a member has neither. */
.m-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.m-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; background: var(--white);
  border: 1.5px solid rgba(33,29,22,.14); color: var(--ink);
  font-size: .92rem; font-weight: 600; transition: border-color .18s, box-shadow .18s;
}
.m-link:hover { border-color: rgba(217,142,31,.55); box-shadow: 0 0 0 4px rgba(240,166,60,.12); }
.m-link svg { flex: none; color: var(--orange-deep); }
.m-link .out { color: #8A8271; font-size: .82rem; }

/* ---------- type-ahead ---------- */
.m-typeahead { position: relative; }
.m-suggest { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--white); border: 1px solid rgba(33,29,22,.12); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 320px; overflow-y: auto; }
.m-suggest button { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; padding: 12px 16px; cursor: pointer; color: var(--ink); }
.m-suggest button:hover, .m-suggest button.hi { background: var(--cream-deep); }
.m-suggest .cat { font-size: .78rem; color: #8A8271; display: block; }
.m-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.m-cats button { font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1.5px solid rgba(33,29,22,.12); background: var(--cream); color: var(--ink-soft); cursor: pointer; max-width: 100%; }
.m-cats button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- the category panel (hobby step) ----------
   Opens under the category row: the "— in general" item pinned at the top, then the
   subtypes A–Z. Multi-select, no numbers, and nothing wider than the card it sits in. */
.m-catpanel { margin-top: 14px; border: 1.5px solid rgba(33,29,22,.12); border-radius: 18px;
  background: var(--cream); padding: 14px; }
.m-catpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.m-panelclose { font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--orange-deep); background: none; border: none; cursor: pointer; padding: 4px 2px; }
.m-catlist { display: flex; flex-wrap: wrap; gap: 8px; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m-catitem { font: inherit; font-size: .88rem; font-weight: 600; text-align: left; padding: 8px 14px;
  border-radius: 999px; border: 1.5px solid rgba(33,29,22,.14); background: var(--white); color: var(--ink);
  cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.m-catitem:hover { border-color: rgba(217,142,31,.55); }
.m-catitem[aria-pressed="true"] { border-color: var(--orange-deep); background: var(--orange-soft); box-shadow: 0 0 0 3px rgba(240,166,60,.14); }
/* the "<Category> — in general" item leads the list, keeps its own line, and stays put
   while the subtypes scroll under it — it is the answer for anyone who does not want to
   pick a subtype at all, so it should never be the thing you have to scroll back up to. */
.m-catitem.general { flex: 1 0 100%; font-family: var(--font-display); font-size: .96rem;
  position: sticky; top: 0; z-index: 2; }

/* ---------- wizard shell ---------- */
.m-step { display: none; }
.m-step.on { display: block; }
.m-dots { display: flex; gap: 7px; justify-content: center; margin: 20px 0 6px; }
.m-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(33,29,22,.16); display: block; transition: background .2s, transform .2s; }
.m-dots i.on { background: var(--orange); transform: scale(1.35); }
.m-dots i.done { background: var(--orange-deep); }
.m-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.m-back { background: none; border: none; font: inherit; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 0; }
.m-saved { font-size: .84rem; color: #8A8271; min-height: 20px; }
.m-saved.on { color: var(--orange-deep); }

/* ---------- optional shelf ---------- */
.m-shelf { display: grid; gap: 12px; }
.m-optional { border: 1.5px dashed rgba(33,29,22,.16); border-radius: 18px; padding: 16px 18px; background: rgba(255,253,248,.6); }
.m-optional summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.m-optional summary::-webkit-details-marker { display: none; }
.m-optional summary .add { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); font-weight: 700; }
.m-optional[open] { background: var(--white); border-style: solid; box-shadow: var(--shadow); }
.m-optional .inside { margin-top: 14px; }
.m-visnote { font-size: .86rem; color: var(--ink-soft); background: var(--orange-soft); border: 1px solid rgba(217,142,31,.3); border-radius: 12px; padding: 10px 13px; margin-top: 10px; }

/* ---------- publish ---------- */
.m-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.m-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.m-track { width: 58px; height: 32px; border-radius: 999px; background: rgba(33,29,22,.18); position: relative; transition: background .2s; flex: none; }
.m-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.m-toggle input:checked + .m-track { background: var(--orange); }
.m-toggle input:checked + .m-track::after { transform: translateX(26px); }
.m-toggle input:focus-visible + .m-track { box-shadow: 0 0 0 4px var(--ring); }

/* ---------- preview ---------- */
.m-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,20,.62); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 20px; }
.m-modal.on { display: flex; }
.m-sheet { background: var(--cream); border-radius: 24px; max-width: 720px; width: 100%; padding: 20px; box-shadow: var(--shadow-lg); }
.m-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.m-tabs button { font: inherit; font-size: .88rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(33,29,22,.14); background: var(--white); cursor: pointer; color: var(--ink-soft); }
.m-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.m-locked { filter: grayscale(1); opacity: .8; }

/* ---------- find people ---------- */
.m-person { display: flex; align-items: center; gap: 14px; padding: 14px 0; flex-wrap: wrap; }
.m-person + .m-person { border-top: 1px dashed rgba(33,29,22,.12); }
.m-person .who { font-family: var(--font-display); font-size: 1.1rem; flex: 1 1 auto; min-width: 140px; }
.m-person .tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--orange-deep); }
.m-btn-small { font: inherit; font-size: .9rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(33,29,22,.16); background: var(--white); cursor: pointer; color: var(--ink); }
.m-btn-small:hover { border-color: var(--orange-deep); }
.m-btn-small[disabled] { opacity: .55; cursor: default; }

/* ---------- profile view sections ---------- */
.m-section { padding: 34px 0 0; }
.m-section h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); }
.m-oneliner { display: grid; gap: 6px; }
.m-oneliner .q { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
.m-oneliner .a { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; }
.m-answer { font-size: 1.02rem; }
.m-answer p + p { margin-top: 12px; }
.m-prompt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--orange-deep); margin-bottom: 10px; }
.m-banner { background: var(--orange-soft); border: 1px solid rgba(217,142,31,.35); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }

/* ============================================================
   EDIT IN PLACE — the whole of profile.html is one surface now
   ------------------------------------------------------------
   There is no wizard any more. A member's own page IS the thing they
   build: every section they have renders as it always did with a quiet
   "Edit" underneath it, and every section they DON'T have renders as a
   ghost in the same place it would live, waiting to be tapped. Matt's
   words: "when I go to edit, I see my actual page with edit buttons
   under each section so I can zero in on what I want."

   Nothing here is loud. An Edit control is ink-soft text with a small
   drawn pencil; a ghost is a dashed 20px card in the same rhythm as a
   real one. Neither is ever shown to a visitor — the preview sheet and
   every other reader build from data, not from this page's DOM.
   ============================================================ */

/* ---------- the quiet Edit control ---------- */
.m-edit {
  font: inherit; font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: none; border: 1.5px solid rgba(33,29,22,.13);
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.m-edit:hover { color: var(--ink); border-color: rgba(217,142,31,.55); background: var(--white); }
.m-edit:focus-visible { outline: none; color: var(--ink); border-color: var(--orange-deep); box-shadow: 0 0 0 4px var(--ring); }
.m-edit svg { flex: none; }
/* on the dark hero it has to read against charcoal instead of cream */
.m-hero .m-edit { color: rgba(255,253,248,.72); border-color: rgba(255,253,248,.22); }
.m-hero .m-edit:hover { color: var(--white); background: rgba(255,253,248,.08); border-color: rgba(240,166,60,.55); }
.m-editbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- ghost placeholders ----------
   A section a member has not filled in yet, drawn where it would live.
   Dashed, ink-soft, a plus in front, and the whole thing is one tap
   target. Never rendered for anyone but the owner. */
.m-ghost {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35;
  color: var(--ink-soft); cursor: pointer;
  background: rgba(255,253,248,.5); border: 1.5px dashed rgba(33,29,22,.22);
  border-radius: var(--radius); padding: 20px 20px;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s, transform .18s;
}
.m-ghost:hover { border-color: rgba(217,142,31,.65); color: var(--ink); background: var(--white); transform: translateY(-1px); box-shadow: var(--shadow); }
.m-ghost:focus-visible { outline: none; border-color: var(--orange-deep); box-shadow: 0 0 0 4px var(--ring); }
.m-ghost .plus {
  flex: none; width: 34px; height: 34px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-soft); color: var(--orange-deep);
  font-size: 1.25rem; font-weight: 700; line-height: 1; font-family: var(--font-body);
}
.m-ghost .why { display: block; font-family: var(--font-body); font-size: .84rem; color: #8A8271; margin-top: 3px; }
/* the hero's own ghosts sit on charcoal */
.m-hero .m-ghost { background: rgba(255,253,248,.05); border-color: rgba(255,253,248,.28); color: rgba(255,253,248,.78); }
.m-hero .m-ghost:hover { background: rgba(255,253,248,.1); border-color: rgba(240,166,60,.6); color: var(--white); }
.m-hero .m-ghost .why { color: rgba(255,253,248,.5); }
/* the photo ghost is the avatar's own shape, not a card */
.m-ghost-avatar {
  width: 128px; height: 128px; border-radius: 50%; flex: none; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; font-size: .9rem;
}
.m-ghost-avatar .plus { width: 30px; height: 30px; border-radius: 50%; }
@media (min-width: 900px) { .m-ghost-avatar { width: 158px; height: 158px; } }

/* ---------- the standing reassurance ----------
   The one line that has to be true and has to be believed: editing a
   section touches that section and nothing else. It sits above
   everything a member can edit, and it never moves. */
.m-reassure {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0;
  font-size: .9rem; color: var(--ink-soft);
}
.m-reassure svg { flex: none; margin-top: .12em; color: var(--orange-deep); }

/* ---------- the build banner ----------
   Warm, slim, and never a taskmaster: it says what publishing needs and
   otherwise stays out of the way. No counts beyond "three lenses",
   which is a product rule and not a score. */
.m-build {
  background: linear-gradient(180deg, var(--white), #FCEBD2);
  border: 1.5px solid rgba(217,142,31,.4); border-radius: var(--radius);
  padding: 18px 20px; margin-top: 20px;
}
.m-build h2 { font-size: clamp(1.2rem, 4.4vw, 1.5rem); margin-bottom: 6px; }
.m-build p { color: var(--ink); font-size: .96rem; margin: 0; }

/* ---------- the publish card, at the top where the decision lives ---------- */
.m-pubcard { margin-top: 14px; display: grid; gap: 14px; }
.m-pubrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.m-toggle input:disabled + .m-track { opacity: .45; cursor: default; }
.m-pubwhy { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- the section editor sheet ----------
   Phone first, so it is a bottom sheet: it rises from the bottom edge
   of a 390px screen, keeps its head and its Save/Cancel foot pinned
   while the middle scrolls, and never covers the whole screen — the
   page you are editing stays visible behind it, which is the entire
   point of editing in place. On a wide screen it settles into the
   middle as an ordinary card. */
.m-editwrap {
  position: fixed; inset: 0; z-index: 260; background: rgba(20,20,20,.5);
  display: none; align-items: flex-end; justify-content: center;
}
.m-editwrap.on { display: flex; }
.m-editsheet {
  background: var(--cream); width: 100%; max-width: 660px; max-height: 92vh;
  border-radius: 24px 24px 0 0; box-shadow: 0 -18px 60px rgba(20,20,20,.4);
  display: flex; flex-direction: column; overflow: hidden;
}
.m-edithead {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px; border-bottom: 1px solid rgba(33,29,22,.08); background: var(--cream);
}
.m-edithead h2 { font-size: 1.2rem; margin: 0; }
.m-editbody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 8px; }
.m-editfoot {
  flex: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(33,29,22,.08); background: var(--cream);
}
.m-editfoot .m-saved { margin-left: auto; }
@media (min-width: 700px) {
  .m-editwrap { align-items: center; padding: 24px; }
  .m-editsheet { border-radius: 24px; max-height: 86vh; }
}
html.m-edit-open, html.m-edit-open body { overflow: hidden; }

/* ---------- removing something ----------
   The only way content ever leaves a profile: an explicit control inside
   that section's own editor, and one tap of confirmation that says, in
   words, that nothing else is touched. */
.m-remove {
  font: inherit; font-size: .88rem; font-weight: 600; background: none; border: none;
  color: #8C3A27; text-decoration: underline; cursor: pointer; padding: 4px 0;
}
.m-confirm {
  margin-top: 12px; padding: 13px 15px; border-radius: 14px;
  background: #FBEDE8; border: 1.5px solid rgba(164,68,47,.34);
  display: grid; gap: 10px;
}
.m-confirm p { margin: 0; font-size: .94rem; color: var(--ink); }
.m-confirm .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- the signature arriving ----------
   The delight moment, kept: the constellation is not in the hero until a
   member has a photo and a place, and the first time both are true it
   draws itself in beside them. */
@keyframes m-sig-draw {
  from { opacity: 0; transform: scale(.86) translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.m-sig.m-sig-draw { animation: m-sig-draw 1.5s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .m-sig.m-sig-draw { animation-duration: .01ms; } }

/* ============================================================
   Fast Friends video answer — the "IN THEIR OWN WORDS" card and
   the recorder behind it. Card geometry, the dark poster, the
   warm glow and the minimal chrome are lifted from
   mockups/mockup-profile.html (the approved design); everything
   here stays inside the m-* namespace so nothing leaks.
   ============================================================ */

.m-ff-sub { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8A8271; margin-bottom: 7px; }
.m-ff-q {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.22rem, 2.4vw, 1.6rem); line-height: 1.3; color: var(--ink);
  margin-bottom: 22px; max-width: 36ch;
}
.m-ff-player {
  position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: var(--charcoal); border: 1px solid rgba(33,29,22,.14);
  box-shadow: 0 14px 36px rgba(20,20,20,.24);
}
/* contain, not cover: a phone selfie is portrait, and cropping somebody's chin off to
   fill a 16:9 box is worse than letting the warm glow show at the sides. */
.m-ff-player > video { position: relative; z-index: 2; width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; }
/* warm glow, echoing the hero sky — sits under the picture, seen while it is still dark */
.m-ff-player::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 94% at 50% 40%, rgba(240,166,60,.17) 0%, rgba(240,166,60,.05) 40%, rgba(20,20,20,0) 74%);
}
.m-ff-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.m-ff-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,253,248,.6); }
.m-ff-visibility { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-soft); }
.m-ff-visibility svg { flex: none; }
.m-ff-state { margin-top: 14px; font-size: .88rem; color: #8A8271; display: flex; align-items: center; gap: 9px; }
.m-ff-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; animation: m-ff-breathe 2.4s ease-in-out infinite; }
@keyframes m-ff-breathe { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.m-ff-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }

/* ---------- the invitation, when there is no video yet ---------- */
.m-ff-invite { display: grid; gap: 12px; }
.m-ff-invite .m-ff-lead { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; }

/* ---------- choosing a question ---------- */
.m-ff-picks { display: grid; gap: 10px; margin-top: 4px; }
.m-ff-pick {
  font: inherit; text-align: left; width: 100%; cursor: pointer; color: var(--ink);
  background: var(--white); border: 1.5px solid rgba(33,29,22,.13); border-radius: 16px;
  padding: 15px 17px; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.m-ff-pick:hover { border-color: rgba(217,142,31,.55); transform: translateY(-1px); box-shadow: var(--shadow); }
.m-ff-pick[aria-pressed="true"] { border-color: var(--orange-deep); background: var(--orange-soft); box-shadow: 0 0 0 4px rgba(240,166,60,.14); }

/* ---------- the stage ---------- */
.m-ff-stage { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--charcoal); box-shadow: 0 14px 36px rgba(20,20,20,.24); }
.m-ff-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; }
.m-ff-stage video.mirror { transform: scaleX(-1); }
.m-ff-ring { position: absolute; right: 14px; top: 14px; z-index: 4; width: 46px; height: 46px; pointer-events: none; }
/* the browser's own [hidden] rule does not reach an <svg>, so the ninety-second ring sat
   on the stage permanently — say it here instead (Aug 2) */
.m-ff-ring[hidden] { display: none; }
.m-ff-ring circle { fill: none; stroke-width: 3.5; }
.m-ff-ring .track { stroke: rgba(255,253,248,.22); }
.m-ff-ring .arc { stroke: var(--orange); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .25s linear, stroke .4s; }
.m-ff-ring.low .arc { stroke: #E2725B; }
.m-ff-rec {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5;
  width: 66px; height: 66px; border-radius: 50%; border: 3px solid rgba(255,253,248,.85);
  background: rgba(20,20,20,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.m-ff-rec i { display: block; width: 40px; height: 40px; border-radius: 50%; background: #E2725B; transition: border-radius .2s, width .2s, height .2s; }
.m-ff-rec.on i { border-radius: 6px; width: 26px; height: 26px; }
.m-ff-rec:disabled { opacity: .5; cursor: default; }
.m-ff-live { position: absolute; left: 14px; top: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,253,248,.9); }
.m-ff-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E2725B; animation: m-ff-breathe 1.4s ease-in-out infinite; }

/* ---------- the take tray ---------- */
.m-ff-tray { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: stretch; }
.m-ff-take {
  font: inherit; cursor: pointer; padding: 0; border-radius: 12px; overflow: hidden; position: relative;
  width: 92px; height: 62px; flex: none; border: 1.5px solid rgba(33,29,22,.14); background: var(--charcoal);
}
.m-ff-take video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.m-ff-take[aria-pressed="true"] { border-color: var(--orange-deep); box-shadow: 0 0 0 4px rgba(240,166,60,.18); }
.m-ff-take .mark { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; background: rgba(20,20,20,.6); color: rgba(255,253,248,.9); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.m-ff-take .drop { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: none; border-radius: 999px; background: rgba(20,20,20,.66); color: #fff; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }

.m-ff-note { font-size: .88rem; color: #8A8271; margin-top: 10px; }
.m-ff-warn { font-size: .9rem; color: #A4442F; margin-top: 10px; }
@media (max-width: 520px) { .m-ff-rec { width: 58px; height: 58px; } .m-ff-rec i { width: 34px; height: 34px; } }

/* ---------- invitations, on the profile side ----------
   Two places, one component (assets/find-people.js): the card near the top of your own
   profile, and the wizard's finale. Invitations are half the funnel, so neither of them
   is allowed to read as an afterthought. */
.m-invitecard {
  background: linear-gradient(180deg, var(--white), #FCEBD2);
  border: 1.5px solid rgba(217,142,31,.42);
  box-shadow: 0 12px 34px rgba(33,29,22,.10);
  padding: 26px 24px;
}
.m-invitecard h2 { font-size: clamp(1.35rem, 4.4vw, 1.8rem); margin-bottom: 8px; }
.m-invitecard .kicker { margin-bottom: 8px; }
.m-invitecard p { color: var(--ink); }
.m-finale h1 { font-size: clamp(1.9rem, 6.2vw, 2.7rem); }
.m-lede {
  font-family: var(--font-display); font-style: italic; font-size: 1.18rem;
  color: var(--ink); margin: 12px 0 10px; line-height: 1.45;
}

/* ---------- a photo you can actually look at ----------
   A gallery of thumbnails you cannot open is a tease, so every photo on a profile — the
   hero included — is a tap target that fills the screen. assets/lightbox.js builds the
   overlay; these are its clothes. Phone first: the arrows sit low and wide of the photo
   where a thumb already is, and the photo itself is never cropped. */
.m-gallery.view .cell { cursor: zoom-in; }
.m-gallery.view img {
  transition: transform .18s ease, box-shadow .18s ease;
  background: var(--cream-deep);
}
.m-gallery.view .cell:hover img,
.m-gallery.view .cell:focus-visible img { transform: translateY(-2px); box-shadow: var(--shadow); }
.m-gallery .cell:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 14px; }
/* the hero photo says "open me" the same way, without shouting about it */
.m-avatar[data-lb] { cursor: zoom-in; }

html.m-lb-open, html.m-lb-open body { overflow: hidden; }
.m-lb {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(12, 11, 9, .94);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 12px 24px;
}
.m-lb[hidden] { display: none; }
.m-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.m-lb-img {
  max-width: min(100%, 1100px); max-height: calc(100vh - 110px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  -webkit-user-select: none; user-select: none;
}
.m-lb-cap { color: rgba(255,253,248,.72); font-size: .88rem; text-align: center; }
.m-lb-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,253,248,.22); background: rgba(255,253,248,.08);
  color: rgba(255,253,248,.9); cursor: pointer;
}
.m-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,253,248,.22); background: rgba(255,253,248,.08);
  color: rgba(255,253,248,.9); cursor: pointer;
}
.m-lb-nav.prev { left: 10px; }
.m-lb-nav.next { right: 10px; }
.m-lb-nav[hidden] { display: none; }
.m-lb-x:hover, .m-lb-nav:hover { background: rgba(255,253,248,.18); }
@media (max-width: 520px) {
  .m-lb { padding: 52px 8px 76px; }
  .m-lb-img { max-height: calc(100vh - 150px); }
  /* on a phone the arrows belong under the photo, in reach of a thumb, not beside it */
  .m-lb-nav { top: auto; bottom: 16px; transform: none; }
  .m-lb-nav.prev { left: 22%; }
  .m-lb-nav.next { right: 22%; }
}

/* ---------- when something in the video flow goes wrong ----------
   Nothing in the recording flow is allowed to fail quietly: a member who has just talked
   to a camera for a minute and a half deserves to be told plainly that it did not land,
   what to do next, and that their takes are still here. Warm, not alarming — the palette
   is the site's own clay red on cream, never a browser-error red. */
.m-ff-error {
  border: 1.5px solid rgba(164,68,47,.34);
  background: linear-gradient(180deg, var(--white), #FBEDE8);
}
.m-ff-error .m-ff-lead { color: var(--ink); }
.m-ff-warn {
  border-radius: 12px;
}
.m-ff-warn.on {
  display: block; padding: 11px 13px; margin-top: 12px; font-weight: 600;
  color: #8C3A27; background: #FBEDE8; border: 1.5px solid rgba(164,68,47,.34);
}
.m-ff-warn .why { display: block; font-weight: 400; font-size: .84rem; color: #9A7A6E; margin-top: 4px; }

/* ---------- the minute the file is on the wire (Aug 2) ----------
   A video is the one thing on this site that takes real time to send, and the screen has
   to show it moving. The bar is driven by the bytes themselves (XHR upload progress in
   assets/video-answer.js), not by a timer pretending — a bar that fills on its own is a
   lie with a nicer face. The percentage beside it is the single sanctioned number on a
   member page besides the unread badge: it is the member's own file, and "how much
   longer" is the only question this screen has to answer. */
.m-ff-sending { text-align: left; }
.m-ff-bar {
  height: 10px; border-radius: 999px; overflow: hidden; margin: 4px 0 2px;
  background: rgba(33,29,22,.1); box-shadow: inset 0 1px 2px rgba(33,29,22,.12);
}
.m-ff-bar > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  transition: width .25s ease-out;
}
/* the card a member meets when an upload was killed on the way — same warm clay as every
   other "this is us, not you" surface, never a browser red */
.m-ff-unsent {
  border: 1.5px solid rgba(217,142,31,.4);
  background: linear-gradient(180deg, var(--white), #FDF4E6);
}

/* ---------- the four items on an invitation (Aug 2) ----------
   Every page that can invite shows the same block: the relationship question, the
   compatibility item, the Two of You checkbox (on), the share-our-reports checkbox (off),
   and one Send it underneath. Nothing is behind a disclosure any more — the old details/
   summary rules went with it — because a choice you have to go looking for is a choice
   most people never make. */
.m-invpanel { margin-top: 12px; border-top: 1px dashed rgba(33,29,22,.16); padding-top: 6px; }
.m-invcheck { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); margin-top: 8px; cursor: pointer; }
.m-invcheck input { accent-color: var(--orange-deep); margin-right: 8px; }
.m-invlab { display: block; font-size: .84rem; font-weight: 700; color: var(--ink-soft); margin: 12px 0 4px; }
.m-invpanel select.m-input, .m-invpanel input.m-input { margin-top: 0; }
/* the block sits under a person's row, full width, inside the flex row — and so does the
   one button under it, or it would try to share a line with the name */
.m-person .m-invpanel, .m-person .m-invsend { flex: 1 0 100%; }
.m-person .m-invsend { margin-top: 14px; }
.m-invpanel[hidden] { display: none; }

/* ---------- WO7: the unread badge on the member nav ----------
   The one sanctioned count (Principle 4's narrow exception) — a small number beside
   Messages, drawn by assets/member-nav.js only when it is above zero. */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; margin-left: 7px; border-radius: 999px; background: var(--orange); color: var(--charcoal); font-size: .72rem; font-weight: 700; vertical-align: middle; }

/* ---------- WO7: the reveal door — the one next step after the publish switch ---------- */
.m-revealdoor { margin-top: 16px; padding: 16px 18px; background: linear-gradient(180deg, #FFFDF8 0%, #FEF7EA 100%); border: 1px solid rgba(240,166,60,.35); border-radius: 16px; }
.m-revealdoor p { margin: 0 0 12px; }
.m-revealdoor .btn { border: none; cursor: pointer; font-weight: 700; }

/* WO7.1 — publish build-steps: each missing item is a tappable jump (Matt, July 31) */
.m-buildstep { display: block; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line, #d8cfc2); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.m-buildstep:hover { border-color: var(--spark, #E8590C); }
.m-buildstep strong { color: var(--spark, #E8590C); }

/* Aug 1 — unread messages must be unmissable (Matt's live test): the Messages nav
   entry goes bold spark-orange whenever anything is unread; the existing orange
   pill carries the count, and member-nav.js now re-checks every 30s + on focus. */
.nav-links a.nav-unread { font-weight: 700; color: var(--spark, #E8590C); }

/* Aug 1 — when the nav is collapsed, the hamburger carries the unread signal */
.nav-toggle.nav-toggle-unread { position: relative; }
.nav-toggle.nav-toggle-unread::after { content: ""; position: absolute; top: 4px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--spark, #E8590C); }