/* ─────────────────────────────────────────────────────────────────────────────
   WAITLIST
   The owner's view of who applied for the beta, and how sign-ups are trending.

   Part 11 of 12. THE ORDER OF THESE FILES IS LOAD-BEARING — the list lives in
   lib/app_css.php and this sits before responsive.css, which overrides.

   EVERY CLASS IS wl-*. The audit view was written with .activity-row, a name
   overview.css already owned and loads after, so the dashboard's grid laid the
   rows out instead — 104px of text column wrapping one word at a time. A prefix
   that belongs to one view cannot collide with another's.

   No new colours. Ink on the existing tokens, thin rules, tabular numerals:
   the same quiet the rest of the app uses to say "this is a document".
   ───────────────────────────────────────────────────────────────────────────── */

.wl-lede { font-size: 13px; max-width: 72ch; margin: 0 0 22px; line-height: var(--leading-relaxed); }

.wl-header-side { display: flex; align-items: center; gap: 14px; }
.wl-csv { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wl-csv .material-icons { font-size: 16px; }

/* ── the four numbers ──────────────────────────────────────────────────────── */
.wl-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px; background: var(--divider);
    border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
    margin-bottom: 30px;
}
.wl-kpi { background: var(--bg-card); padding: 16px 18px 18px; min-width: 0; }
.wl-kpi-value {
    font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-main);
    line-height: var(--leading-none); margin-top: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-kpi-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }

.wl-section { margin-bottom: 30px; }
.wl-section-title { display: block; margin-bottom: 10px; }

/* ── 26 weeks ──────────────────────────────────────────────────────────────────
   preserveAspectRatio="none" stretches the bars to the container's width, which is
   right for rectangles and wrong for type — so the week labels are HTML below,
   distributed on the same grid, and never scale with the chart. */
.wl-chart { width: 100%; }
.wl-svg { display: block; width: 100%; height: 150px; }
.wl-bar { fill: var(--text-main); }
.wl-bar-zero { fill: var(--divider-strong); }
.wl-axis { stroke: var(--divider); stroke-width: 1; }
.wl-ticks { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); margin-top: 7px; }
.wl-tick {
    font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--text-muted); text-align: center; white-space: nowrap;
    overflow: visible;
}

/* ── the breakdowns ────────────────────────────────────────────────────────── */
.wl-splits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 30px; }
.wl-split { min-width: 0; }
.wl-bd {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-bottom: 1px solid var(--divider); isolation: isolate;
}
.wl-bd:last-child { border-bottom: 0; }
/* the proportional rule sits BEHIND the words rather than beside them: a separate
   bar column would cost horizontal room these three narrow panels do not have */
.wl-bd-fill {
    position: absolute; inset: 0 auto 0 0; z-index: -1;
    background: var(--active-theme-bg); border-radius: 3px;
}
.wl-bd-label {
    flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-bd-n { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }
.wl-none { font-size: 12.5px; color: var(--text-muted); padding: 7px 0; }

/* ── the list ──────────────────────────────────────────────────────────────── */
.wl-list-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.wl-list-head .wl-section-title { margin-bottom: 0; flex: 0 0 auto; }
.wl-filter {
    flex: 1 1 auto; min-width: 0; max-width: 340px;
    font: inherit; font-size: 12.5px; color: var(--text-main);
    background: var(--bg-input); border: 1px solid var(--divider); border-radius: var(--radius-sm);
    padding: 7px 11px;
}
.wl-filter:focus { outline: none; border-color: var(--divider-strong); }
/* A cell is one line. The full value rides on the title attribute, so truncation
   narrows nothing and hides nothing. */
.wl-cell {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-empty { font-size: 12.5px; color: var(--text-muted); padding: 22px 2px; }

@media (max-width: 1100px) {
    .wl-kpis  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-splits { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 680px) {
    .wl-kpis { grid-template-columns: 1fr; }
    .wl-list-head { flex-wrap: wrap; }
    .wl-filter { max-width: none; }
    /* every fourth label is still too many once the chart is phone-width */
    .wl-ticks { display: none; }
}