/* CLaiMB Directory — a simpler Hub, with Crunchbase Discover as the reference:
   a thin top bar, one search, grouped filters, a dense table, flat surfaces.
   System fonts and inline SVG icons only, so nothing fetched from elsewhere can
   change the layout. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eef1f5;
  --line: #e2e6ec;
  --line-strong: #cdd4de;
  --text: #1b2230;
  /* Secondary and tertiary text, dark enough to read: 8.7:1 and 6.3:1 on white (WCAG asks 4.5:1). */
  --muted: #434c5a;
  --faint: #586170;
  --accent: #1f5fe0;
  --accent-hover: #1a50c0;
  --accent-weak: #e9f0fe;
  --accent-ink: #ffffff;
  --good: #137a4b;
  --good-weak: #e5f4ec;
  --warn: #8a5a00;
  --warn-weak: #fdf2dd;
  --bad: #b42318;
  --bad-weak: #fdecea;
  --chart-1: #2a78d6; /* reference palette slot 1, validated on #ffffff */
  --chart-track: #e7edf6;
  --shadow: 0 8px 24px rgb(20 28 40 / 0.12), 0 1px 3px rgb(20 28 40 / 0.08);
  --radius: 6px;
  --maxw: 1440px;
  --gutter: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111418;
    --surface: #171b21;
    --surface-2: #1d222a;
    --surface-3: #242a33;
    --line: #2a313b;
    --line-strong: #3a4351;
    --text: #e8ecf2;
    --muted: #b8c0cc;
    --faint: #9aa3b0;
    --accent: #7aa7ff;
    --accent-hover: #9dbdff;
    --accent-weak: #1b2a45;
    --accent-ink: #0d1422;
    --good: #62d19c;
    --good-weak: #13291f;
    --warn: #e6b35c;
    --warn-weak: #2d2415;
    --bad: #ff8a80;
    --bad-weak: #3a1a18;
    --chart-1: #3987e5; /* slot 1, dark step, validated on #171b21 */
    --chart-track: #243044;
    --shadow: 0 8px 24px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111418;
  --surface: #171b21;
  --surface-2: #1d222a;
  --surface-3: #242a33;
  --line: #2a313b;
  --line-strong: #3a4351;
  --text: #e8ecf2;
  --muted: #b8c0cc;
  --faint: #9aa3b0;
  --accent: #7aa7ff;
  --accent-hover: #9dbdff;
  --accent-weak: #1b2a45;
  --accent-ink: #0d1422;
  --good: #62d19c;
  --good-weak: #13291f;
  --warn: #e6b35c;
  --warn-weak: #2d2415;
  --bad: #ff8a80;
  --bad-weak: #3a1a18;
  --chart-1: #3987e5;
  --chart-track: #243044;
  --shadow: 0 8px 24px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.4);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
p {
  margin: 0 0 10px;
}
.icon {
  flex: none;
  display: inline-block;
  vertical-align: -0.15em;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.skip:focus {
  left: 8px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12.5px;
}
.spacer {
  flex: 1 1 auto;
}
.pad {
  padding: 8px 12px;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 56px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
}
.brand-name span {
  font-weight: 400;
  color: var(--muted);
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.nav-item[aria-current="page"],
.nav-item.is-active {
  color: var(--accent);
}
.nav-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--surface-2);
}
@media (max-width: 760px) {
  :root {
    --gutter: 16px;
  }
  .topbar-inner {
    gap: 8px;
  }
  .nav-wide {
    display: none;
  }
}
@media (max-width: 380px) {
  .brand-name span {
    display: none;
  }
}

