/* Topic screen — room header/context, edit control, topic heading,
   references + video preview (page-title-row base rides along here) */

.topic-screen {
  gap: var(--space-4);
}

/* Two columns, mimicking a room: the family rail (holding just the topic —
   you are here) · the page. room.css hides .lane-family under 900px.
   The rail column matches a room's first column (.lane-screen .room-layout) to
   the pixel — a different width would move the topic card sideways every time
   you stepped between a topic and one of its rooms. */
.topic-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.topic-main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.topic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.topic-title-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  min-width: 0;
}

.topic-title-line .play-link {
  margin-top: calc((1.35rem * 1.2 - 17px) / 2);
}

.topic-title-line .play-link-generic {
  margin-top: calc((1.35rem * 1.2 - var(--space-5)) / 2);
}

.topic-header .bookmark {
  margin-top: calc((1.35rem * 1.2 - 32px) / 2);
  margin-right: calc(var(--space-4) + 2px);
}

.topic-family .lane-family-source.is-playing {
  border-color: var(--accent);
}

.topic-family .lane-family-source.is-playing .play-link {
  color: var(--color-youtube);
}

/* Source titles run long — a full YouTube title is a sentence. The rail names
   the page; it doesn't reprint the source, so the title takes the free width
   and stops at three lines. The whole of it is in Source, and on hover. */
.topic-family .lane-family-source-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 900px) {
  .topic-layout {
    grid-template-columns: 1fr;
  }

  .topic-layout .topic-family {
    display: none;
  }
}
.room-header {
  margin-bottom: var(--space-5);
}

.page-title-row {
  margin-bottom: var(--space-5);
}

.page-title-row h1 {
  margin-bottom: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.room-context-row {
  /* Align the source icon + pencil to the title's first line, not the vertical
     centre of a wrapped title. Each fixed-size control is nudged so its centre
     lands on the first line (same trick as the bookmark toggle). */
  align-items: flex-start;
  margin-bottom: 0;
}

.room-context-row .play-link {
  margin-bottom: 0;
  margin-top: calc((1.35rem * 1.2 - 17px) / 2);
}

.room-context-row .play-link-generic {
  margin-top: calc((1.35rem * 1.2 - var(--space-5)) / 2);
}

.room-context-row .topic-title {
  transform: translateY(0);
}

.room-subhead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.room-subhead-row > .mark-toggle {
  flex: 0 0 auto;
  /* Center the bookmark on the title's first line. */
  margin-top: calc((1.35rem * 1.2 - 32px) / 2);
}

.room-wordmark {
  margin: 0;
  color: var(--clay);
  font-family: var(--font-ui);
  font-size: 1.38rem;
  font-variant-caps: small-caps;
  font-weight: 820;
  letter-spacing: 0.035em;
  line-height: 1;
}

.topic-heading {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-2);
}

.topic-title {
  max-width: 760px;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.topic-references-body {
  display: grid;
  gap: var(--space-3);
}

.topic-screen .section-heading .section-toggle h2,
.topic-screen .section-chevron {
  font-size: 1.05rem;
}

.topic-screen .section-heading {
  min-height: var(--space-6);
}

.topic-threads {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.topic-threads-body {
  display: grid;
  gap: var(--space-3);
}

.topic-video-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  aspect-ratio: 16 / 9;
}

.topic-references .topic-video-preview {
  width: calc(100% - var(--space-2));
  margin-left: var(--space-2);
}

.topic-video-preview::after {
  position: absolute;
  inset: 0;
  background: rgba(255, 248, 231, 0.46);
  content: "";
  mix-blend-mode: multiply;
  pointer-events: none;
}

.topic-video-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.58) sepia(0.14);
}

