/* site-social.css — FedM8 site-wide social rollout, PR A (Shell + Home).
   Additive BUSY layer for the Capture OS (os.html only — standalone pages
   never load this file). Loads AFTER os-bundle styles and AFTER
   contract-room-x.css, so equal-specificity rules here win. It never
   restyles contract-room-x internals, coin faces (fedm8-coins), or Talk
   mechanics — only the shared shell surfaces and color/type tokens.

   BUSY tokens (governing design, owner re-baseline Oct 14 2026 — the
   whole-site social draft, same system as contract-room-x):
     bg #eef2f3 · panels #fff · soft #f5f7f7 · ink #102428
     secondary text is a SOLID #4a5d61 and meta a SOLID #5f7175 — both
     pass AA on white; information-bearing text is never demoted with
     opacity tiers. hairline #d8e0e1 · navy #123f4c = structure
     mint #d9f2ea pills with dark-teal #076657 text at weight 800 carry
     match %, counts and active states; teal #0a806f fills primary
     actions and the Chase-style filled pills (white text).
     amber #9a5410 on #fff0d8 = due-soon chips · red = live dot only
   Type: DM Sans body; Newsreader serif for the ONE headline per screen
   (#page-title). Bold weights are the workhorse: 700 for chips, labels
   and buttons, 800 for pills, counts, key numbers and active states.
   Full information at a glance: colored chips, visible count boxes,
   no quieted pills. */

:root {
  --ss-bg: #eef2f3;
  --ss-panel: #ffffff;
  --ss-soft: #f5f7f7;
  --ss-ink: #102428;
  --ss-ink-60: #4a5d61;
  --ss-ink-40: #5f7175;
  --ss-mint: #d9f2ea;
  --ss-mint-2: #eef8f4;
  --ss-teal-d: #076657;
  --ss-amber-bg: #fff0d8;
  --ss-line: #d8e0e1;
  --ss-navy: #123f4c;
  --ss-teal: #0a806f;
  --ss-teal-soft: rgba(10, 128, 111, 0.09);
  --ss-amber: #9a5410;
  --ss-live: #c0392b;
  --ss-serif: "Newsreader", "Source Serif 4", Georgia, serif;

  /* Retint the shared OS tokens so stock surfaces inherit the busy palette
     without editing os.css / os-calm.css / monad-treat.css. */
  --bg: #eef2f3;
  --surface: #ffffff;
  --ink: #102428;
  --ink-2: #4a5d61;
  --muted: #4a5d61;
  --line: #d8e0e1;
  --line-2: #d8e0e1;
  --navy: #123f4c;
  --navy-2: #123f4c;
  --navy-3: #123f4c;
  --radius: 14px;
}

/* ---------- Shell ---------- */

body {
  background: var(--ss-bg);
  color: var(--ss-ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

#main { background: transparent; }

::selection { background: var(--ss-teal-soft); }

/* The one headline per screen is serif; everything else stays DM Sans. */
#page-title {
  font-family: var(--ss-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ss-ink);
}
#page-head .sub, #page-head p.sub {
  color: var(--ss-ink-60);
  font-size: 14.5px;
  font-weight: 500;
  max-width: 62ch;
}
#page-content h2, #page-content h3 { color: var(--ss-ink); }

/* Supporting text tiers: solid AA colors — secondary #4a5d61, meta #5f7175. */
#page-content .fine, #page-content .muted, #page-content small,
#crumbs, .sb-foot .email, .sb-foot .credits {
  color: var(--ss-ink-60);
}

/* ---------- Sidebar (structure in navy, active state a mint pill) ---------- */

#sidebar {
  background: var(--ss-panel);
  border-right: 1px solid var(--ss-line);
  color: var(--ss-ink);
}
.sb-brand { border-bottom: 0; color: var(--ss-ink); }
.sb-brand .sb-word { color: var(--ss-navy); }
.sb-brand .sb-word span { color: var(--ss-navy); }

.sb-nav { padding: 10px 12px; }
.sb-nav a, .sb-nav button {
  color: #43565b;
  font-weight: 600;
  border-radius: 10px;
  min-height: 42px;
}
.sb-nav a:hover, .sb-nav button:hover {
  background: var(--ss-soft);
  color: var(--ss-navy);
  text-decoration: none;
}
.sb-nav .sb-space.on, .sb-nav a.on, .sb-nav button.on {
  background: var(--ss-mint);
  color: var(--ss-teal-d);
  font-weight: 800;
  box-shadow: none;
  border: 0;
}
.sb-nav .sb-space.on svg, .sb-nav a.on svg { color: var(--ss-teal); }
.sb-nav a .lock {
  background: var(--ss-soft);
  color: var(--ss-ink-60);
  border-color: var(--ss-line);
  font-weight: 700;
}
.sb-nav .sb-unread {
  background: var(--ss-teal);
  color: #fff;
  font-weight: 800;
}
.sb-nav .sb-tray { border-top: 1px solid var(--ss-line); }
.sb-nav .sb-tray-ai { color: var(--ss-ink-60); background: transparent; }
.sb-nav .sb-tray-link.on { color: var(--ss-navy); font-weight: 600; }

