/* Influence Map — barlow-orange preset.
   Orange budget: the brand dot, and the selected person's ring. Nothing else. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* surface */
  --bg:             #ffffff;
  --surface:        #f7f7f7;
  --surface-raised: #f0f0f0;
  --border:         #e5e5e5;

  /* text */
  --text:           #1a1a1a;
  --body:           #4a4a4a;
  --muted:          #6b6b6b;
  --muted-strong:   #707070;
  --decorative:     #999999;

  /* orange — very sparing */
  --accent:         #ff6600;
  --accent-deep:    #b34700;
  --accent-light:   #fff1e8;

  /* slate secondary */
  --secondary:      #647B8A;
  --secondary-deep: #49606C;

  --success: #2a9d5c;
  --danger:  #c44536;

  --chart-gray-lo: #d4d4d4;
  --chart-gray-hi: #4a4a4a;

  --radius-card: 8px;
  --radius-btn: 6px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);

  --header-h: 56px;
  --panel-w: 366px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 15px/1.6 'Barlow', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3 { color: var(--text); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.mono { font-family: 'IBM Plex Mono', 'SF Mono', monospace; }

button { font-family: inherit; cursor: pointer; }
a { color: var(--secondary-deep); }
a:hover { color: var(--text); }

/* ---------------------------------------------------------------- header */

header {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  position: relative;
  z-index: 40;
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 20px 'Barlow';
  letter-spacing: -0.02em;
  color: var(--text);
  flex: 0 0 auto;
  user-select: none;
}
.brand-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

/* view tabs */
.views { display: flex; gap: 2px; flex: 0 0 auto; }
.views button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 500 13.5px 'Barlow';
  padding: 8px 11px 7px;
  letter-spacing: 0.01em;
}
.views button:hover { color: var(--text); }
.views button[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.search-wrap { position: relative; }
input[type='search'] {
  font: 400 13.5px 'Barlow';
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 7px 10px;
  width: 190px;
  -webkit-appearance: none;
}
input[type='search']:focus { outline: none; border-color: var(--muted); background: var(--bg); }

.suggest {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 290px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  z-index: 60;
  display: none;
}
.suggest.open { display: block; }
.suggest button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  background: none; border: none;
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
}
.suggest button:last-child { border-bottom: none; }
.suggest button:hover, .suggest button.cursor { background: var(--surface); }
.suggest img, .suggest .mono-av {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--surface-raised);
}
.suggest .sg-name { font: 500 13.5px 'Barlow'; color: var(--text); line-height: 1.25; }
.suggest .sg-meta { font: 400 11px 'IBM Plex Mono'; color: var(--muted-strong); }

.btn-ghost {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--body);
  border-radius: var(--radius-btn);
  font: 500 13px 'Barlow';
  padding: 7px 11px;
}
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.btn-ghost[aria-pressed='true'] { border-color: var(--text); color: var(--text); }

/* ---------------------------------------------------------------- layout */

main {
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}

.workspace { flex: 1 1 auto; display: flex; min-height: 0; }

/* View caption band. In the flow so it can never sit on top of data. */
.caption-bar {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  padding: 9px 16px 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  background: var(--bg);
}
.caption-bar h2 { font-size: 15px; line-height: 1.2; flex: 0 0 auto; }
.caption-bar p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  flex: 1 1 auto;
  min-width: 0;
}
.cap-chips { flex: 0 0 auto; display: flex; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--muted);
  border-radius: 20px; padding: 3px 4px 3px 9px;
  font: 400 12px 'Barlow'; color: var(--text);
}
.chip:hover { background: var(--surface-raised); }
.chip-k { font: 600 9.5px 'Barlow'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-strong); }
.chip-v { font-weight: 500; }
.chip-n { font: 400 10.5px 'IBM Plex Mono'; color: var(--muted-strong); }
.chip-x { color: var(--muted); font-size: 14px; line-height: 1; padding: 0 4px; }
.chip:hover .chip-x { color: var(--text); }

.cap-list { flex: 0 0 auto; white-space: nowrap; }

/* a value that navigates to its own grouping */
.dim-link {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted var(--border);
}
.dim-link:hover { color: var(--text); border-bottom-color: var(--muted); }
.tag-plain.dim-link { border-bottom: 1px solid var(--border); }
.fact-n { font: 400 10.5px 'IBM Plex Mono'; color: var(--decorative); }

.group-label.clickable {
  background: none; border: none; padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
.group-label.clickable:hover { text-decoration: underline; }

.caption-bar .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--muted-strong);
  flex: 0 0 auto;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

#stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
}

