/* eng-a.css: engagement additions, set A (home, businesses, business, events).
   ux-lead, run 2026-10-24-palette-name-engagement. Linked AFTER fs.css (and b2a.css where used).
   Rule for this file: colours come ONLY from fs.css tokens (var(--...)), so a palette swap in fs.css
   recolours every addition here, including the inline "photo" and "work" art. No hex, no rgb. */

/* ---------- Shared: a face beside one line of text ---------- */
.peek {
  margin-top: var(--s3); display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.45; color: var(--ink-2);
}
.peek .av { margin-top: 1px; }
.peek b { color: var(--ink); font-weight: 700; }
.peek q { quotes: "\201C" "\201D"; color: var(--ink); }

/* ---------- Home: a newcomer's first Ask, nobody has replied yet ---------- */
.first-post {
  display: inline-flex; align-items: center; gap: 5px; font: 700 13px/1 var(--f-body); letter-spacing: .02em;
  color: var(--ink-3); background: transparent; padding: 4px 0;
}
.no-reply {
  margin-top: var(--s3); display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.helper {
  margin-top: var(--s3); display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--ground);
}
.helper .h-t { flex: 1 1 200px; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.helper .h-t b { color: var(--ink); }
.helper .h-k { display: block; font: 700 13px/1.2 var(--f-body); letter-spacing: .03em; color: var(--ink-3); margin-bottom: 2px; }
@media (max-width: 759px) { .helper .btn { flex: 1 1 100%; } }

/* ---------- Home: the host's question of the week, answered in one tap ---------- */
.item.qotw { box-shadow: inset 0 0 0 1px var(--line); }
.qotw-k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); flex-wrap: wrap; }
.qotw-q {
  margin-top: var(--s2); font: 700 22px/1.18 var(--f-display); font-stretch: 90%; letter-spacing: -.01em; color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 1080px) { .qotw-q { font-size: 28px; } }