/* -------------------------------------------------------------------- page */

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gutter) 64px;
  outline: none;
}
.page-head {
  margin: 8px 0 18px;
}
.page-head h1 {
  font-size: 24px;
  margin-bottom: 4px;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.crumbs a {
  color: var(--muted);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  background: var(--accent-hover);
  text-decoration: none;
}
.btn.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn.ghost:hover {
  background: var(--surface-2);
}
.btn.small {
  height: 32px;
  padding: 0 11px;
  font-size: 13px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
}
.text-link:hover {
  text-decoration: underline;
}
.inline-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
select,
input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
textarea {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}
textarea {
  height: auto;
  padding: 8px 9px;
  resize: vertical;
}

/* ---------------------------------------------------------- search builder */

.builder {
  max-width: 660px;
  margin: 10px auto 22px;
}
.builder-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.builder-title {
  font-weight: 600;
  color: var(--muted);
}
.builder-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 6px 0 14px;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--faint);
  box-shadow: 0 1px 2px rgb(20 28 40 / 0.05);
}
.builder-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.builder-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
}
.builder-go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.builder-go:hover {
  background: var(--accent-hover);
}
.builder-note {
  margin: 10px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
/* Three suggestions per tab, on one line. */
.presets {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.preset {
  white-space: nowrap;
}
.preset {
  padding: 6px 11px;
  border-radius: 5px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}
.preset:hover {
  text-decoration: none;
  filter: brightness(0.97);
}
.preset.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ------------------------------------------------------------ entity tabs */

/* The tabs share the row in equal boxes, drawn like the rest of the page:
   white, a 1px grey border, a 6px radius. The selected tab is marked by a
   thin accent bar along its top, a tinted fill and bold text, and is a little
   larger. Where the row is too narrow (phones) each keeps its natural width
   and the row scrolls sideways. The padding, offset by the negative margin, is
   room for the larger tab inside the scroller, so it is not clipped.

   With its filters open, the selected tab becomes a folder tab: it grows down
   to the panel below, in the same fill, and its border continues around the
   panel. The tab row overlaps the panel's top border by 1px, and the tab's
   background (with a transparent bottom border) covers it where they join. */
.entity-block {
  margin-top: 4px;
}
.entity-row {
  position: relative;
  z-index: 1;
  margin: 0 -8px;
}
.entity-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 8px;
  padding: 4px 8px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.entity-tabs::-webkit-scrollbar {
  display: none;
}
.entity-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.entity-tabs a:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.entity-tabs a .icon {
  color: var(--muted);
}
.entity-tabs a.is-active {
  position: relative;
  z-index: 1;
  background: var(--surface-2);
  font-weight: 700;
  /* The accent bar, inside the border so the box keeps its size. */
  box-shadow: inset 0 3px 0 var(--accent);
  transform: scale(1.03);
}
.entity-tabs a.is-active .icon {
  color: var(--accent);
}
.tab-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.entity-tabs .tile-count {
  margin-left: 2px;
}

/* Open: the selected tab reaches the panel (the others stop 6px above it). */
.entity-block.is-open .entity-row {
  margin-bottom: -1px;
}
.entity-block.is-open .entity-tabs {
  padding-bottom: 0;
}
.entity-block.is-open .entity-tabs a {
  margin-bottom: 7px;
}
.entity-block.is-open .entity-tabs a.is-active {
  margin-bottom: 0;
  /* The extra 7px of height goes below the label, so it lines up with the others. */
  padding-bottom: 13px;
  border-bottom-color: transparent;
  border-radius: 6px 6px 0 0;
  transform: none;
}
.entity-block .filter-area {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-2);
}
.entity-block[data-edge="first"] .filter-area {
  border-top-left-radius: 0;
}
.entity-block[data-edge="last"] .filter-area {
  border-top-right-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .entity-tabs a {
    transition: none;
  }
}

/* ----------------------------------------------------------------- filters */

.filter-area {
  padding: 14px 0 6px;
}
/* Even rows, centred: filterTiles sets --cols (at most 6) and --cols-mid (at
   most 4) so 8 filters sit 4 + 4 rather than 6 + 2. Tiles stop at 240px wide,
   so a short set stays in the middle instead of stretching. */
.tiles {
  --cols: 4;
  --cols-mid: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 8px;
  max-width: calc(var(--cols) * 240px + (var(--cols) - 1) * 8px);
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .tiles {
    grid-template-columns: repeat(var(--cols-mid), minmax(0, 1fr));
    max-width: calc(var(--cols-mid) * 240px + (var(--cols-mid) - 1) * 8px);
  }
}
.tile {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tile:hover {
  background: var(--surface-2);
}
.tile.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.tile-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
.tile-plus {
  color: var(--accent);
}
@media (max-width: 640px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 6px;
  }
  .tile {
    height: 40px;
    padding: 0 9px;
    gap: 6px;
    font-size: 13px;
  }
  .tile-plus {
    display: none;
  }
  /* One sideways row of presets, as the reference shows when filters are collapsed. */
  .presets {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }
  .presets::-webkit-scrollbar {
    display: none;
  }
  .preset {
    flex: none;
    white-space: nowrap;
  }
  .builder {
    margin-top: 4px;
  }
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
}

/* --------------------------------------------------------------- popovers */

.popover {
  position: absolute;
  z-index: 120;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.menu {
  display: grid;
  gap: 1px;
}
.menu-title {
  margin: 4px 8px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.menu-item:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.check-list {
  display: grid;
  max-height: 300px;
  overflow: auto;
  margin: 4px 0;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.check-row:hover {
  background: var(--surface-2);
}
.check-row input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}
.check-label {
  flex: 1 1 auto;
  min-width: 0;
}
.check-group {
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--faint);
}
.check-count {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.filter-panel {
  display: grid;
  gap: 8px;
  padding: 4px;
}
.filter-search {
  width: 100%;
}
.filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.filter-actions:only-child,
.filter-panel > .filter-actions:last-child {
  justify-content: flex-end;
}
.filter-panel .filter-actions .text-link + .btn {
  margin-left: auto;
}
.saved-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.saved-row .menu-item {
  flex: 1 1 auto;
  min-width: 0;
}
.saved-row .icon-btn {
  width: 28px;
  height: 28px;
  border: 0;
}

/* ------------------------------------------------------------------- chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip.is-good {
  background: var(--good-weak);
  border-color: transparent;
  color: var(--good);
}
.chip.is-warn {
  background: var(--warn-weak);
  border-color: transparent;
  color: var(--warn);
}
.chip.is-removable {
  cursor: pointer;
  background: var(--accent-weak);
  border-color: transparent;
  color: var(--text);
}
.chip.is-removable:hover {
  filter: brightness(0.96);
}
.chip-key {
  color: var(--muted);
}
.kind {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
  letter-spacing: 0;
}
.kind.is-observed {
  background: var(--good-weak);
  color: var(--good);
}
.kind.is-warn {
  background: var(--warn-weak);
  color: var(--warn);
}
.count-badge {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  vertical-align: 2px;
}

/* ------------------------------------------------------------ results bar */

.results-bar {
  margin: 4px 0 10px;
}
.results-bar.bottom {
  margin: 12px 0 0;
}
.results-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 40px;
}
.pager {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.pager-btn:hover:not(:disabled) {
  background: var(--accent-weak);
}
.pager-btn:disabled {
  color: var(--faint);
  cursor: default;
}
.pager-range {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pager-total {
  color: var(--text);
  font-weight: 500;
}
.selection-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-weak);
}
.selection-bar[hidden] {
  display: none;
}

/* --------------------------------------------------------------- the grid */

.grid-frame {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.grid th,
.grid td {
  min-width: var(--w, 120px);
  width: var(--w, auto);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--w, 360px);
}
.grid td.wrap,
.grid th.wrap {
  white-space: normal;
}
.grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 40px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
}
.grid tbody tr:last-child td,
.grid tbody tr:last-child th {
  border-bottom: 0;
}
.grid tbody tr {
  height: 56px;
}
.grid tbody tr:hover td,
.grid tbody tr:hover th {
  background: var(--surface-2);
}
/* A row that opens its item (ui/table.js linkRow): the name lights up as the
   row is hovered, so it is clear what a click will open. */
.grid tbody tr.is-linked {
  cursor: pointer;
}
.grid tbody tr.is-linked:hover .row-title {
  color: var(--accent);
}
.grid tbody tr.is-selected td {
  background: var(--accent-weak);
}
.grid .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.grid .sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.grid thead .sticky {
  z-index: 3;
  background: var(--surface-2);
}
.grid .col-check {
  --w: 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 0 0 0 14px;
}
.grid .col-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.has-check .grid .col-name.sticky {
  left: 44px;
}
.grid .col-name.sticky {
  box-shadow: 1px 0 0 var(--line);
}
.th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.num .th {
  justify-content: flex-end;
}
.th-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-menu {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.th-menu:hover {
  background: var(--surface-3);
  color: var(--text);
}
.name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.name-text {
  display: grid;
  min-width: 0;
}
.row-title {
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-title:hover {
  color: var(--accent);
}
.row-sub {
  display: block;
  color: var(--faint);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-link {
  color: var(--text);
}
.cell-link:hover {
  color: var(--accent);
}
.score-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.score-cell .row-sub {
  display: inline;
}
.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.clamp-2 {
  -webkit-line-clamp: 2;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}
.grid td .clamp-2,
.grid td .clamp-3 {
  line-height: 1.45;
}
@media (max-width: 640px) {
  .grid th.col-name,
  .grid td.col-name {
    min-width: min(var(--w, 200px), 44vw);
    max-width: min(var(--w, 200px), 44vw);
  }
  .grid .col-name .mark {
    display: none;
  }
}

/* ----------------------------------------------------------- marks, score */

.mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.mark.lg {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  font-size: 22px;
}
.score-pill {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 24px;
  padding: 0 7px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  color: var(--muted);
}
.score-pill.is-high {
  background: var(--good-weak);
  color: var(--good);
}
.score-pill.is-mid {
  background: var(--warn-weak);
  color: var(--warn);
}

/* ------------------------------------------------------------------ states */

.loading {
  display: grid;
  gap: 10px;
  padding: 8px 0;
}
.shimmer {
  display: block;
  height: 52px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
  }
}
.state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
}
.state h2 {
  color: var(--text);
  font-size: 17px;
}
.note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
}
.note ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
}
.notice.is-warn {
  background: var(--warn-weak);
  color: var(--warn);
}
.notice p {
  margin: 0;
  color: var(--text);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  transform: translate(-50%, 20px);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- profiles */

.profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 14px;
}
.eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.profile-id h1 {
  font-size: 26px;
  overflow-wrap: anywhere;
}
.profile-by {
  margin: 6px 0 0;
}
.profile-desc {
  margin: 8px 0 0;
  max-width: 78ch;
  color: var(--muted);
  font-size: 14.5px;
}
.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .profile-head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
  }
  .profile-head .mark.lg {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }
  .profile-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .profile-id h1 {
    font-size: 22px;
  }
}
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
}
/* A product's highlights, centred in each cell. Cells that open part of the
   page (research score, results, similar products) are buttons. */
