/* RP & Wanted Points (CIT Tools redesign, 3 Nov 2026).
   Only the layout and the parts this tool has on its own. Colours, fonts, sizes, borders and corners
   come from the design's tokens and components in /CITtools/assets/ui/ui.css. */

/* Hidden means hidden, even on parts a component shows as flex or grid. */
[hidden] { display: none !important; }

/* ---- Search and the four filters. */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.controls .search-wrap { flex: 1 1 18rem; min-width: 0; margin: 0; }
.controls .search-wrap .input { width: 100%; }
.controls .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }

/* ---- The table. */
.table-panel .count-line { margin: 0; }
.crime-table { width: 100%; }
.crime-table caption, .ref table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.crime-table th, .crime-table td { vertical-align: middle; }
/* The script gives each table row the class "row" (check scripts look for tr.row). In ui.css .row is the list row
   component, so it is put back to a plain table row here. */
.crime-table tr.row {
  display: table-row;
  margin: 0;
  padding: 0;
  gap: 0;
  min-height: 0;
  grid-template-columns: none;
  align-items: normal;
}
/* The column name is a real button, so it can be reached with the keyboard and the whole header cell is the
   tap target. The click is still handled on the th. The header is not sticky: the table scrolls inside its
   own box on phones, and a sticky header there would land on the rows. */
.crime-table thead th.sortable { padding: 0; cursor: pointer; }
.crime-table th .sort-btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: start;
  cursor: pointer;
}
.crime-table thead th.num .sort-btn { text-align: end; }
.crime-table th .sort-btn:focus-visible { outline-offset: -3px; }
.sort-btn .keep { white-space: nowrap; }
.crime-table thead th .arrow {
  display: inline-block;
  min-width: 1ch;
  margin-inline-start: .35em;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: .7;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}
.crime-table thead th.sorted .arrow { color: var(--text); }

.crime-table .col-name { min-width: 13rem; font-weight: 700; }
.crime-table .col-rp, .crime-table .col-wp { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crime-table .col-more { width: 1%; white-space: nowrap; text-align: end; }
/* ??? is a number nobody has written down yet. It must not look like a zero, and not like an error either. */
.crime-table .unknown { color: var(--warn); font-weight: 700; }
.crime-table .sub {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: normal;
}

/* The Notes button in each row, and Show all notes. */
.note-btn { white-space: nowrap; }
.note-btn .label {
  display: inline;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.note-btn .caret { display: inline-block; margin-inline-start: .4em; font-size: var(--fs-xs); transition: transform 120ms ease; }
.note-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.note-btn[aria-expanded="true"], .notes-all.active {
  border-color: var(--line-strong);
  background: var(--surface-3);
  color: var(--text);
}
/* An open note: its own band under the row, with the text at reading width. */
.crime-table tr.note-row > td { padding: 0 var(--sp-4) var(--sp-4); background: var(--surface-2); }
.crime-table tr.note-row p {
  max-width: var(--maxw-text);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
}
.table-panel .no-rows { margin: var(--sp-4); }
.table-panel .sources { margin: var(--sp-4); }

/* ---- What Wanted Points do to you, and Criminal levels: two halves side by side. */
.ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref { min-width: 0; padding: var(--sp-4) var(--sp-5); }
.ref + .ref { border-inline-start: var(--bw) solid var(--line); }
.ref h3 { margin: 0 0 var(--sp-3); }
.ref ul { margin: 0; padding-inline-start: 1.25em; }
.ref li + li { margin-top: var(--sp-2); }
.ref p { margin: var(--sp-3) 0 0; max-width: var(--maxw-text); }
.ref b { color: var(--text); }
.ref .table { width: 100%; }
.ref .ref-table td:first-child { font-weight: 700; white-space: nowrap; }
.ref .ref-table td.num { font-variant-numeric: tabular-nums; }

/* ---- Narrow windows and phones. */
@media (max-width: 760px) {
  .ref-grid { grid-template-columns: minmax(0, 1fr); }
  .ref { padding: var(--sp-4); }
  .ref + .ref { border-inline-start: 0; border-top: var(--bw) solid var(--line); }
  /* The table has to fit a phone, not just scroll inside its box: a table wider than the box still widens
     the page in Chromium. */
  .crime-table th, .crime-table td { padding: var(--sp-3) var(--sp-2); }
  .crime-table th .sort-btn { padding: var(--sp-3) var(--sp-2); }
  .crime-table .col-name { min-width: 0; }
  /* ui.css keeps number cells on one line (.table td.num); here they may wrap, so the Notes column fits. */
  .crime-table td.col-rp, .crime-table td.col-wp, .crime-table th.num { white-space: normal; }
  .crime-table td.num .sub { overflow-wrap: anywhere; }
  .crime-table .col-more { padding-inline: 2px var(--sp-2); }
  /* On a phone the button keeps its word and stays tall enough to tap; the small arrow goes. */
  .crime-table .note-btn { padding-inline: var(--sp-2); }
  .crime-table .note-btn .caret { display: none; }
  .crime-table tr.note-row > td { padding: 0 var(--sp-2) var(--sp-3); }
}
@media (max-width: 560px) {
  /* The search box gets the whole first line, the four filters share the second. */
  .controls .chips { flex: 1 1 100%; gap: var(--sp-1); }
  .controls .chip { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  /* The smallest phones: a size smaller and tighter cells, so all four columns, Notes too, fit the screen. */
  .crime-table, .crime-table thead th { font-size: var(--fs-sm); }
  .crime-table th, .crime-table td { padding: var(--sp-2) 4px; }
  .crime-table th .sort-btn { padding: var(--sp-2) 4px; }
  .crime-table .arrow { margin-inline-start: 2px; }
  .crime-table .note-btn { padding-inline: 4px; }
  /* The sort arrow may drop under its column name. */
  .crime-table th .sort-btn .keep { white-space: normal; }
  /* Long names break with a hyphen (Prepa-ration) instead of pushing Notes off the screen. */
  .crime-table .col-name { hyphens: auto; -webkit-hyphens: auto; }
  .crime-table td.num .sub { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .note-btn .caret { transition: none; }
}