@layer components {
  /* Carriers */
  .ws-search--toolbar {
    flex: 1;
    min-width: 220px;
    margin-bottom: 0;
  }
  .ws-carrier-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    text-decoration: none;
    color: var(--text-primary);
    transition: box-shadow 0.2s;
  }
  .ws-carrier-card:hover {
    box-shadow: var(--shadow-hover);
  }
  .ws-carrier-main {
    min-width: 0;
    flex: 1;
  }
  .ws-carrier-name {
    --title-size: var(--text-md);
  }
  .ws-carrier-notes {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    max-width: 72ch;
  }
  .ws-carrier-contact {
    --icon-size: 13px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    flex-shrink: 0;
    min-width: 180px; /* mockup-spec */
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
  .ws-carrier-contact > div {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
  }
  .ws-carrier-contact--detail {
    --icon-size: 15px;
    margin-top: var(--spacing-xxs);
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
  }
  .ws-edit-footer-actions {
    display: flex;
    gap: var(--spacing-xs);
  }
  .ws-placement-stub {
    background: var(--surface-card);
    border: 1px dashed var(--border-default); /* deliberately-reserved panel */
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xs);
    text-align: center;
  }
  .ws-placement-stub-icon {
    --tile-wash: var(--surface-cream-dark);
    --icon-size: 22px;
    margin: 0 auto var(--spacing-sm);
  }
  .ws-placement-stub-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xxs);
  }
  .ws-placement-stub-copy {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    max-width: 32ch;
    margin: 0 auto;
  }

  /* Management */
  .ws-tab {
    --icon-size: 16px;
  }
  .ws-tab [class^="icon-"],
  .ws-tab [class*=" icon-"] {
    display: inline-block;
    vertical-align: -3px; /* optical alignment with tab label */
    margin-right: var(--spacing-xxs);
  }
  .ws-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
  }
  .ws-kpi-value {
    --title-size: var(--text-xl);
    margin: var(--spacing-xs) 0 2px;
  }
  .ws-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }
  .ws-metric-title {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
  }
  /* Caption under a metric card's title, for cards whose scope needs saying
     — which leads they count, not just what the bars mean. */
  .ws-metric-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
  }
  .ws-metric-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .ws-progress-track--funnel {
    height: 10px; /* mockup funnel bar height */
  }
  .ws-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
  }
  /* Rows whose left side wraps to several lines (a job's error excerpt, a
     normalized query) read better with the trailing value pinned to the top. */
  .ws-metric-row--top {
    align-items: flex-start;
  }
  .ws-metric-value {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--accent);
  }
  .ws-metric-bar-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }
  .ws-metric-bar-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    width: 110px; /* mockup-spec label column */
    flex-shrink: 0;
  }
  .ws-metric-bar-row .ws-progress-track {
    flex: 1;
  }
  .ws-metric-bar-value {
    font-size: var(--text-sm);
    font-weight: 600;
    width: 44px; /* mockup-spec value column */
    text-align: right;
  }
  .ws-metric-reason {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    max-width: 44ch;
  }

  /* 13-week cashflow table */
  .ws-cf-table {
    min-width: calc(200px + 13 * 88px + 104px); /* label + weeks + total, per design spec */
  }
  .ws-cf-row {
    display: grid;
    grid-template-columns: 200px repeat(13, 88px) 104px; /* design-spec grid */
    align-items: center;
    border-top: 1px solid var(--border-subtle);
  }
  .ws-cf-head {
    border-top: none;
  }
  .ws-cf-label {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
  .ws-cf-cell {
    padding: var(--spacing-xs);
    font-size: var(--text-xs);
    text-align: right;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .ws-cf-cell--head {
    --label-weight: 700;
    /* Direct, not --label-color: .ws-cf-cell's own color is declared in this
       file and would otherwise win the tie against .app-label's. */
    color: var(--text-tertiary);
  }
  .ws-cf-total {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ws-cf-band {
    --label-weight: 700;
    --label-color: var(--text-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--surface-cream-dark);
  }
  .ws-cf-net .ws-cf-cell,
  .ws-cf-balance .ws-cf-cell {
    font-weight: 700;
  }
  .ws-cf-cell--positive {
    color: var(--semantic-success);
  }
  .ws-cf-cell--negative {
    color: var(--semantic-danger);
  }
  .ws-cf-balance {
    background: var(--surface-cream-dark);
  }

  /* Quote-form submission cards (lead + client detail pages): read-only
     rendering of the append-only LeadSubmission rows. */
  .ws-submission-card {
    margin-bottom: var(--spacing-md);
  }
  .ws-submission-stack {
    margin-bottom: var(--spacing-lg);

    .ws-submission-card {
      margin-bottom: 0;
    }
  }
  .ws-submission-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);

    strong {
      color: var(--text-primary);
    }
  }
  .ws-submission-message {
    white-space: pre-wrap;
    border-left: 2px solid var(--border-default); /* quote bar */
    padding-left: var(--spacing-sm);
    margin-top: var(--spacing-xs);
  }

  /* Outreach sequence card (lead detail page) */
  .ws-outreach-steps {
    margin-top: var(--spacing-sm);
  }
  .ws-outreach-upcoming {
    margin-top: var(--spacing-sm);

    summary {
      cursor: pointer;
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }
    ul {
      list-style: none;
      padding: var(--spacing-xs) 0 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xxs);
    }
    li {
      font-size: var(--text-sm);
      color: var(--text-tertiary);
    }
  }
  .ws-outreach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
  }

  @media (max-width: 860px) {
    .workspace-body .app-topbar-mobile-content {
      padding-bottom: 0;
    }
    .workspace-body .app-topbar-mobile-content h1 {
      margin-bottom: var(--spacing-xxs);
    }
    .workspace-body .app-topbar-mobile-content .app-topbar-actions {
      margin: var(--spacing-xs) 0;
    }
    .workspace-body .app-topbar-mobile-content .app-topbar-actions > * {
      flex: 1;
      text-align: center;
      justify-content: center;
    }
    .ws-form-row {
      flex-wrap: wrap;
    }
    /* Child combinator for the same reason as the desktop rule above: an
       input nested in a .ws-field is a column-flex item, where flex-basis
       is the height and 100% collapses the control. */
    .ws-form-row > .ws-input {
      flex-basis: 100%;
    }
    /* One field per line at this width, so there is no second column to
       align against: drop the desktop grid/subgrid pairing back to a
       wrapping flex row. A wrapped item needs a basis wide enough to
       overflow the row, or it would stay on one line. */
    .ws-form-row:has(> .ws-field) {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-xs);
    }
    .ws-form-row > .ws-field {
      display: flex;
      flex-basis: 100%;
    }
    .ws-detail-grid {
      grid-template-columns: 1fr;
    }
    .app-drawer .ws-sidebar-user {
      margin-top: auto;
      border-top: 1px solid var(--border-subtle);
      padding: var(--spacing-sm) 0 0;
    }
    .ws-contact-row {
      grid-template-columns: 1fr;
    }
    .ws-location-row {
      grid-template-columns: 1fr;
    }
    .ws-loc-address,
    .ws-loc-suite,
    .ws-loc-city,
    .ws-location-tail {
      grid-column: auto;
    }
    .ws-detail-stats {
      gap: var(--spacing-sm);
    }
    .ws-financials-grid {
      gap: var(--spacing-xs);
    }
  }
}