.reference-list {
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0;
  padding-left: var(--space-5);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.reference-list a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.reference-list a:hover,
.reference-list a:focus-visible {
  color: var(--ink);
}

/* Dialogue-at-scale: source + fresh shelf + discuss box
   ---------------------------------------------------------------- */

.topic-meta {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.topic-source-body {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.topic-source-body .topic-video-preview {
  max-width: 640px;
}

/* Fresh conversations shelf — small, contributable rooms as cards. */
.fresh-shelf {
  gap: var(--space-3);
}

.fresh-shelf-body {
  display: grid;
  gap: var(--space-3);
}

/* Quiet expand text under the first three cards. */
.fresh-more {
  justify-self: start;
  margin-top: var(--space-1);
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  cursor: pointer;
}

.fresh-more:hover,
.fresh-more:focus-visible {
  color: var(--ink);
  outline: 0;
}

/* ── Rooms under the topic: live, then the unpublished ones waiting on the
   owner. Publishing happens here, so these rows carry verbs — unlike the live
   cards above, which are only doors. */

/* The count in a group heading, quiet — normal weight, muted. */
.room-group-count {
  font-weight: 400;
  color: var(--muted);
}

.room-group-section {
  gap: var(--space-3);
}

.room-group {
  display: grid;
  gap: var(--space-2);
}

/* The title gets the full width of the card and the verbs ride the status line
   below it: a verb column running the height of the row would both squeeze a
   long title into half the card and float Edit/Publish away from the "Draft"
   they act on. `align-content` keeps a short row centred in the 76px minimum —
   only the items inside the tracks are bottom-aligned. */
.room-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title title"
    "icon meta actions";
  column-gap: var(--space-3);
  row-gap: 2px;
  /* Centring is what puts the pills *on* the status line: bottom-aligning them
     leaves the taller pill's middle sitting above "Draft". */
  align-items: center;
  align-content: center;
  min-height: 76px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}

/* Discarded isn't deleted — it stays visible to whoever proposed it, spent. */
.room-row.is-discarded {
  opacity: 0.6;
}

.room-row-open {
  grid-area: title;
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.room-row-open:disabled {
  cursor: default;
}

.room-row-copy {
  display: grid;
  min-width: 0;
}

/* Same mark the room's own rail gives it — the rooms on this page are all main
   rooms, so the icon is the thing that carries from the list into the room. It
   holds its own column across both rows, so it centres on the whole title-plus-
   status block rather than on either line. */
.room-row-icon {
  grid-area: icon;
  width: 30px;
  height: 28px;
  /* Optical nudge: the glyph's weight is in its two lower legs, so a
     geometrically centred box reads as sitting low. */
  transform: translateY(-2px);
}

.room-row-icon svg {
  width: 32px;
  height: 28px;
}

/* Same two-line bar as a listed discussion (.idea-row h2): an unpublished room's
   title is a claim too, and a draft with a paragraph for a name shouldn't set
   the height of every row beside it. */
.room-row-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.35;
}

.room-row-open:focus-visible .room-row-title {
  color: var(--accent);
}

.room-row-meta {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* The status sits below the title, in the title's own column. */
.room-row > .room-row-meta {
  grid-area: meta;
  min-width: 0;
}

.room-row-actions {
  grid-area: actions;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

/* Sized to sit beside the status text rather than tower over it. */
.room-action {
  padding: 2px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: var(--line-ui);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.room-action:hover,
.room-action:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.room-action-primary {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.room-action-primary:hover,
.room-action-primary:focus-visible {
  background: var(--accent);
  color: var(--color-on-accent);
}

/* Publish stays visible while it's unavailable — the row's meta says what the
   room still needs, so the verb reads as waiting on you, not missing. */
.room-action[disabled] {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Replaces the discuss box: the way a room starts is now a deliberate act,
   not a text field you type into. */
.topic-create-room {
  margin-top: var(--space-2);
}

.create-room-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 76px;
  padding: var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 650;
  line-height: var(--line-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.create-room-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 28px;
}

.create-room-icon svg {
  width: 32px;
  height: 28px;
}

.create-room-button:hover,
.create-room-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

/* The rail's inline title field — the whole of what editing a topic means. */
/* The save tick is the pencil's slot, so it can't fade out with hover. */
/* On a phone the verbs can't share a line with the room's name — they wrap
   under it, still right-aligned so the row reads title-then-choice. */
@media (max-width: 600px) {
  .room-row {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon meta"
      ". actions";
  }

  .room-row-actions {
    justify-self: end;
  }
}