/* Tiles — the shared tile / row / card primitives (explore tiles, result &
   space cards, list/grid rows, bookmark toggle, thread icons, play links).
   Mirrors src/components/tiles.js; includes context overrides (carousel-track,
   topic-screen) so each tile's full rule set lives in one place. */

.explore-tile {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.explore-tile-head {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
}

.explore-space-link,
.explore-topic-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.explore-space-link {
  color: var(--clay);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.explore-topic-link {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 560;
  line-height: var(--line-ui);
  /* Reserve two lines and clamp with an ellipsis so a 1- vs 2-line topic
     title keeps the thread row and graph below it at a consistent height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.05rem * var(--line-ui) * 2);
}

.explore-space-link:hover,
.explore-space-link:focus-visible,
.explore-topic-link:hover,
.explore-topic-link:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.explore-graph {
  display: block;
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft);
  cursor: pointer;
}

.explore-graph .structure-sketch {
  width: 100%;
  max-height: 200px;
  color: var(--muted);
}

.explore-graph:hover .structure-sketch,
.explore-graph:focus-visible .structure-sketch {
  color: var(--ink);
}

.explore-graph:focus-visible {
  outline: 0;
  border-color: var(--ink);
}

.explore-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  /* Reserve two lines so a 1- vs 2-line title never shifts the arrows,
     thread icon, or the graph that sits below this row. */
  min-height: calc(1rem * var(--line-ui) * 2);
}

/* Pin the rotate arrows to the title's first line so 1- vs 2-line titles
   don't shift them (the thread icon is already first-line anchored). */
.explore-thread-row .topic-thread-nav-group {
  margin-top: calc((1rem * var(--line-ui) - 30px) / 2);
}

.explore-thread-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: var(--line-ui);
  text-align: left;
  cursor: pointer;
}

.explore-thread-title {
  /* Clamp to two lines so the title can't exceed the row's reserved height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.explore-thread-link:hover .explore-thread-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The room mark is 32×28, so its box keeps that ratio — a 24×17 slot would fit
   it by height and draw it noticeably smaller than the title it sits beside. */
.explore-thread-link .explore-thread-icon {
  width: 22px;
  height: 19px;
  margin-top: calc((1rem * var(--line-ui) - 19px) / 2 + 3px);
}

.explore-thread-link .explore-thread-icon svg {
  width: 22px;
  height: 19px;
}
.result-list,
.space-grid {
  display: grid;
  gap: var(--space-2);
}

.result-row {
  display: grid;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

.result-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 50px;
}

.result-row span,
.result-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-row small,
.space-card p,
.empty-state p,
.page-summary {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.4;
}

.result-row:hover,
.result-row:focus-visible {
  background: var(--soft);
  outline: 0;
}

.result-row.is-active {
  border-color: var(--accent);
  background: var(--soft);
}

.space-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.space-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
}

.space-card:hover,
.space-card:focus-within {
  background: var(--soft);
}

.space-card h3,
.empty-state h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--line-ui);
}

.space-card-link {
  min-width: 0;
  padding: var(--space-1) 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.space-card-link:focus-visible {
  outline: 0;
}

.space-card-no-star .space-card-link {
  grid-column: 1 / -1;
}

.space-card-link h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-owner-mark {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.space-owner-badge {
  display: inline-grid;
  align-items: center;
  align-self: center;
  min-height: 20px;
  padding: 1px calc(var(--space-2) - 3px) 0 calc(var(--space-2) - 2px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1;
  place-items: center;
}

/* "You bookmarked this space" on a My Stuff card — the same mark the toggle
   sets, filled in, not a second symbol for the same state. */
.space-bookmark-icon {
  display: inline-grid;
  align-self: center;
  height: 24px;
  /* Hug the glyph so the mark starts at the same left edge as an unmarked title. */
  place-items: center start;
  color: var(--clay);
  line-height: 1;
}

.space-bookmark-icon .bookmark-glyph svg {
  fill: currentColor;
}

.empty-state {
  padding: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 244, 0.62);
}

.episode-list > .empty-state,
.thread-list > .empty-state {
  width: 100%;
}

.search-empty {
  padding: var(--space-4);
}
.mark-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

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

.mark-toggle.is-active {
  color: var(--clay);
}

.bookmark-glyph {
  display: inline-grid;
  place-items: center;
}

.mark-toggle.bookmark .bookmark-glyph {
  justify-self: end;
}

.bookmark-glyph svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.mark-toggle.bookmark.is-active .bookmark-glyph svg {
  fill: currentColor;
}

.page-summary {
  max-width: 68ch;
  font-size: 1rem;
}

.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--space-3);
}