.highlight {
  display: grid;
  gap: 2px;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 -1px -1px 0;
}
.highlight.is-action {
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.highlight.is-action:hover {
  background: var(--surface-2);
}
/* One size per role across the strip: label 12.5px, value 17px, hint 12.5px. */
.highlight-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Regular weight: the figures read as values, not headings. */
.highlight-value {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.highlight-value strong {
  font-weight: inherit;
}
/* Words and figures share the size; the "/100" after the score is the hint size. */
.highlight-value small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.highlight-value .score-pill {
  height: 26px;
  font-size: 17px;
  font-weight: 500;
}
.highlight-hint {
  font-size: 12.5px;
  color: var(--muted);
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-margin-top: 70px;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs button {
  flex: none;
  padding: 11px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover {
  color: var(--text);
}
.tabs button.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
/* Tabs that share the row equally, labels centred (product sections). */
.tabs.is-even {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
}
.tabs.is-even button {
  text-align: center;
}
/* Product sections: a light rule above each heading separates it from the one before. */
.product-panel > .subhead {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
@media (max-width: 1000px) {
  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.profile-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.panel {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  outline: none;
  animation: panel-in 0.16s ease-out both;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    animation: none;
  }
}
.panel > p,
.evidenced p {
  max-width: 78ch;
}
/* Product tabs use the panel's full width: less white space, less scrolling. */
.product-panel > p,
.product-panel .evidenced p {
  max-width: none;
}
.block {
  margin-top: 22px;
}
.block-title {
  font-size: 17px;
  margin-bottom: 12px;
}
.subhead {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 700;
}
.lead {
  font-size: 15.5px;
  font-weight: 500;
}
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
@media (max-width: 700px) {
  .two-col {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel {
    padding: 16px;
  }
}
.gap-note {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
}
.gap-note h3 {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.gap-note p {
  margin: 0;
}

/* lists */
.facts-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts-list > li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.facts-list > li > .icon {
  margin-top: 3px;
  color: var(--good);
}
.facts-list > li > div {
  min-width: 0;
}
/* Work still to do is not a confirmed fact: no green tick. */
.facts-list.is-pending > li > .icon {
  color: var(--faint);
}
.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.history {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.choice-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.choice-list a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* evidence */
.evidence {
  margin: 4px 0 2px;
}
.evidence > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.evidence > summary::-webkit-details-marker {
  display: none;
}
.evidence > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.12s;
}
.evidence[open] > summary::before {
  transform: rotate(90deg);
}
.evidence.is-conflict > summary {
  color: var(--warn);
}
.evidence figure {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 2px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.evidence blockquote {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}
.evidence figcaption {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.evidence-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--faint);
}
.stale {
  color: var(--warn);
}

/* workflow */
.steps {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 16px;
}
.steps > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 2px;
  border-left: 2px solid var(--line);
}
.step-no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.step-body h4 {
  font-size: 14px;
  margin: 5px 0 4px;
}
.step-body p {
  margin: 0 0 4px;
}
.step-edge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--faint);
  font-style: italic;
}

/* roadmap, changes, sources */
.roadmap-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.roadmap-item h4 {
  font-size: 14px;
  margin-bottom: 4px;
}
.roadmap-quote,
.pull-quote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
}
.pull-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--faint);
}
.roadmap-past {
  margin-top: 10px;
}
.roadmap-past > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
}
.change-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.change-list li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
}
.change-list time {
  color: var(--faint);
  font-size: 12.5px;
}
.source-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 10px;
}
.source-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.source-list li > div {
  display: grid;
  min-width: 0;
}
.source-list a {
  overflow-wrap: anywhere;
}
.source-kind {
  flex: none;
  margin-top: 1px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.source-kind.is-official {
  background: var(--good-weak);
  color: var(--good);
}
.outcome-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.outcome-list li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.outcome-top {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.outcome-list blockquote {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* correction form */
.correction {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.correction-form {
  display: grid;
  gap: 10px;
  max-width: 520px;
}
.correction-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.form-error {
  color: var(--bad);
  margin: 0;
}

/* ------------------------------------------------------------------- rail */

.profile-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.rail-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.rail-card > h2 {
  font-size: 14.5px;
  margin-bottom: 10px;
}
/* The research score table at the end of a product's Overview. */
.table-scroll {
  overflow-x: auto;
}
.score-table th[scope="row"] {
  color: var(--text);
  background: none;
  white-space: nowrap;
}
.score-table td:nth-child(3) {
  width: 120px;
}
.score-table .num {
  white-space: nowrap;
}
.score-table tfoot th,
.score-table tfoot td {
  border-bottom: 0;
  font-weight: 700;
}
meter {
  width: 100%;
  height: 6px;
  display: block;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: var(--chart-track);
}
meter::-webkit-meter-bar {
  background: var(--chart-track);
  border: 0;
  border-radius: 3px;
  height: 6px;
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  background: var(--chart-1);
  border-radius: 3px;
}
meter::-moz-meter-bar {
  background: var(--chart-1);
  border-radius: 3px;
}
.how {
  margin-top: 8px;
}
.how > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12.5px;
}
.fact-rows {
  display: grid;
  gap: 0;
  margin: 0;
}
.fact-row {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.fact-row:last-child {
  border-bottom: 0;
}
.fact-row dt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.fact-row dt .icon {
  margin-top: 2px;
  color: var(--faint);
}
.fact-row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.fact-row dd.is-empty {
  color: var(--faint);
  font-style: italic;
}

/* ------------------------------------------------------------------ charts */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.stat {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  min-width: 0;
}
/* Discover's headline figures, between the filters and the table: five across,
   then one row that scrolls sideways where five no longer fit. Placeholders
   keep the space while the figures load, so the table does not jump. */
.kpi-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 10px 0 12px;
}
.kpi-row .stat {
  min-height: 84px;
  padding: 12px 14px;
}
/* As the product strip: one size for every value, words or figures. */
.kpi-row .stat-value,
.kpi-row .stat-value.is-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  padding-top: 0;
}
.kpi-row .stat-hint {
  font-size: 12.5px;
  color: var(--muted);
}
.kpi-row .stat.is-loading {
  gap: 10px;
}
.kpi-row .stat.is-loading .shimmer {
  height: 12px;
  width: 60%;
}
.kpi-row .stat.is-loading .shimmer + .shimmer {
  height: 22px;
  width: 40%;
}
@media (max-width: 1000px) {
  .kpi-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kpi-row::-webkit-scrollbar {
    display: none;
  }
}
.stat-label {
  font-size: 12.5px;
  color: var(--muted);
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.stat-value.is-text {
  font-size: 17px;
  line-height: 1.3;
  padding-top: 3px;
}
.stat-hint {
  font-size: 12px;
  color: var(--faint);
}
.chart {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  min-width: 0;
}
.chart figcaption {
  margin-bottom: 12px;
}
.chart figcaption h3 {
  font-size: 14.5px;
  margin-bottom: 2px;
}
.chart figcaption p {
  margin: 0;
}
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 400px) {
  .chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.bar-row {
  display: grid;
  /* Fixed value and share columns, so every bar starts from the same baseline. */
  grid-template-columns: minmax(0, 1.25fr) minmax(40px, 1fr) 58px 48px;
  gap: 10px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.bar-row:hover {
  background: var(--surface-2);
}
.bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
a.bar-label:hover {
  color: var(--accent);
}
.bar-track {
  height: 10px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  display: block;
}
.bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0; /* rounded data end, square at the baseline */
  background: var(--chart-1);
}
.bar-row:hover .bar-fill {
  filter: brightness(1.12);
}
.bar-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bar-share {
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.range-chart {
  padding-bottom: 20px;
}
.range {
  position: relative;
  height: 110px;
  margin: 0 8px;
}
.range-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  height: 10px;
  border-radius: 5px;
  background: var(--chart-track);
}
.range-iqr {
  position: absolute;
  top: 50px;
  height: 10px;
  border-radius: 5px;
  background: var(--chart-1);
  opacity: 0.55;
}
.range-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
}
.range-dot {
  position: absolute;
  top: 46px;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--chart-1);
  border: 2px solid var(--surface); /* surface ring keeps overlapping dots apart */
}
.range-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}
.range-label strong {
  color: var(--text);
  font-size: 14px;
}
.range-mark.is-low .range-label {
  top: 70px;
}
.range-mark.is-start .range-label {
  transform: none;
  justify-items: start;
  left: -9px;
}
.range-mark.is-end .range-label {
  transform: translateX(-100%);
  justify-items: end;
  left: 9px;
}
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mini-table th,
.mini-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.mini-table th {
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-2);
}
.mini-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* insights */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.filter-row select {
  max-width: 220px;
}
.insight-group {
  margin-top: 26px;
}
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.group-head h2 {
  font-size: 18px;
}

