/* FedM8 Teaming (owner direction 2026-10-16; r15, r18). The approved visual contract (DESIGN.md): paper
   #fffef9, canvas #f5f3ec, olive #526547, thin muted green lines, dark green text, plain sans-serif
   controls, serif headings. No gold here (gold is for brand and deadlines). Phone targets are 44px. */
/* FIX-3: the tokens sit on every tm- element (not a short list of containers), so a piece mounted on its
   own, like the join control in the contract page's Tools bar, never falls back to transparent. */
:where([class^="tm-"], [class*=" tm-"]) {
  --tm-paper:#fffef9; --tm-canvas:#f5f3ec; --tm-olive:#526547; --tm-olive-dark:#344b2c; --tm-ink:#29372e;
  --tm-muted:#586653; --tm-line:#d9ded0; --tm-soft:#eef1e7; --tm-tag:#e5ecdb; --tm-tag-line:#c3d0b2; --tm-on:#2f7d4a;
}
.tm-chips-wrap { display:grid; gap:6px; }
.tm-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tm-chips-label { color:var(--tm-muted); font-size:12.5px; margin-right:2px; }
.tm-chip { display:inline-flex; align-items:center; min-height:32px; padding:4px 11px; border:1px solid var(--tm-line); border-radius:999px; background:var(--tm-paper); color:var(--tm-olive-dark); font:inherit; font-size:12.5px; cursor:pointer; }
.tm-chip:hover { background:var(--tm-soft); }
.tm-chip.on { background:var(--tm-tag); border-color:var(--tm-olive); color:var(--tm-olive-dark); font-weight:600; box-shadow:inset 0 0 0 1px var(--tm-olive); }
.tm-chips-note { margin:0; color:var(--tm-muted); font-size:12px; }
.tm-join { margin:0; }
.tm-join-line, .tm-status { margin:6px 0 0; color:var(--tm-muted); font-size:12.5px; }
.tm-status:empty { display:none; }
.tm-tag { display:inline-block; align-self:flex-start; width:max-content; max-width:100%; margin:0 0 6px; padding:2px 9px; border:1px solid var(--tm-tag-line); border-radius:999px; background:var(--tm-tag); color:var(--tm-olive-dark); font-size:11.5px; font-weight:700; line-height:1.5; }
.crx-msg-main > .tm-tag { margin:4px 0 4px; }
.tm-interest { border:1px solid var(--tm-line) !important; }
.tm-interest.on { background:var(--tm-tag) !important; border-color:var(--tm-tag-line) !important; font-weight:600; }
.tm-see { font-weight:600; }
/* the poster's list */
.tm-list-host { margin:8px 0 0; }
.tm-list { display:grid; gap:8px; padding:10px 12px; border:1px solid var(--tm-line); border-radius:6px; background:var(--tm-paper); color:var(--tm-ink); }
.tm-list-h { margin:0; font-family:"Source Serif 4","Newsreader",Georgia,serif; font-size:15px; font-weight:600; }
.tm-person { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--tm-line); min-width:0; }
.tm-person:first-of-type { border-top:0; }
.tm-who { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; min-width:0; flex:1; }
.tm-name { font-size:13px; color:var(--tm-ink); }
.tm-meta { color:var(--tm-muted); font-size:11.5px; }
.tm-avatar { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--tm-soft, #eef1e7); color:var(--tm-olive-dark, #344b2c); font:600 11px/1 "DM Sans",system-ui,sans-serif; position:relative; }
.tm-avatar.tm-on::after { content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--tm-on, #2f7d4a); border:2px solid #fffef9; }
.tm-btn { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 14px; border:1px solid var(--tm-olive, #526547); border-radius:6px; background:var(--tm-olive, #526547); color:#fff; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.tm-btn:hover { background:var(--tm-olive-dark, #344b2c); }
body.fd-design a.tm-btn, body.fd-design a.tm-btn:visited, body.fd-design a.tm-btn:hover { color:#fff; text-decoration:none; }
.tm-btn:focus-visible, .tm-chip:focus-visible, .tm-link:focus-visible { outline:2px solid var(--tm-olive, #526547); outline-offset:2px; }
/* The segmented control clips its children (rounded corners), so its focus ring sits inside (FIX-1). */
.tm-seg:focus-visible { outline:2px solid var(--tm-olive-dark, #344b2c); outline-offset:-3px; box-shadow:inset 0 0 0 4px #fffef9; }
.tm-seg.on:focus-visible { outline-color:#fffef9; box-shadow:inset 0 0 0 4px var(--tm-olive-dark, #344b2c); }
.tm-muted { margin:0; color:var(--tm-muted, #586653); font-size:12px; }
.tm-link { border:0; background:none; padding:0 2px; min-height:32px; color:var(--tm-olive-dark, #344b2c); font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; }
/* Who's here */
.tm-here { display:grid; gap:10px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--tm-line); border-radius:8px; background:var(--tm-paper); color:var(--tm-ink); min-width:0; }
.tm-here[hidden] { display:none; }
.tm-here-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; }
.tm-here-line { margin:0; font-size:13.5px; color:var(--tm-ink); }
.tm-here-count { font-weight:700; }
.tm-here-gap { display:inline-block; padding:0 8px; border:1px solid var(--tm-tag-line); border-radius:999px; background:var(--tm-tag); color:var(--tm-olive-dark); font-size:12px; font-weight:600; }
.tm-here-online::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--tm-on); vertical-align:1px; }
.tm-dot-sep { color:var(--tm-muted); }
.tm-join-control { display:inline-flex; flex-wrap:wrap; align-items:stretch; border:1px solid var(--tm-line, #d9ded0); border-radius:8px; overflow:hidden; background:var(--tm-paper, #fffef9); }
.tm-join-label { display:inline-flex; align-items:center; padding:0 10px; color:var(--tm-muted, #586653); font-size:12.5px; border-right:1px solid var(--tm-line, #d9ded0); }
.tm-seg { min-height:36px; padding:6px 12px; border:0; border-right:1px solid var(--tm-line, #d9ded0); background:none; color:var(--tm-olive-dark, #344b2c); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.tm-seg:last-child { border-right:0; }
.tm-seg:hover { background:var(--tm-soft, #eef1e7); }
.tm-seg.on, .tm-seg.on:hover { background:var(--tm-olive, #526547); color:#fff; }
.tm-basic { font-size:12.5px; }
.tm-hi { display:grid; gap:8px; }
.tm-hi-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tm-hi-title { margin:0; font-family:"Source Serif 4","Newsreader",Georgia,serif; font-size:16px; font-weight:600; color:var(--tm-ink); }
.tm-hi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:8px; }
.tm-hi-card { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--tm-line); border-radius:6px; background:#fdfdf8; min-width:0; }
.tm-hi-who { display:flex; align-items:center; gap:8px; min-width:0; }
.tm-hi-name { display:flex; flex-direction:column; min-width:0; }
.tm-hi-name strong { font-size:13.5px; overflow-wrap:anywhere; }
.tm-reason { margin:0; color:var(--tm-ink); font-size:12.5px; line-height:1.45; }
.tm-online { margin:0; color:var(--tm-on); font-size:11.5px; font-weight:600; }
.tm-sayhi { align-self:flex-start; margin-top:auto; }
.tm-consent { font-size:11.5px; }
.tm-coins { display:inline-flex; }
/* Suggest me (My Profile) */
.tm-suggest { display:grid; gap:6px; }
.tm-suggest-h { margin:0; font-family:"Source Serif 4","Newsreader",Georgia,serif; font-size:16px; font-weight:600; }
.tm-suggest-row { display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.tm-suggest-row input { margin-top:3px; accent-color:var(--tm-olive, #526547); }
@media (max-width: 640px) {
  .tm-chip, .tm-seg, .tm-link { min-height:44px; }
  /* FIX-4 (r18): a link is inline, so min-height alone did nothing ("See Basic" was 16px tall). It is a
     44px tap target; the negative margin keeps the line where it was. */
  a.tm-link { display:inline-flex; align-items:center; vertical-align:middle; margin-block:-14px; }
  .tm-btn { min-height:44px; }
  .tm-here { padding:10px 12px; }
  .tm-here-top { flex-direction:column; align-items:stretch; }
  .tm-join-control { width:100%; }
  .tm-seg { flex:1 1 auto; }
  /* People to say hi to becomes one line of names (the desk_v18 mockup); "See why" opens the cards. */
  .tm-hi-head { display:none; }
  .tm-hi .tm-hi-compact { display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; font-size:13.5px; color:var(--tm-ink); }
  .tm-hi-compact-label { font-weight:700; margin-right:2px; }
  .tm-hi-compact-name { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:var(--tm-olive-dark); font-weight:600; text-decoration:underline; }
  .tm-hi-why { margin-left:auto; }
  .tm-hi-grid, .tm-hi .tm-consent, .tm-hi .tm-team-note { display:none; }
  .tm-hi.tm-hi-open .tm-hi-grid { display:grid; grid-template-columns:1fr; }
  .tm-hi.tm-hi-open .tm-consent, .tm-hi.tm-hi-open .tm-team-note { display:block; }
  .crx-reactions .tm-interest, .crx-reactions .tm-see { min-height:44px; }
  /* The poster's list: name first, the buttons on their own row under it (FIX-1). */
  .tm-person { flex-wrap:wrap; }
  .tm-person-acts { flex-basis:100%; padding-left:42px; }
  .tm-person-acts .tm-btn { flex:1 1 auto; }
}
/* Team room (os-teamup.js): the pinned pricing rule and the plain team-room line. */
.fx-pinned-rule { margin:0 0 8px; padding:8px 10px; border:1px solid #c3d0b2; border-radius:6px; background:#e5ecdb; color:#344b2c; font-size:13px; font-weight:600; line-height:1.45; }
.fx-paper-links a { color:#344b2c; text-decoration:underline; }
.fx-team-note { font-size:12.5px; max-width:260px; }
.tm-here-split { color:var(--tm-muted); }
.tm-here-matched { color:var(--tm-muted); font-style:italic; }
/* FIX-1: actions on a person card (Open chat / Say hi, and Invite to a team room for Pro on contracts). */
.tm-person-acts, .tm-hi-acts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tm-hi-acts { margin-top:auto; }
.tm-btn-o, body.fd-design button.tm-btn-o { background:var(--tm-paper, #fffef9); color:var(--tm-olive-dark, #344b2c); }
.tm-btn-o:hover { background:var(--tm-soft, #eef1e7); }
.tm-team-status { flex-basis:100%; }
.tm-team-note { font-size:12px; }
.tm-hi-compact { display:none; }
/* In the contract discussion the reaction row zeroes button padding; the interest pills keep theirs (FIX-1). */
.crx-reactions .tm-interest, .crx-reactions .tm-see { padding:4px 10px; border-radius:999px; min-height:32px; display:inline-flex; align-items:center; }