.layoffs-page .layoffs-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.layoffs-page .layoffs-stat {
    flex: 1 1 150px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 12px 14px;
}
.layoffs-page .layoffs-stat b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.layoffs-page .layoffs-stat span {
    display: block;
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 3px;
}

.layoffs-page .layoffs-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.layoffs-page .layoffs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 36px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    width: 280px;
    color: #8a8a8a;
}
.layoffs-page .layoffs-search input {
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: #1a1a1a;
    flex: 1;
    min-width: 0;
}
.layoffs-page .layoffs-search input::placeholder { color: #8a8a8a; }
.layoffs-page .layoffs-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.layoffs-page .layoffs-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4a4a4a;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.layoffs-page .layoffs-chip:hover { background: #fafafa; }
.layoffs-page .layoffs-chip-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.layoffs-page .layoffs-chip-active:hover { background: #1a1a1a; }
.layoffs-page .layoffs-chip-count {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.layoffs-page .layoffs-chip-active .layoffs-chip-count { background: rgba(255,255,255,0.22); }
.layoffs-page .layoffs-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.layoffs-page .layoffs-dot-official { background: #16a34a; }
.layoffs-page .layoffs-dot-unofficial { background: #d97706; }

.layoffs-page .layoffs-filters { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.layoffs-page .layoffs-filters label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #8a8a8a;
    white-space: nowrap;
}
.layoffs-page .layoffs-filters select {
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid #e5e5e5;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8a8a' d='M5 6 0 0h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    border-radius: 8px;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.layoffs-page .layoffs-filters select:focus { outline: none; border-color: #1a1a1a; }

.layoffs-page .layoffs-empty { padding: 32px 16px; text-align: center; color: #8a8a8a; font-size: 14px; background: #fff; border-top: 1px solid #e5e5e5; }

.layoffs-page .table-responsive {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.layoffs-page .layoffs-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13.5px;
}
.layoffs-page .layoffs-table th:nth-child(1), .layoffs-page .layoffs-table td:nth-child(1) { width: 20%; }
.layoffs-page .layoffs-table th:nth-child(2), .layoffs-page .layoffs-table td:nth-child(2) { width: 9%; }
.layoffs-page .layoffs-table th:nth-child(3), .layoffs-page .layoffs-table td:nth-child(3) { width: 20%; }
.layoffs-page .layoffs-table th:nth-child(4), .layoffs-page .layoffs-table td:nth-child(4) { width: 11%; }
.layoffs-page .layoffs-table th:nth-child(5), .layoffs-page .layoffs-table td:nth-child(5) { width: 10%; }
.layoffs-page .layoffs-table th:nth-child(6), .layoffs-page .layoffs-table td:nth-child(6) { width: 12%; }
.layoffs-page .layoffs-table th:nth-child(7), .layoffs-page .layoffs-table td:nth-child(7) { width: 18%; }

.layoffs-page .layoffs-table th,
.layoffs-page .layoffs-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: middle;
}
.layoffs-page .layoffs-table thead { background-color: #f5f5f5; }
.layoffs-page .layoffs-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.layoffs-page .layoffs-table tbody tr { transition: background 120ms ease; }
.layoffs-page .layoffs-table tbody tr:hover { background: #fafafa; }
.layoffs-page .layoffs-table tbody tr:last-child td { border-bottom: none; }

.layoffs-page .layoffs-company { font-weight: 600; color: #1a1a1a; font-size: 14px; }
.layoffs-page .layoffs-date { font-variant-numeric: tabular-nums; color: #1a1a1a; font-weight: 500; white-space: nowrap; }
.layoffs-page .layoffs-count { font-variant-numeric: tabular-nums; font-weight: 600; color: #1a1a1a; }
.layoffs-page .layoffs-percent { font-variant-numeric: tabular-nums; font-weight: 600; color: #9b2929; }
.layoffs-page .layoffs-blank { color: #b0b0b0; }

/* long industry names wrap inside the column; the cell lends the tag 10px of padding */
.layoffs-page .layoffs-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 10px !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
    color: #4a4a4a;
    background: #f0f0f0;
}
.layoffs-page .layoffs-table tbody td:nth-child(3) { padding-left: 6px; padding-right: 6px; }

.layoffs-page .layoffs-source { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.layoffs-page .layoffs-source-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.layoffs-page .layoffs-source-official { color: #0f6b32; }
.layoffs-page .layoffs-source-official .layoffs-source-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.layoffs-page .layoffs-source-unofficial { color: #92660a; }
.layoffs-page .layoffs-source-unofficial .layoffs-source-dot { background: #d97706; }

.layoffs-page .layoffs-link { color: #0f5fd6; font-weight: 500; text-decoration: none; white-space: nowrap; }
.layoffs-page .layoffs-link:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .layoffs-page .layoffs-stat { flex: 1 1 45%; }
    .layoffs-page .layoffs-toolbar { gap: 8px; padding: 10px; }
    .layoffs-page .layoffs-search { width: 100%; }
    .layoffs-page .layoffs-chips { flex-basis: 100%; }
    .layoffs-page .layoffs-filters { flex-basis: 100%; margin-left: 0; }
    .layoffs-page .layoffs-filters select { flex: 1; }
    .layoffs-page .table-responsive { border: none; background: transparent; border-radius: 0; overflow: visible; }
    .layoffs-page .layoffs-table { min-width: 0; table-layout: auto; }
    .layoffs-page .layoffs-table, .layoffs-page .layoffs-table tbody, .layoffs-page .layoffs-table tr, .layoffs-page .layoffs-table td { display: block; width: 100%; }
    .layoffs-page .layoffs-table thead { display: none; }
    .layoffs-page .layoffs-table tbody tr { border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); background-color: #fff; margin: 0 0 12px 0; padding: 4px 14px; }
    .layoffs-page .layoffs-table tbody tr td:last-child { border-bottom: none; }
    .layoffs-page .layoffs-table td { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; border: none; border-bottom: 1px solid #f0f0f0; padding: 10px 0; word-wrap: break-word; }
    .layoffs-page .layoffs-table td::before { content: attr(data-label); font-weight: 600; color: #666; font-size: 0.85em; }
    .layoffs-page .layoffs-table th:nth-child(n), .layoffs-page .layoffs-table td:nth-child(n) { width: 100%; }
}

/* rows off screen are not laid out; they stay in the DOM, Ctrl+F and the filters */
.layoffs-page .layoffs-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 55px;
}

/* one colour per industry, assigned by alphabetical position on the server; all pairs pass 4.5:1 */
.layoffs-page .layoffs-pill.is-ind-1  { background: #dbeafe; color: #1d4ed8; }
.layoffs-page .layoffs-pill.is-ind-2  { background: #dcfce7; color: #15803d; }
.layoffs-page .layoffs-pill.is-ind-3  { background: #ede9fe; color: #6d28d9; }
.layoffs-page .layoffs-pill.is-ind-4  { background: #ffedd5; color: #c2410c; }
.layoffs-page .layoffs-pill.is-ind-5  { background: #cffafe; color: #0e7490; }
.layoffs-page .layoffs-pill.is-ind-6  { background: #fef3c7; color: #92400e; }
.layoffs-page .layoffs-pill.is-ind-7  { background: #ffe4e6; color: #be123c; }
.layoffs-page .layoffs-pill.is-ind-8  { background: #ccfbf1; color: #0f766e; }
.layoffs-page .layoffs-pill.is-ind-9  { background: #fae8ff; color: #a21caf; }
.layoffs-page .layoffs-pill.is-ind-10 { background: #ecfccb; color: #4d7c0f; }
.layoffs-page .layoffs-pill.is-ind-11 { background: #e2e8f0; color: #334155; }
.layoffs-page .layoffs-pill.is-ind-12 { background: #e0e7ff; color: #4338ca; }

.layoffs-page .layoffs-domain {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* labels run to one or two lines: reserving two keeps the four cards aligned */
.layoffs-page .layoffs-stat span { min-height: 32px; }
@media (max-width: 767px) {
    .layoffs-page .layoffs-stat span { min-height: 0; }
    .layoffs-page .layoffs-domain { white-space: normal; }
}

/* LIVE badge moved out of the h1; font-size/weight/line-height reproduce what it inherited there */
.layoffs-page .layoffs-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 500;
}
.layoffs-page .layoffs-head h1 { flex: 0 1 auto; margin: 0; }
.layoffs-page .layoffs-head .live_stream { flex: none; line-height: 20px; }
@media (max-width: 767px) {
    .layoffs-page .layoffs-head { display: block; padding-top: 10px; }
    .layoffs-page .layoffs-head .live_stream { display: table; margin-bottom: 0; }
    .layoffs-page .layoffs-head h1 { padding-top: 0; }
}
/* was an <h3>: keeps the same look as a <p> */
.layoffs-page .layoffs-intro { margin: 20px 0 10px; line-height: 1.1; }
.layoffs-page .layoffs-intro small { font-size: 15.6px; line-height: 1; color: #777; }

.layoffs-page .layoffs-updated { font-size: 13px; color: #8a8a8a; }
.layoffs-page .layoffs-updated time { font-weight: 600; color: #4a4a4a; }