/* Artifacts: the list of cards, an open document or artifact with its
   history, the overlay a chat's link opens it in, and the panel's
   Archived row. */
@layer views {
  /* The view is its own scroller, like Goals: it clears the floating
     controls and keeps its content to the reading column. */
  #view-artifacts {
    --page-top: calc(var(--controls-h) + 8px);
    --page-x: 34px;
    --column: 720px;
    min-height: 0;
    padding: var(--page-top) var(--page-x) 96px;
    overflow: auto;
    scroll-padding-top: var(--controls-h);
  }
  #view-artifacts > * {
    width: 100%;
    max-width: var(--column);
    margin-right: auto;
    margin-left: auto;
  }
  #view-artifacts > .view-head,
  #view-artifacts > .filter-panel {
    width: auto;
    max-width: none;
    margin-right: calc(-1 * var(--page-x));
    margin-left: calc(-1 * var(--page-x));
  }

  .artifacts-list {
    display: grid;
    gap: 12px;
  }

  .artifact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 8px;
    align-items: start;
    padding: 14px 12px 14px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
  }
  .artifact-card:hover .row-more,
  .artifact-card:focus-within .row-more { opacity: 1; }
  .artifact-card .row-menu-wrap { margin: -6px 0 0; }
  .artifact-card > .delete-confirm,
  .artifact-card > .artifact-notice { grid-column: 1 / -1; margin-top: 10px; }

  .artifact-card-main { display: grid; gap: 6px; min-width: 0; }
  .artifact-card-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .artifact-card-link { color: inherit; text-decoration: none; }
  .artifact-card-link:hover { text-decoration: underline; }
  .artifact-card-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

  .artifact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }
  .artifact-meta > span:not(.avatar) + span:not(.avatar)::before {
    content: "\00b7";
    margin-right: 8px;
  }
  .artifact-agent { color: var(--ink-soft); }

  .artifact-card-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .artifact-rename { font-size: 18px; }
  .artifact-notice { margin: 0; color: var(--muted); font-size: 13px; }
  .artifact-notice.delete-refusal { color: var(--red); }

  /* An open item: its head (.open-head in components.css: Back, the
     title, and its ⋯), the meta line, the text, then its history. */
  /* One column that may shrink below its content, so a wide code block
     scrolls inside itself, not the page. */
  .artifact-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .artifact-open-head .artifact-rename { flex: 1; }

  .artifact-content {
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .artifact-entries { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .artifact-entries-heading { margin: 0 0 12px; }
  .artifact-entry-list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .artifact-entry { display: grid; gap: 4px; min-width: 0; }
  .artifact-entry-time { color: var(--muted); font-size: 13px; }
  .artifact-entry-text { line-height: 1.55; overflow-wrap: anywhere; }
  .artifact-entry-files {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    font-size: 14px;
  }
  .artifact-entry-files a { color: var(--green); }
  .artifact-more { margin-top: 16px; }

  /* An item a chat's link opens over the view (artifact-overlay.js): the
     brief's overlay and sheet (brief.css) with the bar's actions at its
     right, above the brief's overlay and quick chat's pane. */
  .brief-overlay.artifact-overlay { z-index: 26; }
  .artifact-overlay .brief-bar { justify-content: flex-end; }
  .artifact-overlay-doc { padding-top: 24px; }

  [data-panel-for="artifacts"] .panel-row .avatar { flex: none; }
  .artifacts-archived-row { margin-top: 20px; }
  .filter-panel .artifacts-archived-row { grid-column: 1 / -1; margin-top: 0; }

  @media (max-width: 719.98px) {
    #view-artifacts { --page-x: 16px; }
    .artifact-card { padding-left: 16px; padding-right: 8px; }
  }
}