/* Shared screen parts (see kit.js). Same tokens and scales as style.css:
   spacing 2 4 6 8 12 16 24 32, type 11 12 13 14 16 18 24. */

/* ---- Clickable things look clickable ------------------------------------- */
[data-cmd], button, summary, label[for], .th-sort { cursor: pointer; }
.is-clickable:hover { background: var(--panel-2); }

/* A plain label is never boxed; a box means you can press it. */
.tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: transparent;
  color: var(--text-2); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  white-space: nowrap;
}
.chip:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }

/* ---- The row under a panel title: filters left, a mode pair at the right end -- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 32px; padding: 4px 8px;
  border-bottom: 1px solid var(--rule);
}
.toolbar-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.toolbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* Segmented: a mode pair, a range set, a small set of views. */
.seg { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--rule-strong); }
.seg-item {
  display: flex; align-items: center; padding: 0 8px;
  border: 0; background: transparent;
  color: var(--dim); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap;
}
.seg-item + .seg-item { border-left: 1px solid var(--rule); }
.seg-item:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }
.seg-item.is-active { color: var(--ink); background: var(--text-2); }

/* ---- Panel title bar tools (right): count and CSV --------------------------- */
.panel-tools { display: inline-flex; align-items: center; gap: 8px; }
.tools-count { color: var(--dim); font-size: 11px; letter-spacing: .04em; }
.panel-tools .chip { height: 18px; }

/* "More rows": bottom-left under the table. */
.table-more { display: flex; justify-content: flex-start; padding: 8px; }

/* ---- Tables: labels hug their content, numbers right-aligned ---------------- */
.dt { width: auto; max-width: 960px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th, .dt td { height: var(--row-h); padding: 0 12px; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--rule); }
.dt th { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.dt .num { text-align: right; }
.dt tbody tr[data-cmd]:hover td, .dt tbody tr[data-cmd]:focus-visible td { background: var(--panel-2); }
.dt .th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.dt .th-sort:hover, .dt .th-sort.is-sorted { color: var(--text); }
.dt th.num .th-sort { flex-direction: row-reverse; }
.sort-arrow { display: inline-block; width: 8px; font-size: 8px; }

/* A name that truncates before any column is dropped. */
.cell-name { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }

/* A capped table plus a side panel, instead of a wide gap between label and numbers. */
.with-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1280px) {
  .with-side { grid-template-columns: minmax(0, 960px) minmax(280px, 1fr); align-items: start; }
}

/* ---- Strips that scroll sideways fade at the edge that has more ------------- */
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.scroll-x.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }
.scroll-x.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

@media (max-width: 639px) {
  .cell-name { max-width: 16ch; }
  .dt th, .dt td { padding: 0 8px; }
  .toolbar { flex-wrap: wrap; }
}