/* compare */
.grid.compare th[scope="row"] {
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-2);
  vertical-align: top;
  --w: 170px;
}
.grid.compare td {
  --w: 260px;
  vertical-align: top;
}
.grid.compare tbody tr {
  height: auto;
}
.compare-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 3px;
}

/* ===================================================================== admin */

.text-good { color: var(--good); }
.text-warn { color: var(--warn); }
.text-bad { color: var(--bad); }
.block { display: block; }
.break { overflow-wrap: anywhere; word-break: break-word; }
.chip.is-bad { background: var(--bad-weak); border-color: transparent; color: var(--bad); }
.chip.is-muted { opacity: 0.7; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger:hover { background: var(--bad); filter: brightness(1.08); }
.notice.is-bad { background: var(--bad-weak); color: var(--bad); }
.form-error { margin: 0; color: var(--bad); font-weight: 500; }
.form-error[hidden] { display: none; }

/* While a change is saving, admin controls are locked so a second click cannot
   act on a page that is about to reload. */
html[data-busy] .admin-body button,
html[data-busy] .admin-body a.btn,
html[data-busy] .admin-body input[type="checkbox"],
html[data-busy] .dialog button {
  pointer-events: none;
  opacity: 0.55;
}
html[data-busy] {
  cursor: progress;
}
.saving {
  color: var(--warn);
  font-weight: 600;
  font-size: 13px;
}
.saving:empty {
  display: none;
}
/* Grid children default to min-width:auto, which lets a wide table push the
   page sideways; tables scroll inside their own frame instead. */
.admin-body > *,
.profile-main > *,
.profile-layout > * {
  min-width: 0;
}

/* frame */
.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.admin-head h1 { font-size: 24px; }
.admin-who { display: flex; align-items: center; gap: 8px; }
.admin-tabs { margin-bottom: 18px; }
.admin-body { display: grid; gap: 14px; min-width: 0; }
.admin-holder { min-height: 40px; }
.section-title { font-size: 16px; margin: 10px 0 2px; }
.admin-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-toolbar > p { margin: 0; max-width: 70ch; }
.admin-filters,
.inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-filters input[type="search"] { width: min(320px, 100%); }
.inline-form input { width: min(260px, 100%); }
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text); background: var(--surface-2); }
.seg button.is-active { background: var(--accent-weak); color: var(--accent); }

