/* Feinh Pro (UI v2): the drill-down panel's table, chips, count and export (public/js/fp-drill.js, drill.py).
   Builds on drill.css (the drawer's list). Loaded on every Pro page from templates/pro_base.html. Tokens only. */
.fd.is-table { inline-size: var(--palette-w); }
.fd-head { gap: var(--space-2); }
.fd-head h2 { margin: var(--space-0); min-inline-size: var(--space-0); }
.fd-crumb { flex: none; display: inline-flex; align-items: center; min-block-size: var(--control-sm); padding: var(--space-0) var(--space-1); border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-meta-size); line-height: var(--text-meta-lh); cursor: pointer; }
.fd-crumb:hover { color: var(--text-link); }
.fd-n { flex: none; font-family: var(--font-num); font-variant-numeric: tabular-nums; background: var(--accent-subtle); color: var(--text-primary); }
.fd-acts { display: inline-flex; align-items: center; gap: var(--space-2); }
.fd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fd-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--control-sm); padding: var(--space-0) var(--space-3); border-radius: var(--radius-full);
  background: var(--surface-subtle); color: var(--text-strong-secondary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); }
.fd-cl { color: var(--text-secondary); font-weight: var(--weight-regular); }
.fd-ins { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--control-sm); color: var(--text-link); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); text-decoration: none; }
.fd-ins:hover { color: var(--text-link-hover); text-decoration: underline; }
.fd-tw { overflow-x: auto; border: var(--border-w) solid var(--border-default); border-radius: var(--radius-md); }
.fd-t { inline-size: 100%; border-collapse: collapse; }
.fd-t th { position: sticky; inset-block-start: var(--space-0); text-align: start; padding: var(--space-2) var(--space-3); background: var(--surface-subtle); color: var(--text-secondary);
  font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); border-block-end: var(--border-w) solid var(--border-default); white-space: nowrap; }
.fd-t td { padding: var(--space-2) var(--space-3); border-block-end: var(--border-w) solid var(--border-subtle); color: var(--text-primary); font-size: var(--text-table-size); line-height: var(--text-table-lh);
  vertical-align: middle; font-variant-numeric: tabular-nums; }
.fd-t tr:last-child td { border-block-end: var(--space-0); }
.fd-t td.is-num, .fd-t td.is-short { white-space: nowrap; }
.fd-t td:first-child { max-inline-size: var(--record-left-w); }
.fd-t tbody tr:hover { background: var(--surface-subtle); }
.fd-same { margin: var(--space-0); color: var(--text-secondary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
/* "See the data ›" on a chart card's header */
.fd-see { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--control-sm); padding: var(--space-0); border: var(--space-0); background: transparent; color: var(--text-link);
  font: inherit; font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); cursor: pointer; white-space: nowrap; }
.fd-see:hover { color: var(--text-link-hover); text-decoration: underline; }
/* anything that drills looks like it: a pointer, and a ring on keyboard focus */
[data-fp-drill], [data-fp-see] { cursor: pointer; }
[data-fp-drill]:focus-visible, [data-fp-see]:focus-visible, .fd-see:focus-visible, .fd-crumb:focus-visible { outline: var(--focus-ring-w) solid var(--border-focus); outline-offset: var(--space-half); }
.fp-drill-num { display: inline-flex; align-items: center; padding: var(--space-0); border: var(--space-0); background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: var(--space-1); text-decoration-color: var(--border-strong); }
.fp-drill-num:hover { color: var(--text-link); text-decoration-color: currentColor; }
/* phone: a full-height sheet, and each row a small card */
@media (max-width: 760px) {
  .fd.is-table { inline-size: 100vw; }
  .fd-xt { display: none; }
  .fd-x { min-inline-size: var(--control-touch); }
  .fd-crumb, .fd-ins, .fd-see, .fd-chip { min-block-size: var(--control-touch); }
  .fd-tw { border: var(--space-0); border-radius: var(--space-0); overflow: visible; }
  .fd-t thead { display: none; }
  .fd-t, .fd-t tbody, .fd-t tr, .fd-t td { display: block; inline-size: 100%; box-sizing: border-box; }
  .fd-t tr { padding: var(--space-3) var(--space-0); border-block-end: var(--border-w) solid var(--border-subtle); }
  .fd-t td { display: flex; gap: var(--space-2); padding: var(--space-half) var(--space-0); border: var(--space-0); max-inline-size: none; }
  .fd-t td:first-child { max-inline-size: none; }
  .fd-t td:not(:first-child)::before { content: attr(data-l); flex: none; min-inline-size: var(--space-16); color: var(--text-secondary); font-size: var(--text-meta-size); }
  .fd-t td:empty { display: none; }
}
/* Deals board: the column, lane and Lost counts and the column's value are buttons that open their deals */
.pb-dn { display: inline-flex; align-items: center; padding: var(--space-0) var(--space-2); border: var(--border-w) solid transparent; border-radius: var(--radius-full); background: var(--surface-page);
  color: var(--status-neutral-text); font: inherit; font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; cursor: pointer; }
.pb-lane-h .pb-dn { background: var(--surface-subtle); color: var(--text-secondary); }
.pb-dn:hover, .pb-dv:hover { border-color: var(--border-strong); color: var(--text-link); }
.pb-dv { display: inline-flex; align-items: center; padding: var(--space-0); border: var(--border-w) solid transparent; background: transparent; color: var(--text-secondary); font: inherit;
  font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); cursor: pointer; text-align: start; }
.pb-fc-see { margin: var(--space-0); padding: var(--space-0) var(--space-4); }
/* Properties: the inventory tiles are buttons that open their properties */
.pro-health > button { background: var(--surface-page); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column;
  align-items: flex-start; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.pro-health > button:hover { border-color: var(--border-strong); }
.pro-health > button.warn { border-color: var(--warning-mark); background: var(--warning-bg); }
.pro-health > button.bad { border-color: var(--danger-border); background: var(--danger-bg); }
button.gr-kpi, button.pro-kpi { font: inherit; color: inherit; text-align: start; cursor: pointer; }
button.gr-kpi:hover, button.pro-kpi:hover { border-color: var(--border-strong); }