.episode-row,
.idea-row,
.idea-row-outer {
  --card-icon-column: 30px;
  --card-control-size: 32px;
  --card-action-column: calc((28px * 2) + var(--space-1));
  --card-control-offset: var(--space-4);
  --card-control-top: calc(var(--space-4) + 1px + (1rem * var(--line-ui) - var(--card-control-size)) / 2);
}

.episode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  position: relative;
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

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

.episode-card-row {
  display: grid;
  grid-template-columns: var(--card-icon-column) minmax(0, 1fr) var(--card-action-column);
  column-gap: var(--space-3);
  align-items: center;
  min-height: var(--card-control-size);
}

.episode-icon-cell {
  display: grid;
  width: var(--card-icon-column);
  min-height: var(--card-control-size);
  place-items: center;
}

.episode-body .play-link {
  margin: 0;
}

.episode-title {
  margin: 0;
  font-size: 1rem;
  line-height: var(--line-ui);
  letter-spacing: 0;
}

.episode-row > .mark-toggle {
  position: absolute;
  top: var(--card-control-top);
  right: var(--card-control-offset);
}

/* In the home carousels, reserve two lines for the card title and clamp with
   an ellipsis so 1- vs 2-line titles keep the rows below them aligned. Scoped
   to the carousels so the space/topic/person lists are unaffected. */
.carousel-track .episode-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1rem * var(--line-ui) * 2);
}

.carousel-track .idea-row h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.04rem * 1.35 * 2);
}

.topic-thread-nav-group {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-self: end;
}

/* The preview row is two rows deep — the room's title, then its state label —
   and the three things beside the text answer to different parts of it:

     · the arrows pin to the title's FIRST LINE and never move, so toggling
       through rooms doesn't nudge the control you are clicking. They're taken
       out of flow to do it, which also keeps them out of the row's sizing.
     · the room icon centres on the TITLE, one line or two, and ignores the
       state label — the icon names the room, so it tracks the room's name.
     · the state label hangs below both.

   The link shares the row's tracks (subgrid) so the icon can line up with the
   title's box without either having to know how tall the other is. Where
   subgrid is unavailable the icon falls back to centring on the whole row. */
.topic-thread-preview:not(.topic-thread-preview-empty) {
  position: relative;
  align-items: start;
  grid-template-rows: auto auto;
  /* Holds the title's first line where the control band used to put it. */
  padding-top: calc((var(--card-control-size) - 1rem * var(--line-ui)) / 2);
}

.topic-thread-preview .topic-thread-link {
  display: grid;
  grid-row: 1 / span 2;
  grid-template-rows: subgrid;
}

.topic-thread-preview .topic-thread-title {
  grid-row: 1;
}

.topic-thread-preview .topic-thread-signal {
  grid-row: 2;
}

.topic-thread-preview .episode-icon-cell {
  grid-row: 1;
  align-self: center;
  min-height: 0;
}

.topic-thread-preview .topic-thread-nav-group {
  position: absolute;
  /* Offsets run from the padding box, so this is the row's own top padding plus
     the arrows' offset inside the first line — which cancels down to centring a
     30px button in the control band. */
  top: calc((var(--card-control-size) - 30px) / 2);
  right: 0;
}