#stage canvas { position: absolute; top: 0; left: 0; display: block; }
#stage svg { position: absolute; top: 0; left: 0; pointer-events: none; }

/* axis / grid labels drawn as DOM over the canvas */
.axis-label {
  position: absolute;
  font: 500 10.5px 'IBM Plex Mono';
  color: var(--muted-strong);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.02em;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.group-label {
  position: absolute;
  font-family: 'Barlow';
  font: 600 11px 'Barlow';
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
  /* The labels sit over a canvas of discs; a white halo keeps them readable
     without a filled box, which would hide the data underneath. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.group-label.small {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
  font-weight: 600;
}
.group-sub {
  position: absolute;
  font: 400 10px 'IBM Plex Mono';
  color: var(--muted-strong);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}

/* zoom controls */
.zoom-ctl {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex; gap: 4px;
  z-index: 20;
}
.zoom-ctl button {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--body);
  border-radius: var(--radius-btn);
  font: 500 13px 'Barlow';
  min-width: 28px; height: 28px;
  padding: 0 8px;
  box-shadow: var(--shadow-card);
}
.zoom-ctl button:hover { background: var(--surface); color: var(--text); }
.zoom-ctl.hidden { display: none; }

/* ---------------------------------------------------------------- sheet views */

#sheet {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--bg);
  z-index: 10;
}
#sheet[hidden] { display: none; }

/* list table */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font: 600 10.5px 'Barlow';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding: 9px 10px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.tbl thead th:hover { color: var(--text); }
.tbl thead th.sorted { color: var(--text); }
.tbl thead th .dir { font-family: 'IBM Plex Mono', monospace; margin-left: 3px; }
.tbl td { padding: 5px 10px; border-bottom: 1px solid #f2f2f2; vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface); }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr.sel { background: var(--surface-raised); }
.tbl .c-rank { font: 400 11px 'IBM Plex Mono'; color: var(--decorative); text-align: right; width: 46px; }
.tbl .c-av { width: 34px; }
.tbl .c-av img, .tbl .c-av div {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--surface-raised);
}
.tbl .c-av div { display: flex; align-items: center; justify-content: center; font: 600 9.5px 'Barlow'; color: var(--muted-strong); }
.tbl .c-name { color: var(--text); font-weight: 500; }
.tbl .c-name .sub { display: block; color: var(--muted-strong); font-weight: 400; font-size: 11px; line-height: 1.25; }
.tbl .c-num { font: 500 12px 'IBM Plex Mono'; text-align: right; color: var(--text); white-space: nowrap; }
.tbl .c-dim { font: 400 11.5px 'Barlow'; color: var(--muted); white-space: nowrap; }
.tbl .c-mono { font: 400 11px 'IBM Plex Mono'; color: var(--muted-strong); white-space: nowrap; text-align: right; }
.tbl .up { color: var(--success); }
.tbl .down { color: var(--danger); }
.list-pad { display: block; }
/* Only shown where the corresponding columns are hidden. */
.sm-only { display: none; }

/* finder */
.find-wrap { max-width: 940px; margin: 0 auto; padding: 22px 20px 60px; }
.find-wrap h2 { font-size: 19px; margin-bottom: 5px; }
.find-lede { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; max-width: 660px; }
.find-box { display: flex; gap: 8px; margin-bottom: 8px; }
.find-box input {
  flex: 1 1 auto;
  font: 400 15px 'Barlow';
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
}
.find-box input:focus { outline: none; border-color: var(--text); }
.btn { background: var(--secondary); color: #fff; font: 600 14px 'Barlow'; border: none; border-radius: var(--radius-btn); padding: 9px 16px; }
.btn:hover { background: var(--secondary-deep); }
.find-egs { font-size: 12px; color: var(--muted-strong); margin-bottom: 18px; }
.find-egs button {
  background: none; border: none; padding: 0 2px;
  color: var(--secondary-deep); font: 400 12px 'Barlow'; text-decoration: underline;
}
.find-egs button:hover { color: var(--text); }
.find-count { font: 400 12px 'IBM Plex Mono'; color: var(--muted-strong); margin: 14px 0 8px; }
.find-tags { margin-bottom: 14px; }
.find-tags .lbl { font: 600 10.5px 'Barlow'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-strong); margin-right: 6px; }
.hit {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  width: 100%; background: none; border-left: none; border-right: none; border-top: none;
  text-align: left;
}
.hit:hover { background: var(--surface); }
.hit img, .hit .mono {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--surface-raised);
}
.hit .mono { display: flex; align-items: center; justify-content: center; font: 600 15px 'Barlow'; color: var(--muted-strong); }
.hit-body { flex: 1 1 auto; min-width: 0; }
.hit-name { font: 600 14.5px 'Barlow'; color: var(--text); line-height: 1.2; }
.hit-desc { font-size: 12.5px; color: var(--body); line-height: 1.4; margin-top: 1px; }
.hit-why { margin-top: 4px; }
.hit-why .m {
  display: inline-block; background: var(--surface); border: 1px solid var(--border);
  color: var(--body); border-radius: 3px; font: 400 10.5px 'Barlow'; padding: 1px 5px; margin: 0 3px 3px 0;
}
.hit-num { flex: 0 0 auto; text-align: right; }
.hit-num .v { font: 500 15px 'IBM Plex Mono'; color: var(--text); display: block; }
.hit-num .u { font: 400 10.5px 'IBM Plex Mono'; color: var(--muted-strong); }
.find-empty { color: var(--muted); font-size: 13.5px; padding: 20px 0; }

