@layer components {
  .table-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .data-table { width: 100%; border-collapse: collapse; }
  .data-table th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: left;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--ink-100);
    background: var(--ink-50);
  }
  .data-table td {
    font-size: 14px;
    color: var(--ink-700, var(--ink-800));
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--ink-100);
    vertical-align: middle;
  }
  .data-table tr:hover td { background: var(--ink-50); }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table a:not(.btn) { color: var(--ink-800); text-decoration: none; }
  .data-table a:not(.btn):hover { color: var(--forest-700); }
  .td-name { font-weight: 500; color: var(--ink-800); }
  .td-muted { color: var(--ink-400); font-size: 13px; }
  .td-actions { display: flex; gap: var(--s2); justify-content: flex-end; }

  /* A portfolio's optional story, shown muted under its name in the list. */
  .td-subtle {
    margin: var(--s1) 0 0;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-400);
  }

  /* The per-row Edit link into a portfolio's name/description form. */
  .portfolio-edit-link {
    font-size: 13px;
    white-space: nowrap;
  }

  /* Muted caption under a table-card (e.g. a guidance footnote). */
  .table-note {
    font-size: 13px;
    color: var(--ink-400);
    margin-top: var(--s3);
  }

  /* Portfolio entries: a strip of the portfolio's photo thumbnails fills the
     remaining row space and links into the portfolio. */
  .portfolio-thumbs-cell { width: 60%; }
  .portfolio-thumbs {
    display: flex;
    gap: var(--s2);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .portfolio-thumb {
    width: 56px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--r-sm, 6px);
    background: var(--ink-100);
  }
  .portfolio-thumb.is-empty { background: var(--ink-100); }

  @media (max-width: 768px) {
    .portfolio-thumb { width: 44px; height: 33px; }
  }

  @media (max-width: 768px) {
    .data-table th,
    .data-table td {
      padding: var(--s3);
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .data-table th,
    .data-table td {
      padding: var(--s2) var(--s3);
    }

    .data-table .td-muted {
      font-size: 12px;
    }
  }
}