.topic-thread-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: var(--line-ui);
  text-align: left;
  cursor: pointer;
}

.topic-thread-nav {
  appearance: none;
  display: inline-grid;
  width: 28px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(95, 93, 102, 0.22);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.76;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.topic-thread-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-thread-link:hover .topic-thread-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The carousel room's one away-ness line (roomSignal): unvisited, then what's
   new, then unresolved work, then last activity. Its type is `.state-label`
   (objects.css), shared with My Stuff's room rows, so a room's state reads the
   same wherever it is listed; only its place in the card is set here. */
.topic-thread-signal {
  display: block;
  margin-top: calc(var(--space-1) / 2);
}

.topic-thread-nav:focus-visible {
  background: transparent;
  border-color: rgba(95, 93, 102, 0.42);
  color: var(--ink);
  outline: 0;
  opacity: 1;
}

@media (hover: hover) {
  .topic-thread-nav:hover {
    background: transparent;
    border-color: rgba(95, 93, 102, 0.42);
    color: var(--ink);
    opacity: 1;
  }
}

.topic-thread-icon {
  width: 22px;
  height: 19px;
}

.topic-thread-icon svg {
  width: 22px;
  height: 19px;
}

.topic-thread-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: var(--line-ui);
}

.play-link {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 17px;
  place-items: center;
  color: var(--color-youtube);
}

.play-link svg {
  display: block;
  width: 100%;
  height: 100%;
}

.play-link rect {
  fill: currentColor;
}

.play-link path {
  fill: var(--color-on-accent);
}
.play-link-generic {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--muted);
}

.generic-link-svg {
  width: 100%;
  height: 100%;
}

.generic-link-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thread-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--space-3);
}

.thread-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.idea-row {
  display: grid;
  grid-template-columns: var(--card-icon-column) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

/* A room row that carries its own bookmark (My Stuff): the row stays a button,
   the bookmark is a sibling pinned top-right so it never nests inside it. */
.idea-row-outer {
  --card-control-offset: var(--space-4);
  position: relative;
  display: flex;
}

.idea-row-outer > .idea-row {
  width: 100%;
  /* Clear the corner the bookmark occupies so the title never runs under it. */
  padding-right: calc(var(--card-control-offset) + var(--card-control-size));
}

.idea-row-bookmark {
  position: absolute;
  top: calc(var(--card-control-top) + 1px);
  right: calc(var(--card-control-offset) + 1px);
}

.thread-icon {
  display: inline-grid;
  width: 30px;
  height: 28px;
  place-items: center;
  color: var(--muted);
}

.thread-icon svg {
  display: block;
  width: 32px;
  height: 28px;
}

.idea-row > .thread-icon {
  align-self: center;
  justify-self: center;
}

.idea-row-copy {
  min-width: 0;
}

.thread-icon path,
.thread-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.thread-title-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.thread-icon-large {
  width: 34px;
  height: 32px;
  /* Centre the icon on the title's first line instead of its top edge. */
  margin-top: calc((1.35rem * 1.2 - 32px) / 2);
}

.thread-icon-large svg {
  width: 34px;
  height: 30px;
}

.episode-row:not(.episode-row-empty):hover,
.episode-row:not(.episode-row-empty):focus-visible,
.idea-row:hover,
.idea-row:focus-visible {
  background: var(--soft);
  outline: 0;
}

/* Two lines, then ellipsis — the same bar the discussion preview inside a source
   card holds (.topic-thread-title). A room title is a claim now, not a short
   question, so an unclamped one ran to four lines and the shelf turned into a
   column of unequal slabs. The whole title is on the room's own page, and on
   hover. */
.idea-row h2 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.04rem;
  line-height: 1.35;
}

.idea-row .meta,
.idea-row .state-label {
  margin-top: var(--space-1);
}