/* Talk Immersive — Live Contract Floor + The Base header for #/talk.
   Additive layer over Commons / classic Talk. Monad palette:
   paper #faf8f5, slate #3b4a63, champagne #c2a878, hairlines, mono data. */

#talk-immersive { margin: 0 0 16px; }
#talk-immersive .ti-hero {
  background: #faf8f5; border: 1px solid var(--line, #d9e0ea);
  border-radius: 10px; padding: 14px 16px 12px; margin: 0 0 12px;
}
#talk-immersive .ti-eyebrow {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #8a6d2f;
}
#talk-immersive .ti-title {
  margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #12233c;
  line-height: 1.2;
}
#talk-immersive .ti-sub { margin: 0; font-size: 13.5px; color: #4b5361; }

#talk-immersive .ti-case {
  border: 1px solid var(--line, #d9e0ea); border-radius: 10px;
  background: #fff; margin: 0 0 12px; padding: 4px 14px 10px;
}
#talk-immersive .ti-case > summary {
  cursor: pointer; list-style: none; padding: 10px 0 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
#talk-immersive .ti-case > summary::-webkit-details-marker { display: none; }
#talk-immersive .ti-case-title { font-size: 15px; font-weight: 700; color: #12233c; }
#talk-immersive .ti-case-count { font-size: 12.5px; color: #6b7686; font-weight: 600; }
#talk-immersive .ti-earned-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }

#talk-immersive .ti-strip {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  margin: 0 0 4px;
}
@media (min-width: 760px) {
  #talk-immersive .ti-strip { grid-template-columns: repeat(3, 1fr); }
}
#talk-immersive .ti-card {
  border: 1px solid var(--line, #d9e0ea); border-radius: 10px;
  background: #fff; padding: 12px 14px;
}
#talk-immersive .ti-card h3 {
  margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: #12233c;
}
#talk-immersive .ti-card .ti-card-sub {
  margin: 0 0 10px; font-size: 12.5px; color: #6b7686;
}
#talk-immersive .ti-room {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-top: 1px solid #eef1f5; text-decoration: none; color: inherit;
}
#talk-immersive .ti-room:first-of-type { border-top: 0; }
#talk-immersive .ti-live-dot {
  flex: none; width: 8px; height: 8px; border-radius: 99px; background: #b03a2e;
}
#talk-immersive .ti-room-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 700; color: #12233c;
}
#talk-immersive .ti-room-title { font-size: 13px; color: #4b5361; min-width: 0; }
#talk-immersive .ti-room-mine {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 700;
  color: #8a6d2f; text-transform: uppercase; letter-spacing: .05em;
}
#talk-immersive .ti-stage-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px;
}
#talk-immersive .ti-stage {
  font-size: 12px; font-weight: 600; color: #3b4a63;
  border: 1px solid var(--line, #d9e0ea); border-radius: 99px;
  padding: 3px 9px; background: #faf8f5;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#talk-immersive .ti-top-row {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  border-top: 1px solid #eef1f5;
}
#talk-immersive .ti-top-row:first-of-type { border-top: 0; }
#talk-immersive .ti-rank {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 700; color: #8a6d2f; flex: none;
}
#talk-immersive .ti-top-name { font-size: 13.5px; font-weight: 600; color: #12233c; min-width: 0; }
#talk-immersive .ti-top-score {
  margin-left: auto; flex: none; font-size: 12px; color: #6b7686;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#talk-immersive .ti-card-link { font-size: 13px; font-weight: 700; color: #3b4a63; }
#talk-immersive .ti-empty { margin: 4px 0 8px; font-size: 13px; color: #6b7686; }

/* Author coins in the classic rooms (talk-immersive decoration). */
.talk-row .ti-author-coins {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-left: 6px; vertical-align: middle; max-width: 100%;
}
.talk-row .ti-author-coins .fmc-chip { font-size: 11px; padding: 1px 7px 1px 2px; }
@media (max-width: 560px) {
  .talk-row .ti-author-coins { display: flex; margin: 4px 0 0; }
}