/* hover tooltip */
#tip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 3px 12px rgba(0,0,0,0.11);
  padding: 8px 10px;
  display: none;
  max-width: 260px;
}
#tip.show { display: block; }
#tip .t-name { font: 600 14px 'Barlow'; color: var(--text); line-height: 1.25; }
#tip .t-sub { font: 400 11.5px 'Barlow'; color: var(--muted); margin-top: 1px; }
#tip .t-num { font: 500 12px 'IBM Plex Mono'; color: var(--text); margin-top: 5px; }
#tip .t-num span { color: var(--muted-strong); font-weight: 400; }

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

#rail {
  width: 208px;
  flex: 0 0 auto;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px 0 40px;
  background: var(--bg);
}
#rail .rail-sec { padding: 0 14px 16px; }
#rail h3 {
  font: 600 10.5px 'Barlow';
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-bottom: 7px;
}
.seg-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  background: none; border: none;
  padding: 3px 0;
  text-align: left;
  color: var(--body);
  font: 400 13px 'Barlow';
  line-height: 1.3;
}
.seg-toggle:hover { color: var(--text); }
.seg-toggle .swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  background: var(--chart-gray-lo);
}
.seg-toggle .n {
  margin-left: auto;
  font: 400 10.5px 'IBM Plex Mono';
  color: var(--muted-strong);
}
.seg-toggle.off { color: var(--decorative); }
.seg-toggle.off .swatch { background: var(--border) !important; }
.seg-toggle.off .n { color: var(--decorative); }

.pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font: 500 11.5px 'Barlow';
  padding: 3px 9px;
}
.pill:hover { color: var(--text); border-color: var(--muted); }
.pill[aria-pressed='true'] {
  border-color: var(--text);
  color: var(--text);
  background: var(--surface);
}

.rail-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted-strong);
  padding: 0 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

.slider-row { display: flex; align-items: center; gap: 8px; }
input[type='range'] { flex: 1 1 auto; accent-color: var(--secondary); }
.slider-val { font: 500 11px 'IBM Plex Mono'; color: var(--text); min-width: 44px; text-align: right; }

/* ---------------------------------------------------------------- detail panel */

#panel {
  width: var(--panel-w);
  flex: 0 0 auto;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg);
  display: none;
}
#panel.open { display: block; }

.p-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.p-photo-row { display: flex; gap: 13px; align-items: flex-start; }
.p-photo {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-raised);
  flex: 0 0 auto;
}
.p-mono {
  width: 84px; height: 84px; border-radius: 50%;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-raised);
  color: var(--muted-strong);
  font: 600 27px 'Barlow';
  letter-spacing: -0.02em;
}
.p-title { min-width: 0; padding-top: 2px; }
.p-title h2 { font-size: 20px; line-height: 1.15; }
.p-native { font-size: 13px; color: var(--muted); margin-top: 1px; }
.p-desc { font-size: 12.5px; line-height: 1.45; color: var(--body); margin-top: 5px; }

.p-close {
  position: sticky; top: 0;
  float: right;
  background: var(--bg); border: none;
  color: var(--muted); font-size: 20px; line-height: 1;
  padding: 2px 6px;
}
.p-close:hover { color: var(--text); }

.p-sec { padding: 13px 18px; border-bottom: 1px solid var(--border); }
.p-sec:last-child { border-bottom: none; }
.p-sec h3 {
  font: 600 10.5px 'Barlow';
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-bottom: 8px;
}
.p-sec .prov {
  font: 400 10.5px 'Barlow';
  color: var(--muted-strong);
  font-style: italic;
  margin-top: 7px;
  line-height: 1.4;
}