.sb-foot { border-top: 1px solid var(--ss-line); }
.sb-foot .pill {
  background: var(--ss-mint);
  color: var(--ss-teal-d);
  border: 1px solid rgba(10, 128, 111, 0.38);
  font-weight: 800;
}
.sb-signout {
  color: var(--ss-ink-60);
  border-color: var(--ss-line);
  background: transparent;
}

#menu-btn {
  background: var(--ss-panel);
  color: var(--ss-navy);
  border: 1px solid var(--ss-line);
  box-shadow: none;
}

/* ---------- Panels & cards: white, one hairline, no nested boxes ---------- */

#page-content .panel,
#page-content .card {
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  box-shadow: none;
}
#page-content .panel .panel,
#page-content .card .card,
#page-content .panel .card {
  border: 0;
  border-top: 1px solid var(--ss-line);
  border-radius: 0;
  background: transparent;
}

/* Rows separated by hairlines instead of boxed tiles. */
#page-content table { border-color: var(--ss-line); }
#page-content th, #page-content td { border-bottom: 1px solid var(--ss-line); }
#page-content th {
  color: var(--ss-ink-60);
  font-weight: 800;
  letter-spacing: 0.04em;
}
#page-content hr { border: 0; border-top: 1px solid var(--ss-line); }

/* ---------- Actions: teal fills the primary action, bold everywhere ---------- */

.btn.primary, button.primary, .btn-primary {
  background: var(--ss-teal);
  border: 1px solid var(--ss-teal);
  color: #fff;
  font-weight: 800;
  box-shadow: none;
}
.btn.primary:hover, button.primary:hover { background: #096e5f; border-color: #096e5f; }
.btn, button.btn {
  border-color: var(--ss-line);
  border-radius: 10px;
  font-weight: 700;
}
.btn.ghost {
  background: transparent;
  color: var(--ss-navy);
  border: 1px solid var(--ss-line);
}
a { color: var(--ss-navy); }
:focus-visible { outline: 2px solid var(--ss-teal); outline-offset: 2px; }

/* Chips and pills are BUSY: mint-tinted, dark-teal text, bold — the
   set-aside / due / talking / subs-needed chips read at a glance. */
#page-content .chip, #page-content .pill {
  border: 1px solid rgba(10, 128, 111, 0.38);
  background: var(--ss-mint-2);
  color: var(--ss-teal-d);
  font-weight: 700;
}

/* Match % is a mint pill at weight 800, never plain text. */
#page-content .fx-matchpct {
  display: inline-flex;
  align-items: center;
  background: var(--ss-mint);
  color: var(--ss-teal-d);
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* Due-soon is the amber chip. */
#page-content .due-soon, #page-content .is-due-soon {
  color: var(--ss-amber);
  font-weight: 800;
}

/* ---------- Subnav: active tab is teal and bold ---------- */

.subnav {
  border-bottom: 1px solid var(--ss-line);
  gap: 6px;
}
.subnav a {
  color: #43565b;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
}
.subnav a:hover { color: var(--ss-navy); text-decoration: none; }
.subnav a.on {
  color: var(--ss-teal-d);
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--ss-teal);
}

/* ---------- Forms ---------- */

input, select, textarea {
  border-color: var(--ss-line);
  border-radius: 10px;
  background: var(--ss-panel);
  color: var(--ss-ink);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ss-teal);
  outline: 2px solid var(--ss-teal-soft);
  outline-offset: 0;
}
label { color: var(--ss-ink-60); font-weight: 600; }

/* ---------- Home / Talk (Live Floor) busy pass ----------
   Decoration only: surfaces take the busy tokens. Coin faces, coin
   cases, Live Floor rows, Mission strip and Top M8 keep their own layout
   and real data — counts become mint pills and scores bold dark-teal so
   the numbers read at a glance; the live dot stays red. */

