/* Seekers Community, direction "Faces First" (ux-lead, 2026-10-24, run 2026-10-24-ui-journey-rethink).
   One file = one source of tokens. Fonts are embedded locally in fonts.css (OFL 1.1). No remote URLs.
   Contrast for every text pair below was computed (tools/b1/contrast.py); ratios noted beside each token. */
@import url("fonts.css");

:root {
  /* Palette P2 "Clay and Blue" (picked by Shresth, applied 2026-10-25). Ratios from tools/b1/contrast.py. */
  /* Ink and ground */
  --ink: #251915;      /* 17.09 on paper, 14.94 on ground */
  --ink-2: #58463E;    /* 8.90 on paper, 7.77 on ground */
  --ink-3: #6D5A51;    /* 6.50 on paper, 5.68 on ground: meta text only */
  --ink-hover: #3A2B25; /* WhatsApp button hover */
  --on-ink-2: #E3D6CF; /* secondary text on ink panels */
  --ground: #F5EFE4;   /* page */
  --paper: #FFFFFF;    /* items */
  --line: #E6DCCD;     /* separators (decorative) */
  --line-strong: #958478; /* control borders, 3.59 on paper */

  /* Action (clay): buttons, links, focus, selected */
  --action: #A23F25;   /* white on it 6.41 */
  --action-hover: #85321D;
  --action-tint: #F4E3D2; /* action on it 5.12 */
  --action-wash: #FBF4EC; /* checked radio card */

  /* Night (deep clay): events, announcements */
  --night: #55241A;    /* white on it 12.70 */
  --on-night: #FFFFFF;
  --on-night-2: #F0D3C6; /* 8.97 on night */
  --night-border: #C08E7C;

  /* Ask (blue): asks, the Ask button, unread. Never decoration. */
  --ask: #1D5A85;
  --ask-hover: #16486B;
  --ask-tint: #E1ECF5;
  --ask-line: #BCD3E5;
  --ask-wash: #F6F9FC;

  /* New business update ring */
  --ring: var(--action);
  --ring-seen: #D2C8BD;

  /* Win (turmeric): a fill under dark ink */
  --win: #E8A93B;
  --win-tint: #FBEFD5;
  --win-ink: #71470A;

  /* Trust: checked facts and vouches only */

  /* Headline highlight marks: stronger than tints, always under dark ink */

  /* Legacy names, kept so every var() in fs.css, b2a, b2b, eng-a, eng-b recolours with no edit */
  --neel: var(--action); --neel-night: var(--night); --neel-tint: var(--action-tint);
  --rani: var(--ask); --rani-tint: var(--ask-tint);
  --haldi: var(--win); --haldi-tint: var(--win-tint); --haldi-ink: var(--win-ink);

  /* Type */
  --f-display: "Anek Latin", "Hanken Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  /* Scale (about 1.2): 13 / 15 / 16 / 18 / 22 / 28 / 36 */

  /* Space: 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radius: a hierarchy, not one value */
  --r-tag: 5px;   /* community badges, labels: stamp-like */
  --r-ctl: 10px;  /* buttons, inputs */
  --r-item: 16px; /* feed items, panels */
  --r-sheet: 22px;

  --tabbar-h: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--f-body);
  padding-bottom: calc(var(--tabbar-h) + 8px);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--neel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--neel); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-sm { width: 16px; height: 16px; flex: none; }
h1, h2, h3, p { margin: 0; }

/* ---------- Layout shell ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 760px) { .wrap { padding: 0 var(--s8); } }

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(245, 239, 228, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: var(--s3); height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-word { font: 700 22px/1 var(--f-display); font-stretch: 88%; letter-spacing: -.01em; }
.nav { display: none; }
.top-search { display: none; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink); position: relative; text-decoration: none;
}
.icon-btn:hover { background: var(--paper); }
.dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--rani); box-shadow: 0 0 0 2px var(--ground); }
.me-link { display: none; }

@media (min-width: 1080px) {
  body { padding-bottom: 0; }
  .top .wrap { height: 68px; gap: var(--s6); }
  .nav { display: flex; gap: 2px; }
  .nav a {
    display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: var(--r-ctl);
    color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px;
  }
  .nav a:hover { background: var(--paper); color: var(--ink); }
  .nav a[aria-current="page"] { color: var(--action); box-shadow: inset 0 -2px 0 var(--action); border-radius: 0; }
  .top-search { display: flex; flex: 1; max-width: 340px; }
  .top-actions .search-btn { display: none; }
  .me-link { display: block; border-radius: 50%; }
}

/* Mobile tab bar: five destinations, labels always shown */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--tabbar-h); background: var(--paper); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); text-decoration: none; font-size: 13px; font-weight: 600; min-width: 0;
}
.tabbar a[aria-current="page"] { color: var(--neel); }
.tabbar a[aria-current="page"] .ico { stroke-width: 2.2; }
.tabbar .av { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] .av { box-shadow: 0 0 0 2px var(--neel); }
@media (min-width: 1080px) { .tabbar { display: none; } }