.one-tap { margin-top: var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.one-tap .btn { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.25; padding: 8px 12px; font-size: 15px; }
@media (min-width: 760px) { .one-tap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qotw .answers { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.qotw .answers .peek { margin-top: 0; }
.qotw .note { font-size: 13px; color: var(--ink-3); }

/* ---------- Home: reactions are verbs; the faces matter, not a total ---------- */
.verbs { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verbs .btn { gap: 6px; }
.verbs .share { margin-left: auto; }
.on-tint .btn-quiet { background: var(--paper); }

/* ---------- Home rail: asks the viewer's business could answer ---------- */
.match { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.match:first-of-type { border-top: 0; padding-top: 2px; }
.match .m-t { min-width: 0; flex: 1; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.match .m-t b { color: var(--ink); }
.match .m-why { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.match .btn { margin-top: 8px; }
.panel .p-note { font-size: 15px; color: var(--ink-2); margin: -4px 0 var(--s2); }

/* ---------- Businesses: one line from a member whose referral closed ---------- */
.story {
  margin: -4px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-strong);
  font-size: 15px; line-height: 1.45; color: var(--ink);
}
.story .sw { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.new-here {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: var(--ground); color: var(--ink); font-size: 15px; line-height: 1.4;
}
.new-here .nh-t { flex: 1 1 180px; min-width: 0; }
.new-here .first-post { background: var(--paper); }
.new-here .btn { flex: none; }
.asked-list .aw .go { font-weight: 700; color: var(--neel); text-decoration: underline; text-underline-offset: 2px; }
.asked-list .aw .first { font-weight: 700; color: var(--ink); }
.asked-list .fit-biz { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.asked-list .fit-biz b { color: var(--ink); }

/* ---------- Business page: work gallery ---------- */
.gallery { display: grid; grid-template-columns: 1fr; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { margin: 0; display: grid; gap: 8px; }
.gallery .art { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ground); }
.gallery .art svg { width: 100%; height: 100%; }
.gallery figcaption { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.gallery figcaption b { color: var(--ink); display: block; font-size: 15px; }
@media (max-width: 559px) { .gallery .art { aspect-ratio: 16 / 9; } }

/* Shared fills for inline art (work + photo plates). Classes, not colours, so the palette can move. */
.f-ground { fill: var(--ground); } .f-paper { fill: var(--paper); } .f-line { fill: var(--line); }
.f-strong { fill: var(--line-strong); } .f-ink { fill: var(--ink); } .f-ink2 { fill: var(--ink-2); }
.f-neel { fill: var(--neel); } .f-night { fill: var(--neel-night); } .f-tint { fill: var(--neel-tint); }
.f-on-night { fill: var(--on-night-2); } .f-trust { fill: var(--ink-2); } .f-trust-tint { fill: var(--ground); }
.f-haldi { fill: var(--haldi); } .f-haldi-tint { fill: var(--haldi-tint); }
.s-trust { fill: none; stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.s-on-night { fill: none; stroke: var(--on-night-2); stroke-width: 3; stroke-linecap: round; }
.t-art { font-family: var(--f-display); font-weight: 700; }

/* ---------- Business page: questions members asked the owner ---------- */
.qa { display: grid; gap: 0; }
.qa-item { padding: 14px 0; border-top: 1px solid var(--line); }
.qa-item:first-child { border-top: 0; padding-top: 4px; }
.qa-q { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.4; }
.qa-q .qm { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.qa-a { margin: 10px 0 0 42px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); }
.qa-a .who { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.qa-ask { margin-top: var(--s4); display: flex; gap: 8px; }
.qa-ask .ask-input { margin-top: 0; flex: 1; min-width: 0; }
.qa-ask-note { margin-top: 8px; font-size: 13px; color: var(--ink-3); }

/* Business page: the owner's own session, with who is going */
.update-card.session { border-color: var(--line); background: var(--paper); }
.session .ev-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 15px; color: var(--ink); }
.session .ev-row .stack .av { box-shadow: 0 0 0 2px var(--paper); }
.session .s-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Events: greeter, a question to the host, calendar ---------- */
.greeter {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  background: var(--ground); color: var(--ink); font-size: 15px; line-height: 1.4;
}
.greeter .av { width: 32px; height: 32px; }
.greeter b { font-weight: 700; }
.host-q { font-size: 15px; line-height: 1.45; color: var(--ink-2); display: grid; gap: 4px; }
.host-q .hq { color: var(--ink); }
.host-q .ha { display: flex; gap: 8px; align-items: flex-start; }
.host-q .ha .av { width: 24px; height: 24px; margin-top: 1px; }
.host-q a { font-weight: 700; }

/* ---------- Events: photo recap of the last meet (duotone plates, palette-driven) ---------- */
.recap { background: var(--paper); border-radius: var(--r-item); padding: var(--s4); display: grid; gap: var(--s3); }
@media (min-width: 760px) { .recap { padding: var(--s5); } }
.recap-k { font: 700 13px/1.2 var(--f-body); color: var(--ink-2); letter-spacing: .01em; }
.recap h3 { font: 700 22px/1.15 var(--f-display); font-stretch: 92%; letter-spacing: -.01em; color: var(--ink); margin-top: 2px; }
.plates { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; border-radius: 12px; overflow: hidden; }
.plates svg { width: 100%; height: 100%; aspect-ratio: 4 / 3; display: block; }
.plates .wide svg { aspect-ratio: auto; }
@media (max-width: 559px) { .plates { grid-template-columns: 1fr 1fr; } .plates .wide { grid-column: 1 / -1; } .plates .wide svg { aspect-ratio: 16 / 7; } }
.recap .in-these { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); flex-wrap: wrap; }
.recap .host-line { font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--line); padding-left: 10px; }
.recap .r-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.recap .r-acts .share { margin-left: auto; }

.ev-acts .cal { gap: 6px; }

/* ---------- Added in the completion pass ---------- */
.sub .first-post { margin-right: 2px; }
.m-end { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.qa-wait { margin: 10px 0 0 42px; display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--ink-2); }
.recap { margin-top: var(--s4); }
.biz .story { margin: 0; }
.ev .host-q { padding-top: 2px; }
.qotw-k { flex-wrap: nowrap; align-items: flex-start; }
.qotw-k > span { flex: 1; min-width: 0; }
.qotw-k .av { margin-top: 1px; }
/* Haldi is reserved for wins in fs.css, so "new" and "greeter" use the neutral ground with a drawn edge instead. */
.first-post { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-strong); }
.new-here, .greeter { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.new-here .first-post { background: var(--paper); }
.asked-list .fit-biz { align-items: flex-start; }
.asked-list .fit-biz > span { flex: 1; min-width: 0; }
.asked-list .fit-biz .ico-sm, .asked-list .fit-biz .av { margin-top: 1px; flex: none; }
/* Phone: the gallery is a list of thumbnail rows, not three tall plates */
@media (max-width: 559px) {
  .gallery { gap: var(--s3); }
  .gallery figure { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
  .gallery .art { aspect-ratio: 4 / 3; }
}
.session .ev-row { flex-wrap: nowrap; }
.session .ev-row .evt { flex: 1; min-width: 0; }
@media (min-width: 560px) {
  .plates { height: 180px; }
  .plates svg, .plates .wide svg { aspect-ratio: auto; height: 100%; }
}