#talk-immersive .ti-hero {
  background: var(--ss-soft);
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  padding: 18px 18px 14px;
}
#talk-immersive .ti-eyebrow { color: var(--ss-ink-60); font-weight: 800; letter-spacing: 0.09em; }
#talk-immersive .ti-title { color: var(--ss-ink); font-weight: 800; }
#talk-immersive .ti-sub { color: var(--ss-ink-60); font-weight: 500; }
#talk-immersive .ti-case {
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: 14px;
}
#talk-immersive .ti-case-title { color: var(--ss-ink); font-weight: 800; }
#talk-immersive .ti-case-count {
  background: var(--ss-mint);
  color: var(--ss-teal-d);
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 9px;
}
#talk-immersive .ti-card {
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: 14px;
}
#talk-immersive .ti-card h3 { color: var(--ss-ink); font-weight: 800; }
#talk-immersive .ti-card .ti-card-sub { color: var(--ss-ink-60); font-weight: 500; }
#talk-immersive .ti-room { border-top: 1px solid var(--ss-line); }
#talk-immersive .ti-room:first-of-type { border-top: 0; }
#talk-immersive .ti-live-dot { background: var(--ss-live); }
#talk-immersive .ti-room-code { color: var(--ss-navy); }
#talk-immersive .ti-room-title { color: var(--ss-ink); font-weight: 600; }
#talk-immersive .ti-stage {
  background: var(--ss-mint);
  border-color: transparent;
  color: var(--ss-teal-d);
  font-weight: 800;
}
#talk-immersive .ti-top-row { border-top: 1px solid var(--ss-line); }
#talk-immersive .ti-top-row:first-of-type { border-top: 0; }
#talk-immersive .ti-top-name { color: var(--ss-ink); font-weight: 700; }
#talk-immersive .ti-top-score { color: var(--ss-teal-d); font-weight: 800; }
#talk-immersive .ti-empty { color: var(--ss-ink-60); }
#talk-immersive .ti-card-link { color: var(--ss-teal-d); font-weight: 800; }

/* Home route keeps the busy density: blocks stay close, nothing hidden. */
body.ss-home #page-content > * + * { margin-top: 4px; }
body.ss-home #page-head { margin-bottom: 24px; }

/* ---------- Phone (390px class widths) ---------- */

@media (max-width: 700px) {
  /* 64px top clears the fixed 40px menu button (y 8-48) — the calm pass
     had cut this to 22px and the button overlapped view titles on phone. */
  #main { padding: 64px 16px 48px; }
  #page-title { font-size: 27px; }
  .sb-nav a, .sb-nav button { min-height: 44px; }
  #talk-immersive .ti-hero { padding: 14px 14px 10px; }
}

/* ---------- Hotfix 2026-10-14: on-dark tiers for Commons (Contract Chat) ----------
   Commons' dark scheme (commons-feed.css) resolves --chat-muted / --chat-line
   through the shared --muted / --line tokens, which the unconditional :root
   retint above re-points at near-black ink — invisible on Commons' dark navy
   panels (#101822 / #1b2634). The global h2/h3 ink rule likewise paints
   Commons headings near-black. In dark scheme only, re-pin the chat tokens
   to Commons' own on-dark values and put headings / supporting text back on
   the light tiers. Scoped to the Commons root; light scheme untouched, the
   dark panels stay dark, and no pills/chips/boxes are removed or demoted. */
@media (prefers-color-scheme: dark) {
  /* FIX-2 (2026-10-17): legacy shell only. The approved design (body.fd-design) is light-only, and these
     near-white tiers drew headings and names near-white on its paper panels. */
  body:not(.fd-design) #page-content.commons-root,
  body:not(.fd-design) #page-content .commons-root {
    --chat-bg: #101822;
    --chat-paper: #1b2634;
    --chat-ink: #e9eff6;
    --chat-muted: #aab9c9;
    --chat-line: #35465a;
    --chat-navy: #a9d4f5;
    --chat-soft: #263e53;
  }
  body:not(.fd-design) #page-content.commons-root h2, body:not(.fd-design) #page-content .commons-root h2,
  body:not(.fd-design) #page-content.commons-root h3, body:not(.fd-design) #page-content .commons-root h3 { color: var(--chat-ink); }
  body:not(.fd-design) #page-content.commons-root .fine, body:not(.fd-design) #page-content .commons-root .fine,
  body:not(.fd-design) #page-content.commons-root .muted, body:not(.fd-design) #page-content .commons-root .muted,
  body:not(.fd-design) #page-content.commons-root small, body:not(.fd-design) #page-content .commons-root small,
  body:not(.fd-design) #page-content.commons-root .chat-muted, body:not(.fd-design) #page-content .commons-root .chat-muted,
  body:not(.fd-design) #page-content.commons-root .chat-eyebrow, body:not(.fd-design) #page-content .commons-root .chat-eyebrow,
  body:not(.fd-design) #page-content.commons-root .chat-meta, body:not(.fd-design) #page-content .commons-root .chat-meta,
  body:not(.fd-design) #page-content.commons-root .chat-bluf, body:not(.fd-design) #page-content .commons-root .chat-bluf,
  body:not(.fd-design) #page-content.commons-root .chat-room, body:not(.fd-design) #page-content .commons-root .chat-room { color: var(--chat-muted); }
  body:not(.fd-design) #page-content.commons-root ::placeholder, body:not(.fd-design) #page-content .commons-root ::placeholder { color: #9db2c4; }
}