/* headline number */
.p-big { display: flex; align-items: baseline; gap: 7px; }
.p-big .v { font: 500 30px 'IBM Plex Mono'; color: var(--text); letter-spacing: -0.03em; }
.p-big .u { font-size: 12px; color: var(--muted); }
.p-asof { font: 400 10.5px 'IBM Plex Mono'; color: var(--muted-strong); margin-top: 2px; }

/* per-platform bars */
.acct { margin-bottom: 9px; }
.acct-top { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.acct-top .pf { font-weight: 600; color: var(--text); }
.acct-top .hd {
  font: 400 11px 'IBM Plex Mono';
  color: var(--muted-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-top .vv { margin-left: auto; font: 500 12px 'IBM Plex Mono'; color: var(--text); flex: 0 0 auto; }
.bar { background: #eeeeee; height: 4px; border-radius: 2px; margin-top: 3px; overflow: hidden; }
.bar > .fill { background: var(--chart-gray-hi); height: 100%; border-radius: 2px; }
.acct-date { font: 400 10px 'IBM Plex Mono'; color: var(--decorative); margin-top: 2px; }

/* growth sparkline */
.spark { width: 100%; height: 62px; display: block; }
.spark-legend { display: flex; justify-content: space-between; font: 400 10px 'IBM Plex Mono'; color: var(--muted-strong); margin-top: 2px; }
.growth-num { font: 500 15px 'IBM Plex Mono'; }
.growth-up { color: var(--success); }
.growth-down { color: var(--danger); }
.growth-flat { color: var(--muted); }

/* fact rows */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12.5px; }
.facts dt { color: var(--muted-strong); font-size: 11.5px; padding-top: 1px; }
.facts dd { margin: 0; color: var(--text); }

/* There is deliberately no orange chip class. The preset's orange budget is the
   brand dot plus ONE emphasis per view, and that emphasis is spent on the
   selected person's ring drawn on the canvas (#ff6600 in app.js). Segment chips
   use the neutral style below; an orange one existed here briefly and put three
   orange elements on screen at once. */
.tag-plain {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--body);
  border-radius: 3px;
  font: 400 11px 'Barlow';
  padding: 1px 6px;
  margin: 0 3px 3px 0;
}

.peer {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none;
  padding: 4px 0; text-align: left;
}
.peer:hover .peer-n { color: var(--text); text-decoration: underline; }
.peer img, .peer .peer-mono {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--surface-raised);
}
.peer .peer-mono { display: flex; align-items: center; justify-content: center; font: 600 10px 'Barlow'; color: var(--muted-strong); }
.peer-n { font-size: 12.5px; color: var(--body); line-height: 1.2; }
.peer-v { margin-left: auto; font: 400 11px 'IBM Plex Mono'; color: var(--muted-strong); }

.credit { font-size: 10.5px; line-height: 1.45; color: var(--muted-strong); }
.credit a { color: var(--muted-strong); }

/* ---------------------------------------------------------------- about sheet */

#about {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.97);
  z-index: 80;
  overflow-y: auto;
  display: none;
  padding: 34px 20px 60px;
}
#about.open { display: block; }
.about-inner { max-width: 720px; margin: 0 auto; }
.about-inner h1 { font-size: 26px; margin-bottom: 4px; }
.about-inner h2 { font-size: 15px; margin: 26px 0 7px; }
.about-inner p { font-size: 13.5px; line-height: 1.62; margin: 0 0 10px; }
.about-inner li { font-size: 13.5px; line-height: 1.55; margin-bottom: 5px; }
.about-inner ul { padding-left: 19px; margin: 0 0 12px; }
.about-inner code {
  font: 400 12px 'IBM Plex Mono';
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
}
.about-close { position: absolute; top: 16px; right: 20px; }
.about-inner table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-bottom: 12px; }
.about-inner th, .about-inner td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); }
.about-inner th { font-weight: 600; color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.about-inner td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; padding-right: 14px; }

/* ---------------------------------------------------------------- loading */

#boot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 90;
  font: 400 13px 'IBM Plex Mono'; color: var(--muted);
}
#boot.gone { display: none; }

/* ---------------------------------------------------------------- responsive */

/* The tab strip only exists on narrow screens; on desktop the tabs live in the
   header and this is empty and hidden. */
.views-strip { display: none; }
.wide-only { display: inline; }

@media (max-width: 1120px) {
  :root { --panel-w: 320px; }
  #rail { width: 178px; }
}

