/* ============================================================
   Resonance — the network page (WO6).
   Sits on top of assets/style.css + assets/member.css and borrows the
   July 30 mockup's vocabulary: orange spark for future friends,
   charcoal anchor for the circle, stone for the locked row.
   ============================================================ */

.n-pagewrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 70px; }
.page-head { padding: 44px 0 6px; max-width: 660px; }
.page-head h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
.page-head .lead { margin-top: 14px; font-size: 1.12rem; color: var(--ink-soft); }

/* ---------- section furniture ---------- */
.section { padding: 30px 0; }
.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.sec-mark { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sec-rule { flex: 1; height: 1px; min-width: 30px; }
.sec-note { font-size: .9rem; color: #8A8271; }

.sec-people .sec-mark { background: var(--charcoal); }
.sec-people .sec-rule { background: linear-gradient(to right, rgba(20,20,20,.22), rgba(20,20,20,0)); }
.sec-matches .sec-mark { background: var(--orange); box-shadow: 0 0 0 5px rgba(240,166,60,.18); }
.sec-matches .sec-rule { background: linear-gradient(to right, rgba(240,166,60,.55), rgba(240,166,60,0)); }
.sec-locked .sec-mark { background: #B9B3A6; }
.sec-locked .sec-rule { background: linear-gradient(to right, rgba(33,29,22,.13), rgba(33,29,22,0)); }
.sec-locked h2 { color: #8A8271; }
.sec-community .sec-mark { background: #B4653C; box-shadow: 0 0 0 5px rgba(180,101,60,.16); }
.sec-community .sec-rule { background: linear-gradient(to right, rgba(180,101,60,.5), rgba(180,101,60,0)); }
/* a button that reads as a link — the invite prompts act on this page, so they are
   buttons, but they must not look like a second call to action beside "say hello" */
.n-linkish { background: none; border: none; padding: 0; font: inherit; color: var(--orange-deep);
  font-weight: 700; cursor: pointer; text-decoration: underline; }
.n-linkish:hover { color: var(--ink); }
/* the invite composer, mounted in place on this page (Aug 2) */
.sec-invite .sec-mark { background: var(--orange-deep); box-shadow: 0 0 0 5px rgba(217,142,31,.16); }
.sec-invite .sec-rule { background: linear-gradient(to right, rgba(217,142,31,.5), rgba(217,142,31,0)); }
#netInviteMount { max-width: 640px; }

/* ---------- future-friends cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border: 1px solid rgba(33,29,22,.05); display: flex; flex-direction: column; }
.card.match { position: relative; border-top: 3px solid var(--orange); background: linear-gradient(180deg, #FFFDF8 0%, #FFFDF8 62%, #FEF7EA 100%); }
.card-top { display: flex; gap: 16px; align-items: center; }
.n-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px rgba(240,166,60,.18); }
/* the no-photo card: the constellation IS the face — larger, never an empty circle */
.n-sigface { flex: none; display: block; }
.n-sigface svg { display: block; overflow: visible; }
.name-row { display: flex; align-items: center; gap: 10px; }
.name-row h3 { margin: 0; font-size: 1.18rem; }
.name-row .mini-sig svg, .mini-sig svg { display: block; overflow: visible; opacity: .95; }
.type-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.type-name { font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.loc { font-size: .88rem; color: #8A8271; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }
.n-pin { width: 12px; height: 12px; }

.res-word { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--orange-deep); }
.res-word .sp { width: 17px; height: 17px; flex: none; }
.teaser { margin-top: 10px; font-size: .97rem; color: var(--ink-soft); border-left: 3px solid rgba(240,166,60,.5); padding-left: 13px; }
.new-badge { position: absolute; top: -11px; right: 16px; background: var(--orange); color: var(--charcoal); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(240,166,60,.4); }
.card-foot { margin-top: 18px; }
.card-foot .btn { border: none; cursor: pointer; font: inherit; font-weight: 700; }

/* ---------- the empty, honest states ---------- */
.n-empty { background: var(--white); border: 1.5px dashed rgba(33,29,22,.16); border-radius: var(--radius); padding: 26px 24px; color: var(--ink-soft); max-width: 560px; }
.n-empty p { margin: 0 0 14px; }
.n-empty p:last-child { margin: 0; }

/* ---------- the circle: compact rows ---------- */
.n-rows { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.n-active { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-bottom: 16px; }
.n-row { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: var(--white); border: 1px solid rgba(33,29,22,.07); border-top: 3px solid var(--charcoal); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); font: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.n-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.n-row.still { cursor: default; }
.n-row.still:hover { transform: none; box-shadow: var(--shadow); }
.n-rowsig { flex: none; display: block; }
.n-rowsig svg { display: block; overflow: visible; }
.n-rowname { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.n-rowtype { font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.n-rowband { flex: none; font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--orange-deep); }
.n-rowchips { flex: none; display: flex; gap: 6px; }
.grp-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: rgba(180,101,60,.09); border: 1px solid rgba(180,101,60,.28); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9A5330; }
/* narrow screens: the favorable word stays (the kindness rule's one sentence is never
   width-dependent) — the row simply wraps it under the name */
@media (max-width: 560px) { .n-row { flex-wrap: wrap; } .n-rowband { flex-basis: 100%; padding-left: 54px; margin-top: -4px; } }

/* search-within + letter groups appear only at the deep scale */
.n-search { margin-bottom: 14px; max-width: 720px; }
.n-search input { width: 100%; font: inherit; padding: 12px 16px; border-radius: 999px; border: 1.5px solid rgba(33,29,22,.14); background: var(--white); }
.n-search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--ring); }
.n-letter { font-family: var(--font-display); font-weight: 600; color: #8A8271; padding: 8px 4px 0; }

/* ---------- the locked shelf ---------- */
.locked-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
@media (max-width: 1000px) { .locked-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px) { .locked-row { grid-template-columns: repeat(2, 1fr); } }
.locked { position: relative; background: #F5F1E8; border: 1px solid rgba(33,29,22,.07); border-radius: 16px; padding: 20px 14px 16px; text-align: center; cursor: default; pointer-events: none; user-select: none; box-shadow: 0 4px 14px rgba(33,29,22,.04); overflow: hidden; }
.locked .mark { display: block; margin: 0 auto 10px; width: 56px; }
.locked .mark svg { display: block; margin: 0 auto; overflow: visible; filter: blur(1.1px) grayscale(1); opacity: .72; }
.locked .loc-l { font-size: .84rem; color: #9A9284; font-weight: 600; }
.locked .lock { position: absolute; top: 11px; right: 11px; width: 14px; height: 14px; opacity: .42; }
.locked.more { display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px dashed rgba(33,29,22,.16); box-shadow: none; }
.locked.more span { font-family: var(--font-display); font-style: italic; color: #A79E8D; font-size: 1rem; }
.unlock-note { margin-top: 20px; font-size: .98rem; color: var(--ink-soft); display: flex; align-items: center; gap: 11px; }
.unlock-note .k { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; }

/* ---------- community gardens (hidden until one exists) ---------- */
.garden { position: relative; overflow: hidden; border-radius: 26px; padding: 30px 30px 26px; background: linear-gradient(178deg, #FEF5E8 0%, #FCEBD2 68%, #F9E2C4 100%); border: 1px solid rgba(180,101,60,.30); }
.garden::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #B4653C 0%, #B4653C 28%, var(--orange-deep) 72%, var(--orange) 100%); }
.garden > * { position: relative; z-index: 1; }
.garden-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.garden-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9A5330; }
.garden-emblem { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #B4653C; box-shadow: 0 0 0 4px rgba(180,101,60,.18); }
.garden-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .garden-grid { grid-template-columns: 1fr; } }

/* ---------- the person sheet ---------- */
.n-personsheet { max-width: 760px; padding: 16px; }
.n-personsheet .m-hero { margin: 0 0 4px; }
.n-personhero { position: relative; }
.n-sheetbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.n-youtwo { padding-top: 22px; }
.n-youtwo .kicker { display: block; }
.n-youtwo .res-word { margin-top: 4px; }
.n-loading { padding: 40px 0; text-align: center; color: var(--ink-soft); }

/* ---------- WO7: hellos, actions, the quiet safety row ---------- */
.card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.n-hellosent { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-style: italic; color: #8A8271; font-size: 1rem; }
.n-hellosent .sp { width: 15px; height: 15px; flex: none; opacity: .7; }
.n-quiet { font: inherit; font-size: .88rem; color: #8A8271; background: none; border: none; cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(138,130,113,.45); }
.n-quiet:hover { color: var(--ink); }
.sec-hellos-wrap .sec-note { color: var(--ink-soft); }
.n-hellocard { border-top-color: var(--orange-deep); }
.n-actionbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 18px; }
.n-actionbar .btn { border: none; cursor: pointer; font: inherit; font-weight: 700; }
.n-gradrow { padding-top: 6px; }
.n-safetyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(33,29,22,.08); margin-top: 26px; }
.n-safetyrow .n-dot { color: #B9B3A6; }
.n-confirm { flex-basis: 100%; background: #F5F1E8; border-radius: 14px; padding: 14px 16px; margin-top: 6px; }
.n-confirm .m-fine { margin: 0 0 10px; }
.n-reportnote { width: 100%; font: inherit; font-size: .95rem; border: 1.5px solid rgba(33,29,22,.14); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--white); resize: vertical; }
.n-reportnote:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--ring); }

/* the reveal banner (WO7): one warm block above the same page, nothing heavier */
.n-reveal { background: linear-gradient(180deg, #FFFDF8 0%, #FEF7EA 100%); border: 1px solid rgba(240,166,60,.35); border-top: 3px solid var(--orange); border-radius: var(--radius); padding: 24px 26px; margin-top: 30px; max-width: 720px; box-shadow: var(--shadow); }
.n-reveal .kicker { display: block; margin-bottom: 8px; }
.n-reveal-lead { margin: 0 0 10px; font-size: 1.06rem; color: var(--ink); }
.n-reveal .m-fine { margin: 0; }

/* WO9 — the way into a pair's Fast Friends room, from the three surfaces that already
   know the pair. Quiet everywhere: the hello is still the first move on a match card,
   and the row's own job is still to open the person. */
a.n-quiet { color: #8A8271; }
a.n-quiet:hover { color: var(--ink); }
.n-actionbar a.m-btn-small, .card-foot a.m-btn-small { display: inline-block; text-decoration: none; }
/* on a match card the hello keeps the left; the room sits opposite it, or on its own
   line under it when the card is narrow — never mistaken for a second call to action */
.card-foot a.n-ffgo { margin-left: auto; }
/* a circle row and its room link share one line on a wide screen; below the row's own
   wrap point the row takes the whole line and the link tucks under the name */
.n-rowwrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.n-rowwrap .n-row { flex: 1 1 auto; min-width: 0; }
.n-rowwrap a.n-ffgo { flex: none; font-size: .84rem; }
@media (max-width: 620px) {
  .n-rowwrap .n-row { flex: 1 1 100%; }
  .n-rowwrap a.n-ffgo { padding-left: 54px; margin-top: -2px; }
}

/* Aug 1 — the just-connected banner on the person sheet (Matt: land on the person, not the message box) */
.n-connected { background: #fff8ef; border: 1px solid var(--spark, #E8590C); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }

/* Aug 1 — next-steps pills at the connect moment (Matt): FF previewed, Two of You teased */
.n-nextkicker { margin-top: 12px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--spark, #E8590C); font-weight: 700; }
.n-nextpills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.n-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: .92rem; font-weight: 600; cursor: default; }
.n-pill-live { background: var(--spark, #E8590C); color: #fff; opacity: .92; }
/* the live pill is a real link since WO9 — it must not pick up the site's link colour
   or its hover underline */
a.n-pill { cursor: pointer; text-decoration: none; }
a.n-pill:hover { text-decoration: none; opacity: 1; }
a.n-pill-live { color: #fff; }
a.n-pill:focus-visible, button.n-pill:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
/* WO9 (g) — the Two of You pill becomes a real button once dyad-update says the pair
   have something to build from. A button does not inherit the page's font on its own. */
button.n-pill { font: inherit; font-size: .92rem; font-weight: 600; border: none; cursor: pointer; }
button.n-pill:hover { opacity: 1; }
button.n-pill[disabled] { opacity: .6; cursor: default; }
.n-pill-locked { background: #eee7dc; color: #8a8177; }
.n-pilltag { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.25); border-radius: 999px; padding: 2px 8px; }
.n-pill-locked .n-pilltag { background: #ddd3c4; color: #6d655b; }

/* August fix batch — AN INVITATION ADDRESSED TO YOU IS NOT A GREY LINE (Matt: "stop
   being so quiet with everything"). Where the quiet "Fast Friends" link would sit for
   somebody who has already asked you, this takes its place: filled orange, their name in
   it, and three pulses on every visit until it is engaged with. */
.n-ffinvite { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px;
  border-radius: 999px; background: var(--orange); color: var(--charcoal);
  font-size: .92rem; font-weight: 700; text-decoration: none; line-height: 1.25;
  box-shadow: 0 8px 22px rgba(240,166,60,.4); }
.n-ffinvite:hover { background: #F5B355; color: var(--charcoal); text-decoration: none; }
.n-ffinvite:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring), 0 8px 22px rgba(240,166,60,.4); }
.n-ffinvite .sp { width: 16px; height: 16px; flex: none; }
.n-ffinvite .go { flex: none; font-weight: 700; }
/* it wants its own line wherever it lands — a card foot, a circle row, a person sheet */
.card-foot .n-ffinvite, .n-rowwrap .n-ffinvite, .n-actionbar .n-ffinvite { margin-left: 0; }
.n-rowwrap .n-ffinvite { flex-basis: 100%; margin-top: 2px; }
@media (max-width: 620px) { .n-rowwrap .n-ffinvite { margin-left: 54px; } }

/* Aug 1 — the received-hello card flashes its outline a few times on arrival (Matt).
   Three gentle pulses, then still; skipped entirely for reduced-motion users. */
@keyframes n-attention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 89, 12, .55); }
}
.n-attention { animation: n-attention-pulse 1.1s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .n-attention { animation: none; } }