/* ---------- Atoms ---------- */
.av { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--line); object-fit: cover; }
.av-24 { width: 24px; height: 24px; }
.av-32 { width: 32px; height: 32px; }
.av-56 { width: 56px; height: 56px; }
.av-72 { width: 72px; height: 72px; }
.av-96 { width: 96px; height: 96px; }

.stack { display: flex; align-items: center; }
.stack .av { box-shadow: 0 0 0 2px var(--paper); }
.stack .av + .av { margin-left: -8px; }
.on-tint .stack .av { box-shadow: 0 0 0 2px var(--haldi-tint); }

/* Community badge: monogram + full name, so colour is never the only signal */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px;
  border-radius: var(--r-tag); font-size: 13px; font-weight: 600; line-height: 20px;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; text-decoration: none;
  max-width: 100%;
}
.badge .mono {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  background: var(--ink); color: #fff; font: 700 13px/1 var(--f-display); letter-spacing: .02em;
}
.badge .bn { overflow: hidden; text-overflow: ellipsis; }
/* Community classes (.c-mf, .c-db, ...) are kept in the markup as data hooks; all communities share ONE neutral badge (critique: no rainbow). */

.checked {
  display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; font-weight: 600;
}

.sample { font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* Buttons: 44px tall, verbs on every label */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid transparent;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--neel); color: #fff; }
.btn-primary:hover { background: var(--action-hover); }
.btn-quiet { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--neel); color: var(--neel); }
.btn-text { background: transparent; color: var(--neel); padding: 0 8px; }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: 15px; }
.btn-icon { width: 44px; padding: 0; }
.btn-primary .ico, .btn-primary svg { color: #fff; }
/* Pressed / done state (Going, Following, Sent): the only use of the action tint */
.btn[aria-pressed="true"] { background: var(--action-tint); color: var(--action); border-color: var(--action-tint); }
.btn-text:hover { text-decoration: underline; }

/* Filter chips: a pill is the one shape that means "filter" */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper);
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: none;
}
.chip .mono { width: 18px; height: 18px; font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--action); color: #fff; border-color: var(--action); }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); padding: 0 var(--s4) 2px; }
.chips-scroll .chip { flex: none; }
@media (min-width: 1080px) { .chips-scroll { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; } }
.chip-label { font-size: 13px; color: var(--ink-3); font-weight: 600; align-self: center; margin-right: 2px; }

/* ---------- Home ---------- */
.page-head { padding: var(--s5) 0 var(--s4); }
.hello { font-size: 15px; color: var(--ink-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.digest {
  margin-top: var(--s2);
  font: 600 28px/1.16 var(--f-display); font-stretch: 92%; letter-spacing: -.012em; color: var(--ink);
  text-wrap: balance;
}
.digest a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--line-strong); text-underline-offset: .14em; }
.digest a:hover, .digest a:focus-visible { color: var(--action); text-decoration-color: var(--action); }
@media (min-width: 1080px) { .digest { font-size: 36px; max-width: 22ch; } .page-head { padding: var(--s8) 0 var(--s5); } }