/* overview tiles */
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.admin-tile {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.admin-tile:hover { border-color: var(--accent); text-decoration: none; }
.admin-tile.is-attention { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }

/* sign-in */
.signin-wrap { display: grid; place-items: center; padding: 40px 0; }
.signin {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.signin h1 { font-size: 22px; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.field > span small { color: var(--faint); font-weight: 400; }
.field input,
.field select,
.field textarea { width: 100%; color: var(--text); }
.field textarea { font-size: 13px; }

/* dialogs */
.dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgb(10 14 20 / 0.45); }
.dialog-body { display: grid; gap: 12px; padding: 20px 22px; }
.dialog-body h2 { font-size: 17px; }
.dialog-body p { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* forms */
.admin-form { display: grid; gap: 14px; }
.admin-form fieldset {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  min-width: 0;
}
.admin-form legend { padding: 0 6px; font-weight: 700; font-size: 13px; }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.field.is-wide { grid-column: 1 / -1; }
.form-footer {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.form-actions { display: flex; align-items: center; gap: 14px; }
.stack { display: grid; gap: 8px; }
.stack-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rail-card > h2.spaced { margin-top: 16px; }

/* review */
.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.review-head h2 { font-size: 20px; margin-bottom: 4px; }
.reason-bar {
  position: sticky;
  top: 56px;
  z-index: 5;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-weak);
}
.decision-row { display: flex; flex-wrap: wrap; gap: 8px; }
.subhead.first { margin-top: 0; }
.minor { margin: 14px 0 6px; font-size: 13px; }
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px 16px;
  margin: 0 0 10px;
}
.kv.one { grid-template-columns: minmax(0, 1fr); }
.kv.one > div { display: flex; justify-content: space-between; gap: 10px; }
.kv dt { font-size: 12px; color: var(--muted); }
.kv dd { margin: 0; }
.claim-groups { display: grid; gap: 6px; margin-top: 10px; }
.claim-group { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.claim-group > summary { cursor: pointer; font-weight: 600; }
.claim-group ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.roadmap-rule {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.roadmap-rule p { margin: 0; }
.panel > select,
.panel > input,
.panel > button { margin: 0 8px 8px 0; }
.panel > input[type="url"],
.panel > input[type="text"] { width: min(360px, 100%); }
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card-list > li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.report p { margin: 6px 0; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.report-actions input { width: min(280px, 100%); }
.history-box > summary { cursor: pointer; font-weight: 600; }
.candidates { display: grid; gap: 6px; }
.candidate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.three-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.three-col .panel { display: grid; gap: 8px; align-content: start; }

/* pipeline & harvest */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.log {
  max-height: 360px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface-3);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.intake .bar-cell { width: 40%; min-width: 80px; }
.intake .bar-cell .bar-fill { height: 8px; }
.intake tr.is-weekend th { color: var(--muted); }
@media (max-width: 700px) {
  .roadmap-rule { grid-template-columns: minmax(0, 1fr); }
  .reason-bar { position: static; }
  .intake .bar-cell { display: none; }
}