@layer components {
  /* Pipeline */
  .ws-section-title {
    margin-bottom: var(--spacing-sm);
  }
  .ws-board-card-link {
    text-decoration: none;
    display: block;
    color: var(--text-primary);
  }
  .ws-board-card-link:hover {
    color: var(--accent);
  }
  .ws-board-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xxs);
  }
  .ws-board-card-source {
    font-size: var(--text-xs);
  }
  .ws-chip--advance {
    border-color: var(--accent-wash);
    background: var(--accent-wash);
    color: var(--accent);
  }
  .ws-detail-grid--rail {
    grid-template-columns: 1.4fr 1fr;
  }
  .ws-detail-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .ws-select--block {
    width: 100%;
    margin-top: var(--spacing-xxs);
  }
  .ws-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
  }
  .ws-convert-btn {
    margin-top: var(--spacing-sm);
  }
  .ws-lead-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
    margin: var(--spacing-xxs) 0 var(--spacing-xs);
  }
  .ws-lead-contact-grid .ws-field {
    margin-bottom: 0;
  }
  .ws-field--span {
    grid-column: 1 / -1;
  }
  .ws-notes-area {
    width: 100%;
    margin: var(--spacing-xxs) 0 var(--spacing-xs);
  }
  .ws-timeline--padded {
    margin-top: var(--spacing-sm);
  }
  .ws-lead-lost-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-xxs) 0 var(--spacing-xs);
  }
  .ws-lead-action-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
  }

  /* Backlog: list of known-but-not-worked leads */
  .ws-search--filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    max-width: none;
  }
  .ws-search--filters .ws-input {
    flex: 1;
    min-width: 220px; /* keeps the search usable before wrapping the filters */
    max-width: 420px; /* mirrors the plain .ws-search width */
  }
  .ws-backlog-table {
    min-width: 700px; /* keeps the six columns legible before scrolling */
  }
  .ws-backlog-row {
    display: grid;
    grid-template-columns: 1fr 70px 120px 110px 80px 170px; /* mirrors .ws-client-row column sizing; wide last column fits the Lost + Promote chip pair */
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .ws-discovery-table {
    min-width: 720px; /* keeps the six columns legible before scrolling */
  }
  .ws-discovery-row {
    display: grid;
    grid-template-columns: 1fr 60px 130px 90px 80px 190px; /* mirrors .ws-backlog-row column sizing */
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .ws-discovery-actions,
  .ws-backlog-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
  }
  .ws-discovery-actions {
    flex-wrap: wrap; /* a flagged row carries a third, name-bearing chip */
  }
  /* The offices of one practice, banded together: the accent edge is what
     says the rows below the head belong to the action inside it. */
  .ws-discovery-group {
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent); /* group edge accent */
    background: var(--semantic-info-wash);
  }
  .ws-discovery-group:last-child,
  .ws-discovery-group .ws-table-row:last-child {
    border-bottom: none;
  }
  .ws-discovery-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
  }
  /* The overflow note on a group card larger than its office bound. */
  .ws-discovery-group-more {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
  .ws-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  /* System: audit tables (event log + amendments) + the sessions list */
  .ws-events-table,
  .ws-amendments-table,
  .ws-sessions-table {
    min-width: 760px; /* keeps the five columns legible before scrolling */
  }
  .ws-events-row {
    display: grid;
    grid-template-columns: 110px 220px 150px 1fr 110px; /* timestamp/name/subject fit their longest values */
    align-items: start;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .ws-events-row .ws-table-title {
    overflow-wrap: anywhere; /* dotted event names have no natural break points */
  }
  .ws-amendments-row {
    display: grid;
    grid-template-columns: 110px 90px 150px 1fr 110px; /* timestamp/pill/record fit their longest values */
    align-items: start;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .ws-sessions-table {
    min-width: 820px; /* six columns, so wider than the audit tables' five */
  }
  .ws-sessions-row {
    display: grid;
    grid-template-columns: 1fr 110px 110px 150px 120px 100px; /* timestamps/device/IP fit their longest values */
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .ws-sessions-row > div {
    /* Neither the IP nor the device value is bounded by its fixed track: an
       IPv6 address breaks at no colon, and the unrecognized-agent fallback
       is one long token. Without this they paint over the Revoke button. */
    overflow-wrap: anywhere;
  }
  .ws-sessions-row .ws-table-sub .pill {
    margin-right: var(--spacing-xxs);
  }
  .ws-sessions-self {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .ws-audit-payload {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }
  .ws-audit-payload summary {
    cursor: pointer;
    color: var(--text-tertiary);
  }

  /* Applications */
  .ws-board-card-lines {
    color: var(--text-secondary);
  }
  .ws-client-chip {
    --icon-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--accent-wash);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: var(--spacing-xxs) var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    text-decoration: none;
  }
  .ws-client-chip span:last-child {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
  }
  .ws-line-chips,
  .ws-radio-row {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: var(--spacing-xxs);
  }
  .ws-line-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: var(--spacing-xxs) var(--spacing-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
  }
  .ws-line-chip:has(:checked) {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent);
  }
  .ws-line-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .ws-uw-grid--snug {
    gap: var(--spacing-xs);
    margin: var(--spacing-xxs) 0 var(--spacing-xs);
  }

  /* Policies table */
  .ws-policy-table {
    min-width: 680px; /* four columns stay legible before scrolling */
  }
  .ws-policy-row {
    display: grid;
    grid-template-columns: 1fr 150px 140px 120px; /* mockup column widths */
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
  }
  button.ws-policy-row {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
  }
  .ws-policy-group-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--surface-page);
    border-top: 1px solid var(--border-subtle);
  }
  .ws-policy-group-name {
    --title-size: var(--text-md);
  }
  .ws-policy-group-band strong {
    color: var(--text-secondary);
    font-weight: 700;
  }

}