/* ---- phones and small tablets ------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --header-h: 52px;
    --panel-w: 100%;
  }

  /* Header: brand, search, two buttons. The tabs move out entirely. */
  header { gap: 8px; padding: 0 10px; }
  .brand { font-size: 17px; }
  .brand-word { display: none; }
  .views { display: none; }
  .head-right { gap: 6px; }
  .wide-only { display: none; }

  input[type='search'] { width: 100%; min-width: 0; font-size: 15px; padding: 7px 9px; }
  .search-wrap { flex: 1 1 auto; min-width: 0; }
  .suggest { width: min(320px, calc(100vw - 20px)); right: auto; left: 0; }
  .btn-ghost { padding: 7px 9px; font-size: 12.5px; flex: 0 0 auto; }

  /* Horizontally scrollable tab strip. */
  .views-strip {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    padding: 0 8px;
    flex: 0 0 auto;
    background: var(--bg);
  }
  .views-strip::-webkit-scrollbar { display: none; }
  .views-strip button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font: 500 13.5px 'Barlow';
    padding: 9px 10px 7px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .views-strip button[aria-selected='true'] {
    color: var(--text);
    border-bottom-color: var(--text);
    font-weight: 600;
  }

  main { top: calc(var(--header-h) + 38px); }

  /* Caption: title + count only; the explanation would eat the screen. */
  .caption-bar { padding: 7px 10px 8px; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
  .caption-bar h2 { font-size: 13.5px; }
  .caption-bar p { display: none; }
  .caption-bar .count { font-size: 10px; }
  .cap-list { padding: 5px 9px; font-size: 12px; }
  .chip { font-size: 11.5px; }

  /* Filters become a slide-in drawer. */
  .rail-scrim {
    display: none;
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.28);
    z-index: 44;
  }
  .rail-scrim.open { display: block; }
  #rail {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: min(272px, 84vw);
    display: block;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    z-index: 45;
    box-shadow: 2px 0 16px rgba(0,0,0,0.13);
    padding-top: 12px;
  }
  #rail.open { transform: translateX(0); }

  /* Detail panel covers the stage. */
  #panel {
    position: absolute;
    inset: 0;
    width: 100%;
    border-left: none;
    z-index: 50;
  }
  .p-close { font-size: 26px; padding: 4px 10px; }
  .p-photo, .p-mono { width: 68px; height: 68px; }
  .p-mono { font-size: 22px; }
  .p-title h2 { font-size: 18px; }

  /* Bigger, thumb-sized zoom controls, clear of the home indicator. */
  .zoom-ctl { right: 10px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .zoom-ctl button { min-width: 38px; height: 38px; font-size: 16px; }

  /* List: drop the columns that cannot fit and fold them into the name cell. */
  .tbl thead th.c-hide-sm, .tbl td.c-hide-sm { display: none; }
  .tbl thead th { padding: 8px 8px; font-size: 10px; }
  .tbl td { padding: 6px 8px; }
  .tbl .c-rank { width: 30px; font-size: 10px; }
  .tbl .c-av { width: 30px; }
  .tbl .c-name { font-size: 13px; }
  .tbl .c-name .sub { font-size: 11px; }
  .tbl .c-name .sm-only { display: block; color: var(--muted-strong); }
  .tbl .c-num { font-size: 12px; }

  /* Finder */
  .find-wrap { padding: 16px 12px 60px; }
  .find-wrap h2 { font-size: 17px; }
  .find-lede { font-size: 12.5px; }
  .find-box input { font-size: 15px; }
  .hit img, .hit .mono { width: 40px; height: 40px; }
  .hit-name { font-size: 13.5px; }
  .hit-desc { font-size: 12px; }

  /* About */
  #about { padding: 20px 14px 60px; }
  .about-inner h1 { font-size: 21px; }
  .about-inner p, .about-inner li { font-size: 13px; }
  .about-close { top: 10px; right: 12px; }

  /* Group labels shrink so they do not smother a small map. */
  .group-label { font-size: 10px; }
  .group-label.small { font-size: 9px; }
  .group-sub { font-size: 9px; }
  .axis-label { font-size: 9.5px; }

  #tip { max-width: min(240px, calc(100vw - 24px)); }
}

@media (max-width: 420px) {
  .caption-bar h2 { font-size: 12.5px; }
  .tbl .c-hide-xs { display: none; }
  .find-egs { font-size: 11.5px; }
}

/* Touch devices: no hover states worth keeping, and bigger tap targets. */
@media (hover: none) {
  .tbl tbody tr:hover { background: none; }
  .hit:hover { background: none; }
  .seg-toggle { padding: 6px 0; }
  .pill { padding: 5px 11px; }
}