/* The case list and a record's fields, and a dialog's foot. SPDX-License-Identifier: Apache-2.0 */

@layer components {
  .choice-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

  .case-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .case-table th, .case-table td {
    padding: var(--space-3) var(--space-2);
    border-bottom: var(--hairline) solid var(--line);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
  }
  .case-table thead th { position: sticky; top: 0; background: var(--panel); color: var(--ink-faint); font-weight: var(--weight-regular); }
  .case-table tbody tr { cursor: pointer; }
  .case-table tbody tr:hover { background: var(--mist); }
  .sort-head, .case-key {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .sort-head { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .case-key { color: var(--accent); font-weight: var(--weight-strong); }

  .dialog-note { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
  .dialog-note[hidden] { display: none; }

  .case-section {
    margin: var(--space-4) 0 0;
    color: var(--ink-faint);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .field-list { display: grid; grid-template-columns: var(--rules-measure-width) 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-sm); }
  .field-list dt { color: var(--ink-soft); }
  .field-list dd { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; color: var(--ink); }
  .dialog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-8);
    border-top: var(--hairline) solid var(--line);
  }
  .dialog-foot .dialog-note { margin-right: auto; }
}