/* 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}   /* 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:10px;padding-top:6px;padding-bottom:7px}
.sbar-it{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;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}
.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 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) ----------------- */