/* 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;
}

.explore-thread-link .explore-thread-icon {
  width: 24px;
  height: 17px;
  margin-top: calc((1rem * var(--line-ui) - 17px) / 2 + 3px);
}

.explore-thread-link .explore-thread-icon svg {
  width: 24px;
  height: 17px;
}
.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-star-icon {
  display: inline-grid;
  height: 24px;
  /* Hug the glyph so the star starts at the same left edge as a no-star title. */
  place-items: center start;
  color: var(--clay);
  font-size: 1.08rem;
  line-height: 1;
}

.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;
}

.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 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  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;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

.episode-body .play-link {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  /* Center the icon on the title's first line, even when it wraps. */
  margin: calc((1rem * var(--line-ui) - 17px) / 2 + 3px) 0 0;
}

.episode-row > .mark-toggle {
  align-self: start;
  /* Center the bookmark on the title's first line. */
  margin-top: calc((1rem * var(--line-ui) - 32px) / 2);
}

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

/* 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);
}

/* With a reserved 2-line title, top-align the thread icon and center it on the
   title's first line instead of letting it float in the card's vertical middle. */
.carousel-track .idea-row {
  align-items: start;
}

.carousel-track .idea-row .thread-icon {
  margin-top: calc((1.04rem * 1.35 - 28px) / 2 + 4px);
}

.episode-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topic-thread-preview {
  grid-column: 1 / -1;
  grid-row: 2;
}

.topic-thread-empty {
  grid-column: 2;
  grid-row: 2;
}

.topic-thread-preview {
  display: grid;
  gap: var(--space-2);
  width: calc(100% + 32px + var(--space-3));
  margin-top: var(--space-1);
}

.topic-thread-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  /* Keep the nav arrows pinned to the first line so they don't shift down when
     the title wraps to two lines. */
  align-items: start;
}

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

.topic-thread-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  min-height: 30px;
  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;
}

.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-link .topic-thread-icon {
  width: 24px;
  height: 17px;
  /* Center the icon on the preview title's first line. */
  margin-top: calc((1rem * var(--line-ui) - 17px) / 2);
}

.topic-thread-link .topic-thread-icon svg {
  width: 24px;
  height: 17px;
}

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

.topic-thread-rest {
  /* Indent past the thread icon + gap so it lines up with the thread titles. */
  margin-left: calc(24px + var(--space-3));
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.topic-thread-rest:hover,
.topic-thread-rest:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  outline: 0;
}

.play-link {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 17px;
  margin-bottom: 8px;
  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);
  margin-bottom: 0;
  color: var(--muted);
}

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

.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: 30px 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;
}

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

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

.thread-icon path {
  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;
}

.idea-row h2 {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.35;
}

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

/* On a Topic, align the thread mark with the title's first line rather than
   centering it across the title and metadata together. */
.topic-screen .idea-row {
  align-items: start;
}

.topic-screen .idea-row .thread-icon {
  margin-top: calc((1.04rem * 1.35 - 28px) / 2 + 4px);
}