/* social.css — the look of the social surfaces: World, MyTribe, friends, groups, circles, member lists, posts and comments.
   The one home (app/social/README.md, Masud 2026-09-21). Loaded by app/layout.php after style.css and circles.css, so a rule
   here wins over the same selector there — and the old one is DELETED in the same commit, never left to fight.
   Tokens (--paper, --ink, --green, --side, --gut, --zk-sat, --zk-bar) come from style.css and are not redefined here.
   Binding rules: INV-0332 (outline marks only), INV-0327 (never restyle the strip/bar padding), INV-0335 (--side, no gutters).

   SKELETON 2026-09-21 — sections in the order a person meets them; each is empty until its rules move in. */

/* tokens that are social's own (the platform's come from style.css and are not redefined here) */
:root{--social-gold:#c9a227}
/* the header bar's own marks, a darker brown on the cream header (Masud, 2026-09-26: "a little darker brown to be more visible").
   Only in the cream tool header (body.chrome-tool .spair-row) — a brand_own dark header and a dark page's own row keep the gold. */
:root{--social-bar-ink:#7f5417}
body.chrome-tool .spair-row .sbar-it:not(.is-here){color:var(--social-bar-ink)}   /* the page you are on keeps its own dark mark */   /* dark yellow — the accent for a link that stands beside a heading (Masud, 2026-09-21) */

/* ---- 1. the main menu on these surfaces (.mainnav) ------------------------------------------------------------ */

/* ---- 2. World — the feed (feed.php) ---------------------------------------------------------------------------- */

/* ---- 3. MyTribe — the compound (members.php) ------------------------------------------------------------------ */

/* ---- 4. friends (friends.php, friend_join.php) ----------------------------------------------------------------- */
/* THE PAIR — one row: the heading of where you are (white) and the way over (dark yellow), drawn by social_pair() in
   app/social/pair.php for every surface: Friends ⇄ Friends' posts, <tribe> ⇄ Family members, <group> ⇄ Members,
   <circle> ⇄ Members (Masud, 2026-09-21: "apply the same structure"). The pill's look for both halves — bold sans 15 px;
   the count is a small white tag; icons ride on currentColor. Nothing here depends on street_ctx.php, so the compound
   (public/) and the street (street/) draw the same row. */
.spair{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 14px;flex-wrap:wrap}
.spair-h,.spair h1{margin:0;display:flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;font-size:15px;line-height:1.2}
.spair-ic{display:inline-flex}.spair-ic svg,.spair-h svg{width:18px;height:18px;stroke:currentColor;fill:none}
.spair-link{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:9px 15px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:transparent;color:var(--social-gold);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none}
.spair-n{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.12);color:#5c6b63;background:#fff;font-weight:700}
/* THE MARKS ROW (.sbar): MyTribe's Members · Posts · Video, no words ("Space is treasure!!!!", 2026-09-22). Compact: 40 px marks,
   the row 6 px above and below. Where you are: white, no box; the way over: dark yellow in the pill's box. */
.topbar .sbar{justify-content:flex-start;gap:5px;padding-top:6px;padding-bottom:7px}
.sbar-it{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 8px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);color:var(--social-gold);text-decoration:none}
.sbar-it svg{width:22px;height:22px;stroke:currentColor;fill:none}
.sbar-it.is-here{color:inherit;border-color:transparent;padding:0 6px}
/* EVERY ICON IN THE TOP BAR LIGHT GREY (Masud, 2026-10-20: "also on the top, every emoji should be light grey") — on the dark bars; ZMail's light tool bar keeps its own dark marks (body.chrome-tool) */
body:not(.chrome-tool) .sbar-it,body:not(.chrome-tool) .sbar-it.is-here{color:#d0d6d3}
.spair-more{display:flex;gap:8px}
/* a mark-only door in the pair's row (Find friends, 2026-09-22): the pill's box, no words — the icon rides on currentColor */
.spair-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);color:inherit;text-decoration:none}
.spair-ico svg{width:20px;height:20px;stroke:currentColor;fill:none}
button.spair-ico{background:transparent;cursor:pointer;font:inherit}
/* THE HELP MARK (2026-10-20): far right of every row; its panel is one more line of the row, a light card with dark words on any bar */
.sbar .shelp{margin-left:auto}
body:not(.chrome-tool) .shelp .spair-ico{color:#d0d6d3}
.shelp-pan{display:none;flex:1 1 100%;margin:8px 0 2px;padding:6px;border-radius:12px;background:#fbfaf6;color:#1f2a26;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.shelp-pan.open{display:block}
.topbar .spair:has(.shelp-pan.open){flex-wrap:wrap}   /* the open panel takes its own line under the marks, as search does */
.shelp-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;color:#1f2a26;text-decoration:none;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.shelp-row::-webkit-details-marker{display:none}
.shelp-row:hover{background:#efece2}
.shelp-h{margin:0;cursor:default}.shelp-h:hover{background:transparent}
.shelp-status{margin:6px 0 0;font-size:14px;color:#3d4a44}.shelp-status:empty{display:none}
.shelp-mic{display:inline-flex;align-items:center;gap:7px;margin:8px 0 0;padding:8px 13px;border:1px solid #c9c4b5;border-radius:999px;background:transparent;color:#1f2a26;font:inherit;font-size:14px;cursor:pointer}
.shelp-mic.live{border-color:#b03a2e !important;color:#8f2a20 !important}
.shelp-ask form{padding:2px 12px 10px}
.shelp-say{margin:0 0 6px;font-size:14px;color:#3d4a44}
.shelp-ask textarea::placeholder{color:#5f6b65;opacity:1}
.shelp-ask textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #c9c4b5;border-radius:9px;background:#fff;color:#1f2a26;font:inherit;font-size:15px}
.shelp-go{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.shelp-go .vmic{color:#1f2a26;border-color:#c9c4b5 !important}
.shelp-btn{margin-top:8px;padding:8px 18px;border:0;border-radius:999px;background:#1f4d3d;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.shelp-btn:disabled{opacity:.6}
.shelp-pan.open{max-height:78vh;overflow:auto}
.shelp-list{list-style:none;margin:10px 0 0;padding:0}.shelp-list:empty{display:none}
.shelp-list li{border-top:1px solid #e3dfd3;padding:9px 0}
.shelp-q{margin:0 0 4px;font-size:14px;color:#3d4a44}
.shelp-a{margin:0;font-size:15px;line-height:1.5;font-weight:700;white-space:pre-wrap;color:#1f2a26}
/* the answer in front (2026-10-20): a card over the page; the arrow folds it into the list */
.shelp-pop-bg{position:fixed;inset:0;z-index:10050;display:flex;align-items:flex-start;justify-content:center;padding:16vh 16px 16px;background:rgba(18,24,21,.38)}
.shelp-pop{position:relative;box-sizing:border-box;width:100%;max-width:520px;max-height:68vh;overflow:auto;padding:16px 58px 18px 18px;border-radius:16px;background:#fbfaf6;color:#1f2a26;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.shelp-pop .shelp-a{font-size:17px}
.shelp-fold{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #c9c4b5;border-radius:10px;background:#fff;color:#1f2a26;cursor:pointer}
.shelp-note{margin:8px 0 0;font-size:12.5px;color:#4f5b55}
/* the search field opens as one more line of the bar's row (2026-09-22) — hidden until the mark is tapped; the bar re-measures */
.sbar-search{display:none;flex:1 1 100%;gap:8px;margin:8px 0 2px}
.sbar-search.open{display:flex}
.topbar .spair:has(.sbar-search.open){flex-wrap:wrap}   /* the open field takes its own line under the marks */
.sbar-search input{flex:1;min-width:0;height:38px;padding:0 12px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:transparent;color:inherit;font:inherit;font-size:15px}
.sbar-search input::placeholder{color:inherit;opacity:.55}
.sbar-search input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button}
/* THE PAIR AS THE BAR'S SECOND ROW (Masud, 2026-09-22: "static at the position shown … always visible"): layout.php draws it
   inside .topbar, under the marks row, so the bar's one measurement covers it and the page slides under it. */
.topbar .spair-row{width:100%;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.topbar .spair{max-width:1140px;margin:0 auto;padding:8px max(12px,var(--side,1mm)) 9px;flex-wrap:nowrap}
.topbar .spair-h{min-width:0}.topbar .spair-h,.topbar .spair-link{white-space:nowrap}

/* ---- 5. groups (groups.php, group.php, groupcall.php) --------------------------------------------------------- */

/* ---- 6. circles (circles.php, circle*.php) — circles.css moves in here ----------------------------------------- */

/* ---- 7. member lists (members_all.php, people_pick.php, find.php) --------------------------------------------- */

/* ---- 8. a post, and its comments (post_create.php, post_action.php, comment.php, profile.php) ----------------- */