/* The global Sessions view: a faceted filter rail beside a wide session table.
   The token card (.tok-cell/.tok-tip) defined here is reused by the projects
   index; the heatmap tooltip (overview.css) shares the card's inner grid. */

/* ---- Viz swatches (categorical ramp, matches VizColor order) ---- */
.swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; }
.viz-0 { background: var(--viz-1, #c6a8f2); } .viz-1 { background: #88cfce; }
.viz-2 { background: #f0bf92; } .viz-3 { background: #ec98b0; }
.viz-4 { background: #a6d29e; } .viz-5 { background: #95c0ef; }
.viz-6 { background: #ddc885; } .viz-7 { background: #a98ad4; }

/* ---- Sessions: faceted layout ---- */
/* The global Sessions view runs edge to edge: a faceted rail plus a wide table
   put the whole viewport to use, unlike the reading-width pages. The rail column
   sizes to its widest label (no more clipped project names) rather than a fixed
   width, and the table takes the rest. */
main:has(.sessions-layout) { max-width: none; }
.sessions-layout { display: grid; grid-template-columns: minmax(196px, max-content) minmax(0, 1fr); gap: var(--sp-xl); align-items: start; }
.facets { display: flex; flex-direction: column; gap: var(--sp-lg); position: sticky; top: var(--sp-md); }
.facet-title { margin-bottom: var(--sp-sm); }
.facets .opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.facets .opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-sm);
  color: var(--subtext); font-size: 0.8125rem;
  transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.facets .opt:hover { background: var(--surface-2); text-decoration: none; }
.facets .opt.active { background: var(--surface-3); color: var(--text); }
/* The rail column sizes to the widest label, so labels stay on one line and show
   in full rather than truncating with an ellipsis. */
.facets .opt-label { white-space: nowrap; }
.facets .opt-count { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.facets .opt.active .opt-count { color: var(--lilac); }
.sessions-main { min-width: 0; }
.active-filters { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-md); }
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 3px 8px; font-size: 0.75rem; color: var(--subtext);
}
.fchip:hover { text-decoration: none; border-color: var(--lilac); }
.fchip .fchip-k { color: var(--muted); }
.fchip .fchip-x { color: var(--faint); }
.active-filters .clear { margin-left: 4px; }
.proj-link { color: var(--subtext); }
.proj-link:hover { color: var(--lilac); }

/* The Sessions table fills the wide page: every column sizes to its content and
   never wraps, with the Project column (col-grow) absorbing the slack so the row
   stays flush rather than leaving a ragged right edge. */
table.sessions th, table.sessions td { white-space: nowrap; }
table.sessions .col-grow { width: 100%; }
table.sessions td.tags .tag + .tag { margin-left: 4px; }

/* Tokens column: the figure carries a hover/focus card that breaks it down by
   class and cost, reusing the heatmap tooltip's inner styles. The cell lifts its
   stacking context on hover so the card paints over the rows below. */
table.sessions td.tokens { overflow: visible; }
.tok-cell { position: relative; display: inline-block; }
.tok-cell:hover, .tok-cell:focus-within { z-index: var(--z-overlay); }
.tok-total { border-bottom: 1px dotted var(--border-strong); }
.tok-tip {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 170px; text-align: left; z-index: var(--z-overlay);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-sm); box-shadow: var(--shadow-overlay);
}
.tok-cell:hover .tok-tip, .tok-cell:focus-within .tok-tip { display: block; }
/* The card's rows are spans here (the heatmap builds them as divs), so make them
   stack. */
.tok-tip .tt-total, .tok-tip .tt-cost { display: block; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .facets { position: static; }
}
@media (max-width: 860px) {
  .sessions-layout { grid-template-columns: 1fr; gap: var(--sp-lg); }
}