/* Business updates as status rings: the WhatsApp Status habit, used for business news */
.rings-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s2) 0 var(--s3); }
.label { font: 700 13px/1.2 var(--f-body); color: var(--ink-2); letter-spacing: .01em; }
.rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0; }
.ring .av { width: 58px; height: 58px; box-shadow: 0 0 0 2.5px var(--ground), 0 0 0 5px var(--ring); }
.ring.seen .av { box-shadow: 0 0 0 2.5px var(--ground), 0 0 0 4px var(--ring-seen); }
.ring .rn { font-size: 13px; line-height: 1.25; font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ring .rb { display: none; }
.ring-all .av { display: grid; place-items: center; background: var(--paper); color: var(--neel); box-shadow: 0 0 0 1px var(--line-strong); }
@media (min-width: 1080px) { .rings { grid-template-columns: repeat(7, 72px); gap: 16px; justify-content: start; } .ring .av { width: 64px; height: 64px; } }

.filters { margin: var(--s5) 0 var(--s4); }

.announce {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-item);
  background: var(--neel-night); color: #fff;
}
.announce .who { font-size: 13px; color: var(--on-night-2); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.announce p.msg { font-size: 16px; line-height: 1.45; margin-top: 3px; }
.announce a { color: #fff; font-weight: 700; }
.announce .badge { font-size: 13px; }

.cols { display: grid; gap: var(--s6); }
@media (min-width: 1080px) { .cols { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s10); align-items: start; } }

.divider {
  display: flex; align-items: center; gap: 12px; margin: var(--s6) 0 var(--s3);
  font: 700 13px/1 var(--f-body); color: var(--ink-2);
}
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.feed { display: grid; gap: var(--s3); }

/* An item is a sentence about a person: the name is the headline */
.item { background: var(--paper); border-radius: var(--r-item); padding: var(--s4); }
@media (min-width: 760px) { .item { padding: var(--s5) var(--s6); } }
.item-head { display: flex; gap: 12px; align-items: flex-start; }
.item-head .meta { min-width: 0; flex: 1; }
.line {
  font: 500 18px/1.25 var(--f-display); font-stretch: 94%; color: var(--ink-2); letter-spacing: -.005em;
}
.line b, .line a.n { font-weight: 700; color: var(--ink); text-decoration: none; }
.line a.n:hover { text-decoration: underline; }
@media (min-width: 1080px) { .line { font-size: 22px; } }
.sub { margin-top: 4px; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.body { margin-top: var(--s3); font-size: 16px; line-height: 1.5; color: var(--ink); }
.body.quote { padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink-2); }
.fit {
  margin-top: var(--s3); display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.replies { margin-top: var(--s3); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.actions { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions .share { margin-left: auto; }

.item.ask { box-shadow: inset 4px 0 0 var(--rani); }
.item.intro { background: var(--paper); }
.intro-pair { display: flex; align-items: center; }
.intro-pair .av { width: 44px; height: 44px; box-shadow: 0 0 0 3px var(--paper); }
.intro-pair .av + .av { margin-left: -10px; }
.item.win { background: var(--haldi-tint); }
.win-mark { display: none; background: var(--haldi); color: var(--ink); font: 700 13px/1 var(--f-body); padding: 5px 8px; border-radius: var(--r-tag); letter-spacing: .02em; }
.item.event { display: grid; grid-template-columns: 56px 1fr; gap: 14px; }
.date { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; text-align: center; width: 56px; height: 60px; padding: 6px 0 0; align-self: start; flex: none; box-sizing: border-box; }
.date .m { font: 700 13px/1 var(--f-body); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.date .d { font: 700 22px/1 var(--f-display); margin-top: 2px; }
.date .w { font: 600 13px/1 var(--f-body); color: var(--ink-3); margin-top: 2px; }
.faces-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: var(--s4); }
.face { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0; }
.face .fn { font-weight: 700; font-size: 15px; line-height: 1.2; }
.face .ft { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.item.thanks .line { color: var(--ink-2); }
.thanks-note { margin-top: var(--s2); font-size: 13px; color: var(--ink-3); }
.update-card { margin-top: var(--s3); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.update-type { font: 700 13px/1 var(--f-body); color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.update-card .ut { font: 700 18px/1.3 var(--f-display); font-stretch: 94%; }

/* ---------- Rail panels ---------- */
.rail { display: grid; gap: var(--s4); }
.panel { background: var(--paper); border-radius: var(--r-item); padding: var(--s5); }
.panel h2 { font: 700 18px/1.2 var(--f-display); font-stretch: 94%; margin-bottom: var(--s3); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel h2 a { font: 600 15px/1 var(--f-body); }
.person-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.person-row:first-of-type { border-top: 0; }
.person-row .pr-t { min-width: 0; flex: 1; }
.person-row .pn { font-weight: 700; font-size: 15px; line-height: 1.25; }
.person-row .pw { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.owner-nudge { background: var(--paper); color: var(--ink); }
.owner-nudge p { color: var(--ink-2); font-size: 15px; }
.owner-nudge .nums { display: flex; gap: 18px; margin: 12px 0 14px; flex-wrap: wrap; }
.owner-nudge .nums div { font-size: 13px; color: var(--ink-3); }
.owner-nudge .nums b { display: block; font: 700 28px/1 var(--f-display); color: var(--ink); }
.comm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; flex-wrap: wrap; }

/* ---------- Businesses ---------- */
.find-head { padding: var(--s5) 0 var(--s2); }
.find-head h1 { font: 700 28px/1.08 var(--f-display); font-stretch: 90%; letter-spacing: -.015em; }
.find-head p { color: var(--ink-2); margin-top: 6px; font-size: 16px; }
@media (min-width: 1080px) { .find-head { padding: var(--s8) 0 var(--s3); } .find-head h1 { font-size: 36px; } }
.searchbox { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 6px 0 12px; min-height: 52px; margin-top: var(--s4); width: 100%; max-width: 720px; }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; padding: 12px 0; }
.searchbox:focus-within { outline: 3px solid var(--neel); outline-offset: 2px; }
.searchbox .btn { flex: none; }
.top-search .searchbox { margin-top: 0; min-height: 44px; border-radius: var(--r-ctl); }
.top-search .searchbox input { font-size: 15px; padding: 9px 0; }

.filter-block { margin-top: var(--s4); display: grid; gap: var(--s3); }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: var(--s5) 0 var(--s3); flex-wrap: wrap; }
.result-bar .label { font-size: 15px; }
.sort { font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.sort select { border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--paper); min-height: 44px; padding: 0 10px; font-weight: 600; }

.biz-grid { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .biz-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }

/* A business is shown as the person who runs it */
.biz { background: var(--paper); border-radius: var(--r-item); padding: var(--s4); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) { .biz { padding: var(--s5); } }
.biz-top { display: flex; gap: 14px; align-items: flex-start; }
.biz-top .av { width: 64px; height: 64px; }
.biz-who { min-width: 0; flex: 1; }
.biz-name { font: 700 22px/1.12 var(--f-display); font-stretch: 90%; letter-spacing: -.01em; color: var(--ink); text-decoration: none; display: block; overflow-wrap: anywhere; }
.biz-name:hover { text-decoration: underline; }
.biz-owner { font-size: 15px; color: var(--ink-2); margin-top: 3px; }
.biz-owner b { color: var(--ink); }
.biz-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.used-by { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ground); color: var(--ink); font-size: 15px; line-height: 1.35; }
.used-by .stack .av { box-shadow: 0 0 0 2px var(--ground); }
.used-by b { color: var(--ink); }
.used-by.none { background: var(--ground); color: var(--ink-2); }
.biz-latest { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.biz-latest .update-type { margin-right: 6px; }
.biz-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: auto; }
.biz-actions .btn { padding: 0 8px; }

.ask-panel { background: var(--paper); border-radius: var(--r-item); padding: var(--s5); }
.ask-panel h2 { font: 700 22px/1.2 var(--f-display); font-stretch: 92%; color: var(--ink); }
.ask-panel p { color: var(--ink-2); font-size: 15px; margin: 6px 0 14px; }
.asked-list { list-style: none; padding: 0; margin: 0; }
.asked-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.asked-list li:first-child { border-top: 0; }

/* ---------- Business page ---------- */
.crumb { display: inline-flex; align-items: center; gap: 6px; margin: var(--s4) 0 0; color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; min-height: 44px; }
.bz { display: grid; gap: var(--s4); padding-bottom: var(--s10); }
@media (min-width: 1080px) { .bz { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s8); align-items: start; } }
.bz-hero { background: var(--paper); border-radius: var(--r-sheet); padding: var(--s5); }
@media (min-width: 760px) { .bz-hero { padding: var(--s8); } }
.bz-person { display: flex; gap: 16px; align-items: center; }
.bz-person .av { width: 88px; height: 88px; }
@media (min-width: 760px) { .bz-person .av { width: 112px; height: 112px; } }
.bz-kicker { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.bz-title { font: 700 28px/1.04 var(--f-display); font-stretch: 88%; letter-spacing: -.015em; margin-top: 2px; }
@media (min-width: 760px) { .bz-title { font-size: 36px; } }
.bz-what { font-size: 16px; line-height: 1.5; color: var(--ink); margin-top: var(--s4); max-width: 60ch; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--s4); font-size: 15px; color: var(--ink-2); }
.facts span { display: inline-flex; align-items: center; gap: 5px; }
.relation { margin-top: var(--s5); display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--ground); border-radius: 12px; font-size: 15px; line-height: 1.4; }
.relation b { color: var(--ink); }
.section { background: var(--paper); border-radius: var(--r-item); padding: var(--s5); }
@media (min-width: 760px) { .section { padding: var(--s6) var(--s8); } }
.section h2 { font: 700 22px/1.15 var(--f-display); font-stretch: 92%; margin-bottom: 4px; }
.section .h-note { font-size: 15px; color: var(--ink-3); margin-bottom: var(--s4); }
.vouches { display: grid; gap: 0; }
.vouch { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.vouch:first-child { border-top: 0; padding-top: 4px; }
.vouch .vt { min-width: 0; }
.vouch .vn { font-weight: 700; }
.vouch .vq { margin-top: 4px; color: var(--ink); }
.vouch .vm { margin-top: 6px; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.updates { display: grid; gap: var(--s3); }
.updates .update-card { margin-top: 0; }
.update-card .ud { font-size: 13px; color: var(--ink-3); }
.cat { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .cat { grid-template-columns: 1fr 1fr; } }
.cat-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cat-item .ct { font-weight: 700; font-size: 16px; }
.cat-item .cd { font-size: 15px; color: var(--ink-2); }
.cat-item .cp { font: 700 18px/1.2 var(--f-display); margin-top: auto; padding-top: 6px; }
.cat-item .btn { align-self: flex-start; }
.rule-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); background: var(--ground); padding: 10px 12px; border-radius: 10px; margin-bottom: var(--s4); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.check-list li .ico-sm { color: var(--ink-2); margin-top: 3px; }
.check-list small { display: block; color: var(--ink-3); font-size: 13px; }

.contact { background: var(--paper); border-radius: var(--r-item); padding: var(--s5); display: grid; gap: 10px; }
@media (min-width: 1080px) { .contact { position: sticky; top: 92px; } }
.contact h2 { font: 700 22px/1.2 var(--f-display); font-stretch: 92%; }
.contact .ch-sub { font-size: 15px; color: var(--ink-2); margin-top: -4px; }
.contact .btn { width: 100%; }
.contact .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.contact .small { font-size: 13px; color: var(--ink-3); }

/* Mobile sticky contact bar on the business page */
.contact-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 25; background: var(--paper);
  border-top: 1px solid var(--line); padding: 10px 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.contact-bar .btn { padding: 0 6px; }
body.has-contact-bar { padding-bottom: calc(var(--tabbar-h) + 72px); }
@media (min-width: 1080px) { .contact-bar { display: none; } body.has-contact-bar { padding-bottom: 0; } }

.foot { padding: var(--s8) 0 var(--s6); font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 16px; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .chip, .nav a, .icon-btn { transition: background-color .15s, color .15s, border-color .15s; }
}

/* Additions */
.desk-only { display: none; }
@media (min-width: 1080px) { .desk-only { display: block; } }
.ask-input { margin-top: 8px; width: 100%; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 12px; background: var(--paper); font-size: 16px; }
.mono-solo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--ink); color: #fff; font: 700 13px/1 var(--f-display); }
.chip[aria-pressed="true"] .mono-solo { box-shadow: 0 0 0 1.5px #fff; }

/* ---------- B1b additions: businesses + business page ---------- */
.mob-only { display: block; }
@media (min-width: 1080px) { .mob-only { display: none; } }
.page-find .top-search { display: none; }               /* the page has its own search; one box per screen */
.search-go { width: 44px; padding: 0; }
.search-go .go-t { display: none; }
@media (min-width: 760px) { .search-go { width: auto; padding: 0 18px; } .search-go .go-t { display: inline; } }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scope-select { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); font-weight: 600; }
.scope-select select { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--paper); min-height: 44px; padding: 0 10px; font-weight: 600; font-size: 15px; color: var(--ink); }
.biz-actions { grid-template-columns: 1.45fr 1fr 1fr; }
.biz-actions .btn { font-size: 15px; gap: 6px; }
.biz-latest { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-latest .ud { color: var(--ink-3); white-space: nowrap; }
.more-network { margin-top: var(--s4); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-item); font-size: 15px; color: var(--ink-2); }
.more-network b { color: var(--ink); }
.ask-panel .ask-input { background: var(--paper); }
.ask-panel .btn { margin-top: 10px; }
.asked-h { font: 700 13px/1.2 var(--f-body); color: var(--ink-2); margin: var(--s5) 0 4px; }
.asked-list li { display: flex; gap: 10px; align-items: flex-start; border-top-color: var(--line); }
.asked-list .aw { color: var(--ink-3); font-size: 13px; display: block; margin-top: 2px; }
@media (min-width: 1080px) { .find-rail { position: sticky; top: 92px; } }

.relation { flex-wrap: wrap; }
.relation .rel-t { flex: 1; min-width: 200px; }
.relation .btn { flex: none; }
.rel-history { margin-top: 8px; font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.contact .primary-acts { display: none; }
@media (min-width: 1080px) { .contact .primary-acts { display: grid; gap: 10px; } }
.contact .soft-acts { display: grid; gap: 10px; }
.cat-item .cp small { font: 500 15px/1 var(--f-body); color: var(--ink-3); }
.bz-main { display: grid; gap: var(--s4); min-width: 0; }
.desk-only-flex { display: none; }
.mob-only-flex { display: flex; }
.desk-chip { display: none; }
@media (min-width: 1080px) { .desk-only-flex { display: flex; } .mob-only-flex { display: none; } .desk-chip { display: inline-flex; } }
.contact-bar { grid-template-columns: 1.45fr 1fr 1fr; }
.contact-bar .btn { font-size: 15px; gap: 6px; }
.find-head h1 { text-wrap: balance; }
.find-head .sample { vertical-align: 1px; margin-left: 4px; }
.biz-meta { display: block; font-size: 15px; color: var(--ink-3); margin-top: 1px; }
.ask-row { display: flex; gap: 8px; margin-top: 4px; }
.ask-row .ask-input { margin-top: 0; flex: 1; min-width: 0; }
.ask-panel .ask-row .btn { margin-top: 0; }
.ask-panel .asked-h { margin: var(--s6) 0 2px; }
.relation { align-items: flex-start; }
.relation > .av { width: 44px; height: 44px; box-shadow: 0 0 0 2px #fff; }
.relation .rel-t { min-width: 0; flex: 1 1 220px; }
@media (max-width: 759px) { .relation .btn { flex: 1 1 100%; } }
/* B1b look-fixes on home */
.ring .rb { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring .rn { width: 100%; }
.announce .who { flex-wrap: nowrap; align-items: flex-start; }
.announce .who .ico-sm { margin-top: 2px; }
@media (min-width: 1080px) { .digest { font-size: 36px; max-width: 30ch; } }
.relation .rel-t { flex: 1 1 0; min-width: 0; }

/* critique-fix 2026-10-25 (ux-lead, business page): on a phone the contact bar replaces the tab bar, so the two are never stacked */
body.has-contact-bar .tabbar { display: none; }
body.has-contact-bar .contact-bar { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1079px) { body.has-contact-bar { padding-bottom: 88px; } }
/* critique-fix 2026-10-25 (ux-lead): at 375 the wordmark plus three header actions ran 11px past the screen on every page with a search icon */
.brand { min-height: 44px; }
@media (max-width: 400px) { .brand-word { font-size: 18px; } }
/* critique-fix 2026-10-25 (ux-lead): 44px hit area on standalone text links (card names, panel "see all", footer) without moving the layout */
.biz-name { padding-block: 10px; margin-block: -10px; }
.pc-name { display: inline-block; padding-block: 10px; margin-block: -10px; }
.panel h2 > a { display: inline-block; padding-block: 15px; margin-block: -15px; }
.foot a { display: inline-block; padding-block: 13px; margin-block: -13px; }
.person-row .pn > a { display: inline-block; padding-block: 13px; margin-block: -13px; }