/* SPDX-License-Identifier: MIT
 *
 * Copied from hire4real/static/css/components/table-column-picker.css (MIT, same author),
 * 2026-10-04, 130 lines. Colour tokens replaced per doctrine 8.
 *
 * Here it is the data table's column picker (SL_05C Part A).
 * Their class names, geometry, transitions and breakpoints are kept as they are; their header and
 * notes follow this one unchanged, except that a colour value a note quotes is elided as [colour]
 * (doctrine 8 reaches comments too).
 *
 * DIVERGES FROM hire4real/static/css/components/table-column-picker.css: keeps Stone Lane's own
 *   markup classes .data-table, .js-enabled - the hide primitive is one attribute rule, never an
 *   inline style, and with JavaScript off the picker is not drawn at all (SL_05C Part A).
 *
 * DIVERGES FROM hire4real/static/css/components/table-column-picker.css: keeps this site's focus
 *   ring on the picker's checkboxes - stonelane.css's :focus-visible, 2px solid at 2px - where
 *   theirs leaves the browser's default ring (measured 2026-10-06; tests/test_sl05f_kept.py).
 */
/* ---- SL_05F D16: their page's rules, as they reach this component, scoped to its root. ----
 * hire4real's page gives the picker four things its own sheet never states: Tailwind preflight's
 * line-height 1.5 (on html) and its form-control reset, typography.css's `p, li` rule, and
 * responsive.css's <=767px 44px floor on buttons. Copied from their built output.css (the
 * preflight rules are Tailwind CSS v3.4.19's, MIT, Copyright (c) Tailwind Labs, Inc.; this site's
 * own site.css is built without preflight), typography.css and responsive.css, each wrapped in
 * :where() so it keeps the specificity it has
 * on their page - the component's own rules below still win wherever they win there. Our page
 * base (17px / 1.6) and every other button on this site are untouched: nothing here reaches
 * outside .table-column-picker. Their `p, li` rule reads --font-size-base and
 * --line-height-relaxed, tokens this site does not define; it is copied with the values those
 * resolve to on their page (15px, 1.75). */
:where(.table-column-picker) { line-height: var(--line-height-normal, 1.5); }
:where(.table-column-picker), :where(.table-column-picker) *,
:where(.table-column-picker) ::before, :where(.table-column-picker) ::after {
  border-width: 0;
  border-style: solid;
}
:where(.table-column-picker) :where(p, li) {
  font-size: 15px;
  line-height: 1.75;
}
:where(.table-column-picker) :where(button, input) {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:where(.table-column-picker) button {
  text-transform: none;
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
:where(.table-column-picker) :disabled { cursor: default; }
:where(.table-column-picker) svg { display: block; vertical-align: middle; }
@media (max-width: 767px) {
  :where(.table-column-picker) button { min-height: 44px; min-width: 44px; }
}

/* NIGHT_85F T2 — column picker popover.
   Dark-default only. Uses design tokens (--color-*) so the NIGHT_85C theme-light
   machinery inverts them for light mode; there are NO [data-theme="light"] selectors
   here. output.css is untouched (this is a new additive sheet linked after it). */

/* The hide primitive. `!important` so a picker-hidden column stays hidden regardless
   of the counts/ratios view-toggle, which mutates inline style.display on the same
   cells. The picker only ever FORCE-HIDES; it never force-shows. */
[data-col-visible="false"] {
  display: none !important;
}

.table-column-picker {
  position: relative;
  display: inline-flex;
  margin-bottom: 12px;
}

.table-column-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2);
  color: var(--ink-2);
  padding: 7px 12px;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.table-column-picker__btn:hover {
  color: var(--ink);
  border-color: var(--line);
}
.table-column-picker__btn:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 2px;
}

.table-column-picker__popover {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  min-width: 220px;
  max-height: 340px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-2);
  box-shadow: 0 12px 32px var(--shadow-float);
}
.table-column-picker__popover[hidden] {
  display: none;
}

.table-column-picker__title {
  margin: 0 0 8px;
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

.table-column-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.table-column-picker__row {
  margin: 0;
}
.table-column-picker__row label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-size-sm, 13px);
  color: var(--ink-2);
  cursor: pointer;
}
.table-column-picker__row label:hover {
  background: var(--surface);
  color: var(--ink);
}
.table-column-picker__row input {
  accent-color: var(--earth);
  cursor: pointer;
}

/* Required (chart) columns: shown but not toggleable. */
.table-column-picker__row--required {
  opacity: 0.6;
}
.table-column-picker__row--required label,
.table-column-picker__row--required input {
  cursor: default;
}

/* The way back. A preference with no visible exit is a trap: someone who hid
   five columns three weeks ago has no memory of doing it. */
.table-prefs__reset {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.table-prefs__reset:hover {
  background: var(--surface);
  color: var(--ink);
}
.table-prefs__reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--shadow-float);
}
@media (max-width: 768px) {
  /* 44px touch target per the mobile ruling. */
  .table-prefs__reset { min-height: 44px; padding: 0 14px; }
}

/* ---- SL_05F D16: the 44px floor is a hit area, on Stone Lane only. ----
 * A pseudo-element, never padding, so the visible box lock-step compares is the sibling's. The
 * button and the reset are single controls: each gets a 44x44 area centred on it (wider controls
 * keep their width); they sit 8px apart, so the areas never meet. The rows need nothing: each
 * label is its full row, and the rows tile the list at 32.75px. */
.table-column-picker__btn,
.table-prefs__reset {
  position: relative;
}
.table-column-picker__btn::after,
.table-prefs__reset::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- Stone Lane's own markup: the rules its classes need, declared in the header above. ---- */
[data-col-visible="false"] { display: none !important; }
/* A series column is two cells - its figure, then its change - and the change cell is a bare
   `td.trend` (SL_05-18 reads it so), so it follows its figure cell out of sight. */
.data-table td[data-col-visible="false"] + td.trend { display: none !important; }
html:not(.js-enabled) .table-column-picker { display: none; }