h1.thing-title {
  --line-height: 1.33;
  line-height: var(--line-height);
  /* Keep the visual gap below the title constant as line-height shrinks */
  margin-bottom: calc(4px + (1.25 - var(--line-height)) * 0.5em);
}

/* Let the bookmark toggle flow inline as the last "word" of the title so it
   wraps with the text. turbo-frame and button_to's form are block by default,
   so pull the whole chain into the inline flow. */
h1.thing-title turbo-frame,
h1.thing-title .bookmark-toggle form {
  display: inline;
}

h1.thing-title .bookmark-toggle button {
  display: inline-block;
  vertical-align: middle;
}

/* --- */

.empty-state {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  align-items: center;
  padding: 2rem;
  padding-bottom: 3rem;

  background-color: var(--color--bg-1);
  border-radius: var(--border-radius--base);

  &.empty-state--no-bg {
    background-color: transparent;
  }

  .icons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    color: var(--color--border-mid-contrast);
  }

  .empty-state--text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    align-items: center;
    text-align: center;

    p {
      color: var(--color--aa-text);
    }
  }
}


/* Temporary stylesheet inbox.
   Move rules into the appropriate base, component, or layout file when processed. */

.thing-table-container.capped-width {
  max-width: 56rem;
}

.thing-table {
  --thing-table-control-size: var(--line-height--ui);
}

.thing-table .comments-count {
  width: 4rem;
  text-align: center;
}

.thing-table :where(.comments-count, .privacy-cell, .bookmark-cell, .actions-cell) {
  vertical-align: middle;
}

.thing-table .privacy-header,
.thing-table .privacy-cell,
.thing-table .bookmark-header,
.thing-table .bookmark-cell {
  width: 4rem;
  text-align: center;
}

.thing-table .actions-header,
.thing-table .actions-cell {
  text-align: center;
}

.thing-table td.comments-count {
  color: var(--color--aa-text);
}

.thing-table th.comments-count svg,
.thing-table th.privacy-header svg,
.thing-table th.bookmark-header svg {
  display: block;
  margin-inline: auto;
}

.thing-table .comments-count-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  min-block-size: var(--thing-table-control-size);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color--aa-text);
  line-height: 1;
  text-decoration: none;
}

.thing-table .comments-count-link:hover,
.thing-table .comments-count-link:focus-visible {
  color: var(--color--link);
  text-decoration: none;
}

.thing-table .thing-title-link {
  line-height: var(--line-height--ui);
}

.thing-table .bookmark-cell turbo-frame,
.thing-table .bookmark-cell .bookmark-toggle,
.thing-table .bookmark-cell .bookmark-toggle form,
.thing-table .bookmark-cell .bookmark-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--thing-table-control-size);
  line-height: 1;
}

.thing-table .private-eyelash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--thing-table-control-size);
  color: var(--color--aa-text);
  line-height: 1;
}

.thing-table .actions-cell .actions {
  inline-size: 100%;
  justify-content: center;
}

.thing-table .actions-cell .icon-to {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--thing-table-control-size);
  line-height: 1;
}

@media (max-width: 879px) {
  .thing-table {
    table-layout: auto;
    inline-size: max-content;
  }
}