/* Drill: the list behind a number. Route #/drill/<metricId>. Compact density, set by app.js from meta.density.
   Layout: back link and headline, then the blue number tile (4) beside "What this counts" with filter pills (8),
   then one flush tile with the dense table (12). */

[data-station="drill"] .drill-header { display: flex; flex-direction: column; gap: 10px; }
[data-station="drill"] .drill-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-float);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  transition: color var(--t), transform var(--t);
}
[data-station="drill"] .drill-back:hover { color: var(--avid-blue-strong); text-decoration: none; transform: translateX(-2px); }

/* ---------- The number ---------- */
[data-station="drill"] .drill-number { justify-content: flex-start; }
[data-station="drill"] .drill-number .big { margin-top: auto; }

/* ---------- What this counts and the filters ---------- */
[data-station="drill"] .drill-about-text { font-size: 14px; color: var(--ink); max-width: 720px; line-height: 1.5; }
[data-station="drill"] .drill-about-note { color: var(--ink-3); }
[data-station="drill"] .drill-filters { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
[data-station="drill"] .drill-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-station="drill"] .drill-filter .tile-label { margin: 0; }
[data-station="drill"] .drill-pills { display: flex; flex-wrap: wrap; gap: 6px; }
[data-station="drill"] .drill-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--mist); color: var(--ink-2);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background var(--t), color var(--t);
}
[data-station="drill"] .drill-pill .num { font-size: 11px; color: var(--ink-3); font-weight: 700; }
[data-station="drill"] .drill-pill:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
[data-station="drill"] .drill-pill.is-active { background: var(--deep-ink); color: #fff; }
[data-station="drill"] .drill-pill.is-active .num { color: var(--on-dark-3); }

/* ---------- The list ---------- */
[data-station="drill"] .drill-list > .tile-head { padding: var(--space-2) var(--space-2) 0; margin-bottom: 4px; }
[data-station="drill"] .drill-table td { line-height: 1.35; }
[data-station="drill"] .drill-table .col-title,
[data-station="drill"] .drill-table .col-waitingReason,
[data-station="drill"] .drill-table .col-openItem,
[data-station="drill"] .drill-table .col-asked { min-width: 200px; max-width: 360px; }
[data-station="drill"] .drill-table .col-household { white-space: nowrap; }
[data-station="drill"] .drill-table tbody tr.is-clickable:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--avid-blue); background: var(--mist); border-radius: 0; }
[data-station="drill"] .drill-go-col, [data-station="drill"] .drill-go { width: 28px; text-align: right; color: var(--ink-disabled); }
[data-station="drill"] .drill-table tr.is-clickable:hover .drill-go { color: var(--avid-blue-strong); }
[data-station="drill"] .drill-go svg { display: inline-block; }
[data-station="drill"] .drill-none { color: var(--ink-disabled); }
[data-station="drill"] .drill-due.is-bad { color: var(--bad-ink); font-weight: 700; }
[data-station="drill"] .drill-due.is-warn { color: var(--warn-ink); font-weight: 700; }
[data-station="drill"] .drill-person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
[data-station="drill"] .drill-person .avatar { width: 24px; height: 24px; font-size: 10px; }
[data-station="drill"] .drill-list .empty { padding: var(--space-4); }

@media (max-width: 1100px) {
  [data-station="drill"] .drill-number, [data-station="drill"] .drill-about { grid-column: 1 / -1; }
}

/* Phone: the list keeps its first three columns and stays inside the tile. Wider content scrolls inside the tile, never the page. */
@media (max-width: 600px) {
  [data-station="drill"] .drill-table .is-secondary { display: none; }
  [data-station="drill"] .drill-list .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
  [data-station="drill"] .drill-table .col-household { white-space: normal; }
  [data-station="drill"] .drill-table .col-title,
  [data-station="drill"] .drill-table .col-asked { min-width: 0; }
  [data-station="drill"] .drill-table th:last-child, [data-station="drill"] .drill-table td:last-child { padding-right: 0; }
}