:root {
  color-scheme: light;
  --surface-1: #fcfcfb; --surface-2: #f0efec; --rule: #e4e3df;
  --text-primary: #0b0b0b; --text-secondary: #52514e;
  --talk: #2a78d6; --poster: #e34948;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-1); color: var(--text-primary);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--talk); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }

/* header + nav */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--surface-2); border-bottom: 1px solid #d6d4cf;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.07); }
.site-header .wrap { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px 28px; padding-top: 14px; }
.brand { flex: none; font-weight: 700; font-size: 17px; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.brand span { font-weight: 400; color: var(--text-secondary); }
.site-nav { display: flex; flex-wrap: nowrap; flex: 1; gap: 2px; margin: 0 -8px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.nav-item { flex: none; }
.nav-item { position: relative; }
.site-nav > .nav-item > a { display: block; padding: 10px 8px 12px; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.nav-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.caret { display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: 2px; }
.nav-menu { display: none; position: fixed; /* placed by site.js, since the scrolling nav would clip it */ z-index: 20; min-width: 200px; padding: 6px 0;
  background: var(--surface-1); border: 1px solid #d6d4cf; border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { display: block; }
.nav-menu a { display: block; padding: 6px 14px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.site-nav .nav-menu a:hover { background: var(--surface-2); color: var(--text-primary); }
.site-nav a:hover { color: var(--text-primary); }
.site-nav a[aria-current="page"] { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--talk); }

main { padding-top: 28px; padding-bottom: 48px; }
h1 { font-size: 30px; line-height: 1.2; margin: 14px 0 18px; }
h2 { font-size: 22px; margin: 36px 0 8px; }
h3 { font-size: 17px; margin: 28px 0 6px; }
p, li { color: var(--text-secondary); max-width: 72ch; }
.lede { font-size: 17px; }
.caveat { background: var(--surface-2); border-radius: 8px; padding: 12px 16px; max-width: none; }

/* page toolbar: year switcher and toggles, sticky while scrolling */
.toolbar { position: sticky; top: var(--header-h, 58px); z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 10px 0; margin: 12px 0 4px; background: var(--surface-1); border-bottom: 1px solid var(--rule); }
.toolbar label, .toolbar .lbl { font-size: 13px; color: var(--text-secondary); }
.seg { display: inline-flex; gap: 4px; vertical-align: middle; }
.seg button, .filters select, .toolbar input, .toolbar select { font: inherit; font-size: 14px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; }
.seg button { cursor: pointer; }
.seg button:hover { border-color: var(--text-secondary); }
.seg button[aria-pressed="true"] { background: var(--surface-2); border-color: var(--text-secondary); font-weight: 600; }
.toolbar input { width: 15em; }
.toolbar input[type=checkbox] { width: auto; }
.toolbar .checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.toolbar .checks label { flex: 0 0 auto; }

/* figures */
figure.fig { margin: 16px 0 24px; }
figure.fig img { display: block; width: 100%; max-width: 780px; height: auto; border-radius: 6px; border: 1px solid var(--rule); }
figure.fig figcaption { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }

/* tables */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.scroll { overflow-x: auto; }
.scroll:has(#we-table) { max-height: 420px; overflow-y: auto; }
#we-table thead th { position: sticky; top: 0; background: var(--surface-1); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
td:not(.text) { white-space: nowrap; }
th.text, td.text { text-align: left; }
th { cursor: pointer; user-select: none; color: var(--text-secondary); font-weight: 600; white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-1); }
th[aria-sort="ascending"]::after { content: " ↑"; }
th[aria-sort="descending"]::after { content: " ↓"; }
tbody tr:hover { background: var(--surface-2); }
.table-title { margin: 0 0 6px; color: var(--text-primary); font-weight: 600; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.empty { font-size: 14px; }

/* prev / next */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; display: flex; flex-direction: column; font-weight: 600; }
.pager a span { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.pager .next { margin-left: auto; text-align: right; }

footer { border-top: 1px solid var(--rule); font-size: 13px; color: var(--text-secondary); }
footer .wrap { padding-top: 16px; padding-bottom: 32px; }
footer p { margin: 4px 0; }

/* phrase explorer */
.filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 12px 0; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); margin: 4px 0 8px; }
.legend i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bars { gap: 32px; }
.bars h4 { margin: 8px 0 6px; font-size: 14px; }
.explorer { margin: 8px 0 48px; }
.explorer.in-vignette { margin-bottom: 8px; }
.explorer.in-vignette h2 { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
/* fixed value column: an auto one sizes per row, so equal totals got different bar widths */
.bar-row { display: grid; grid-template-columns: minmax(0, 15em) 1fr 9em; gap: 8px; align-items: center;
  padding: 3px 4px; border-radius: 4px; font-size: 13px; cursor: default; }
.bar-row:hover, .bar-row:focus-visible { background: var(--surface-2); outline: none; }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.bar-row .track { display: flex; gap: 2px; height: 12px; }
.bar-row .seg-talk { background: var(--talk); }
.bar-row .seg-poster { background: var(--poster); }
/* forest plot (ratio mode): dot + 95% CI line per row on a log scale, dashed 1× line through every row */
.bar-row .cell { position: relative; min-height: 12px; }
.bar-row .ref { position: absolute; top: -6px; bottom: -6px; border-left: 1px dashed var(--text-secondary); }
.bar-row .ci { position: absolute; top: calc(50% - 3px); height: 6px; box-sizing: border-box;
  border-left: 1.5px solid var(--text-primary); border-right: 1.5px solid var(--text-primary);
  background: linear-gradient(var(--text-primary), var(--text-primary)) center / 100% 1.5px no-repeat; }
.bar-row .pt { position: absolute; top: calc(50% - 5.5px); width: 11px; height: 11px; margin-left: -5.5px;
  box-sizing: border-box; border-radius: 50%; background: var(--text-primary); border: 2px solid var(--surface-1); }
.bar-row:hover .pt, .bar-row:focus-visible .pt { border-color: var(--surface-2); }
.bar-row.axis { cursor: default; padding-top: 0; }
.bar-row.axis:hover { background: none; }
.bar-row .tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
#drv-chart .ci { stroke: var(--text-primary); stroke-width: 1.5; opacity: 0.45; }
.bar-row .track > span:first-child { border-radius: 4px 0 0 4px; }
.bar-row .track > span:last-child { border-radius: 0 4px 4px 0; }
.bar-row .track > span:only-child { border-radius: 4px; }
.bar-row .val { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; font-size: 13px; max-width: 280px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); }
.tip strong { color: var(--text-primary); font-size: 14px; }
.tip .k { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: 3px; }

/* additions: phrase groups, in-page contents */
.related { display: block; font-size: 12px; color: var(--text-secondary); white-space: normal; }
h2 .sub { font-weight: 400; color: var(--text-secondary); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; margin: 4px 0 8px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.search-jump { margin: 8px 0 20px; }
.search-jump a { display: inline-flex; align-items: center; gap: 10px; min-width: min(100%, 360px); padding: 10px 18px;
  font-size: 16px; font-weight: 600; color: var(--text-primary); text-decoration: none; background: var(--surface-1);
  border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
  transition: border-color 0.15s, box-shadow 0.15s; }
.search-jump a:hover, .search-jump a:focus-visible { border-color: var(--talk); box-shadow: 0 2px 8px rgb(42 120 214 / 0.2); }
.search-jump .nav-icon { width: 18px; height: 18px; margin: 0; vertical-align: 0; color: var(--talk); stroke-width: 1.8; }
.search-jump .go { margin-left: auto; font-weight: 400; color: var(--text-secondary); }
h2[id], h3[id], .explorer, .vignette[id] { scroll-margin-top: 130px; }  /* clear the sticky header and toolbar */
@media (max-width: 600px) {
  h1 { font-size: 24px; }
  .toolbar input { width: 100%; }
  .toolbar label { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; }
}

/* overview: collapsible tables, phrase lookup chart */
details.table { margin: 4px 0 20px; }
details.table > summary { cursor: pointer; color: var(--talk); font-size: 14px; margin-bottom: 8px; }
.drv-trend { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin: 4px 0 8px; }
.drv-trend svg { width: 360px; max-width: 100%; height: auto; }
.drv-trend > div { flex: 1 1 220px; }
.drv-trend p { margin: 0 0 6px; }
#drv-chart .grid { stroke: var(--rule); }
#drv-chart .axis { fill: var(--text-secondary); font-size: 11px; }
#drv-chart .line { fill: none; stroke-width: 2; }
#drv-chart .line.talk { stroke: var(--talk); }
#drv-chart .line.poster { stroke: var(--poster); }
#drv-chart .dot { stroke: var(--surface-1); stroke-width: 2; }
#drv-chart .dot.talk { fill: var(--talk); }
#drv-chart .dot.poster { fill: var(--poster); }
#drv-chart .line.ratio { stroke: var(--text-primary); }
#drv-chart .end { font-size: 12px; font-weight: 600; }
#drv-chart .end.talk { fill: var(--talk); }
#drv-chart .end.poster { fill: var(--poster); }
#drv-chart .dot.ratio { fill: var(--text-primary); }
#drv-chart .ref { stroke: var(--text-secondary); stroke-dasharray: 3 3; }
.filters input { font: inherit; font-size: 14px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; }
.sg-wrap { position: relative; display: inline-block; }
#drv-suggest { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; min-width: 100%; width: max-content; max-width: 340px;
  margin: 0; padding: 4px; list-style: none; background: var(--surface-1); border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.1); font-size: 14px; }
#drv-suggest li { padding: 5px 10px; border-radius: 5px; cursor: pointer; }
#drv-suggest li[aria-selected="true"], #drv-suggest li:hover { background: var(--surface-2); }
#drv-suggest b { font-weight: 600; }
.filters .lbl { font-size: 13px; color: var(--text-secondary); }

/* center-of-mass map (geography page) */
.com-map { display: block; width: 100%; max-width: 780px; height: auto; border: 1px solid var(--rule); border-radius: 6px;
  margin-top: 4px; }
.com-map .water { fill: var(--surface-1); }
.com-map .land { fill: var(--surface-2); }
.com-map .land.outlined, .com-map .border { stroke: var(--rule); stroke-width: 1; stroke-linejoin: round; }
.com-map .border { fill: none; }
.com-map circle.place { fill: var(--text-secondary); }
.com-map text.place { fill: var(--text-secondary); font-size: 11px; }
.com-map text.sea { fill: var(--text-secondary); font-size: 11px; font-style: italic; }
.com-map { --com: var(--text-primary); }
.com-map[data-group="talks"] { --com: var(--talk); }
.com-map .path { fill: none; stroke: var(--com); stroke-width: 1.5; opacity: 0.45; }
.com-map .pull { stroke: var(--com); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.6; }
.com-map .ghost { fill: none; stroke: var(--com); stroke-width: 1.5; opacity: 0.6; }
.com-map .pt { transition: transform .45s ease; outline: none; }
.com-map .pt .hit { fill: transparent; }
.com-map .pt .dot { fill: var(--com); stroke: var(--surface-1); stroke-width: 2; }
.com-map .pt:hover .dot, .com-map .pt:focus-visible .dot { stroke: var(--text-primary); }
.com-map .pt .yr { fill: var(--text-primary); font-size: 12px; font-weight: 700; paint-order: stroke;
  stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .com-map .pt { transition: none; } }
.com-key { display: inline-block; width: 11px !important; height: 11px !important; border-radius: 50% !important;
  margin-right: 6px; vertical-align: -1px; }
.com-key.dot { background: var(--text-primary); }
.com-key.ghost { border: 1.5px solid var(--text-primary); }
.com .seg button:disabled { opacity: 0.45; cursor: not-allowed; }
#com-note { font-size: 14px; }
.com[data-group="talks"] .com-key.dot { background: var(--talk); }
.com[data-group="talks"] .com-key.ghost { border-color: var(--talk); }

/* overview vignettes */
.vignette { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 4px; }
.vignette h2 { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.vignette h2 .num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.vignette .lead { font-size: 16px; color: var(--text-primary); }
.vignette .more-link { font-weight: 600; }
.vignette .more-link a { text-decoration: none; }
.vignette .more-link a:hover { text-decoration: underline; }
.table-note { font-size: 13px; margin-top: 4px; }
.hl-table { width: auto; min-width: min(100%, 560px); }
.hl-table td, .hl-table th { font-variant-numeric: tabular-nums; }
.hl-table .spark-col { padding-top: 2px; padding-bottom: 2px; }.spark { display: block; }
.spark polyline { fill: none; stroke: var(--text-primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--text-primary); }
.spark.pair polyline.talk { stroke: var(--talk); }
.spark.pair polyline.poster { stroke: var(--poster); }
.spark.pair circle.talk { fill: var(--talk); }
.spark.pair circle.poster { fill: var(--poster); }
.rates .rate { display: flex; align-items: center; gap: 10px; }
.rates .track { position: relative; width: 220px; height: 12px; flex: none; }
.rates .ci { position: absolute; top: 5px; height: 2px; background: var(--talk); border-radius: 1px; }
.rates .pt { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--talk); border: 2px solid var(--surface-1); box-sizing: border-box; }
.rates .base { position: absolute; top: -3px; bottom: -3px; border-left: 1px dashed var(--text-secondary); }
.rates .val { min-width: 3.5em; text-align: right; }
@media (max-width: 600px) { .rates .track { width: 110px; } }
table.match th.group { text-align: center; border-bottom: 1px solid var(--rule); }

/* what's hot (overview): steps scroll past a sticky chart; up to three colored topics per step (not talk/poster blue/red) */
.story { --hl-1: #eb6834; --hl-2: #1baf7a; --hl-3: #6250d6; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0 40px; margin: 8px 0 12px; }
.story .hl-1 { --c: var(--hl-1); } .story .hl-2 { --c: var(--hl-2); } .story .hl-3 { --c: var(--hl-3); }
.story-chart { --h: min(420px, calc(100vh - var(--header-h, 58px) - 80px)); grid-column: 2; grid-row: 1; position: sticky;
  top: calc(var(--header-h, 58px) + (100vh - var(--header-h, 58px) - var(--h)) / 2); align-self: start; height: var(--h); }
.story-chart svg { display: block; overflow: visible; touch-action: pan-y; }
.story-steps { grid-column: 1; grid-row: 1; padding: 8vh 0 24vh; }
.story-step { margin-bottom: 40vh; }
.story-step:last-child { margin-bottom: 0; }
.story-step h3 { margin: 0 0 6px; }
.story-step p { margin: 0; }
.story.live .story-step { opacity: 0.3; transition: opacity .3s; }
.story.live .story-step.active { opacity: 1; }
.story .hl { color: var(--text-primary); font-weight: 600; text-decoration: none; border-bottom: 3px solid var(--c); }
.story .hl:hover { background: var(--surface-2); }
.story-chart .grid line { stroke: var(--rule); }
.story-chart .axis text { fill: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.story-chart .topic path { fill: none; stroke: #d5d3ce; stroke-width: 1.5; stroke-linejoin: round; transition: stroke .3s; }
.story-chart .topic:not(.on) { display: none; }  /* only the step's own topics */
.story-chart .topic circle { fill: var(--c, transparent); stroke: var(--surface-1); stroke-width: 2; opacity: 0; transition: opacity .3s; }
.story-chart .topic.on path { stroke: var(--c); stroke-width: 2.5; }
.story-chart .topic.on circle { opacity: 1; }
.story-chart .lab text { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
.story-chart .lab text.val { fill: var(--text-secondary); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.story-chart .cross { stroke: var(--text-secondary); stroke-dasharray: 3 3; }
@media (prefers-reduced-motion: reduce) { .story.live .story-step, .story-chart .topic path, .story-chart .topic circle { transition: none; } }
@media (max-width: 760px) {  /* chart pinned under the header, steps scroll beneath it */
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-chart { --h: 280px; grid-column: 1; top: var(--header-h, 58px); z-index: 2; background: var(--surface-1);
    border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
  .story-steps { grid-row: 2; padding: 4vh 0 30vh; }
  .story-step { margin-bottom: 50vh; }
  .story-chart .lab text { font-size: 12px; }
  .story-chart .lab text.val { font-size: 11px; }
}

/* score page */
.scorer { margin: 20px 0 8px; }
.scorer > .lbl { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.scorer textarea { display: block; width: 100%; max-width: 780px; font: inherit; font-size: 14px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; resize: vertical; }
.scorer textarea:focus { outline: 2px solid var(--talk); outline-offset: -1px; }
.scorer input[type="file"] { font-size: 13px; color: var(--text-secondary); max-width: 100%; }
.sc-headline { font-size: 18px; color: var(--text-primary); margin: 16px 0 4px; }
.sc-headline strong { font-size: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 780px; }
.chip { cursor: default; font-size: 13px; color: var(--text-primary); background: var(--surface-2); border-radius: 12px; padding: 2px 10px; }
#sc-chart { display: block; width: 100%; max-width: 640px; height: auto; }
#sc-chart .grid { stroke: var(--rule); }
#sc-chart .axis { fill: var(--text-secondary); font-size: 11px; }
#sc-chart .bar.talk { fill: var(--talk); }
#sc-chart .bar.poster { fill: var(--poster); }
#sc-chart .you { stroke: var(--text-primary); stroke-width: 1.5; }
#sc-chart .you-label { fill: var(--text-primary); font-size: 12px; font-weight: 700; }
#sc-chart .hit { fill: transparent; }
#sc-chart .hit:hover { fill: rgb(0 0 0 / 0.05); }

/* interactive Manhattan plots (phrases page) */
.mh { position: relative; max-width: 780px; margin: 12px 0 4px; }
.mh canvas { display: block; touch-action: pan-y; }
.mh .mh-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mh .mh-fallback { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; }

/* about */
.about { display: flex; gap: 16px; align-items: center; margin: 8px 0 24px; }
.about img { width: 110px; height: auto; border-radius: 6px; border: 1px solid var(--rule); flex: none; }
.about p { margin: 0; }

/* Find talks: ego-network */
.sim-search { position: relative; display: inline-flex; gap: 6px; margin-left: auto; }
.sim-search input { width: 14em; max-width: 100%; }
.sim-search button { font: inherit; font-size: 14px; background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.sim-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 6; margin-top: 4px; min-width: 16em; background: var(--surface-1);
  border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); max-height: 70vh; overflow-y: auto; }
.sim-results .sub { margin: 0; padding: 7px 12px 3px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.sim-results button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 7px 12px; }
.sim-results .more { padding: 4px 12px 6px; font-size: 12px; color: var(--text-secondary); text-decoration: underline; }
.sim-results button:hover { background: var(--surface-2); }
.sim-results span { display: block; font-size: 12px; color: var(--text-secondary); }
.sim-main { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.sim-main .sim-stage { flex: 1; min-width: 0; margin: 0; }
.sim-side { width: 270px; flex: none; max-height: clamp(360px, 62vh, 620px); display: flex; flex-direction: column; }
.sim-side h2 { margin: 0 0 6px; font-size: 16px; }
.sim-side ol { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.sim-side button { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text-primary); background: none;
  border: 0; padding: 7px 4px 2px; cursor: pointer; }
.sim-side li:hover { background: var(--surface-2); cursor: pointer; }
.sim-side li.past { opacity: 0.55; }
.sim-side li.live { box-shadow: inset 4px 0 0 var(--poster); }
.sim-side li { position: relative; border-bottom: 1px solid var(--rule); }
.sim-side .when { margin-left: calc(3em + 4px); padding: 0 4px 7px; font-size: 12px; color: var(--text-secondary); }
.sim-side a.ext { position: absolute; z-index: 1; top: 7px; right: 4px; font-size: 12px; }
.sim-card a.ext { font-size: 13px; font-weight: 400; margin-left: 6px; }
.sim-side .when a.ext { position: static; } /* the Preprint link sits inline in the time line, not in the corner */
.sim-head { gap: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sim-head h2 { margin: 0; }
.sim-sort { gap: 0; }
.sim-sort { flex: none; }
.sim-sort button { width: auto; display: inline-block; white-space: nowrap; font-size: 12px; padding: 1px 8px; border-radius: 0; }
.sim-sort button:first-child { border-radius: 6px 0 0 6px; }
.sim-sort button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.sim-side em.kind, .sim-results em.kind { font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; margin-left: 6px; border-radius: 8px; vertical-align: 1px; color: #fff; }
.sim-side em.kind.talk { background: var(--talk); }
.sim-side em.kind.poster { background: var(--poster); }
.sim-side em.kind.last, .sim-results em.kind.last { background: #efe9fb; color: #5b3aa8; letter-spacing: .02em; }
.sim-side b { display: inline-block; min-width: 3em; color: var(--talk); }
.sim-side span { display: block; margin-left: 3em; font-size: 12px; color: var(--text-secondary); }
.sim-stage .node.hl circle { stroke: var(--text-primary); stroke-width: 3; }
@media (max-width: 800px) { .sim-main { flex-direction: column; } .sim-main .sim-stage { width: 100%; } .sim-side { width: 100%; max-height: 360px; } }
.sim-stage { position: relative; height: clamp(360px, 62vh, 620px); margin: 12px 0; background: var(--surface-2); border-radius: 10px; overflow: hidden; touch-action: manipulation; }
.sim-stage svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.sim-stage svg:active { cursor: grabbing; }
.sim-recenter { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; color: var(--text-secondary); }
.sim-recenter:hover { color: var(--text-primary); }
.sim-recenter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#similar.no-graph .sim-stage { display: none; }
#similar.no-graph .sim-side { width: 100%; max-height: none; }
.sim-stage .node { cursor: pointer; }
.sim-stage .node circle { stroke: var(--surface-1); stroke-width: 2; }
.sim-stage .node.center circle { stroke: var(--text-primary); stroke-width: 3; }
.sim-stage .node:focus { outline: none; }
.sim-stage .node:focus circle { stroke: var(--text-primary); }
.sim-stage .node text { font-size: 11px; fill: var(--text-primary); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; pointer-events: none; }
.sim-stage .links line { stroke: #b8b6b0; stroke-width: 1.5; }
.sim-tip { position: absolute; left: 0; top: 0; z-index: 3; width: max-content; max-width: min(260px, 90%); padding: 8px 12px; font-size: 13px;
  background: var(--surface-1); border: 1px solid #d6d4cf; border-radius: 8px; box-shadow: 0 4px 14px rgb(0 0 0 / 0.15); pointer-events: none; }
.ls-tip.pinned { pointer-events: auto; }
.ls-tip button { display: block; margin-top: 6px; font-size: 12px; cursor: pointer; }
.ls-tip button:disabled { cursor: default; }
.sim-tip div span { display: inline-block; width: 4.8em; color: var(--text-secondary); }
.sim-tip em { display: block; margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.sim-card h2 { margin: 8px 0 4px; }
.sim-card dl { margin: 0 0 6px; }
.sim-card div { display: inline-block; margin-right: 18px; color: var(--text-secondary); }
.sim-card div span { color: var(--text-primary); font-weight: 600; margin-right: 6px; }
.sim-legend { columns: 2 260px; list-style: none; padding: 0; margin: 8px 0; }
.sim-legend li { font-size: 13px; padding: 2px 0; }
.sim-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.sim-trail { display: flex; overflow: hidden; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; line-height: 1.2; flex-wrap: nowrap; color: var(--text-secondary); }
.sim-trail[hidden] { display: none; }
.sim-trail #sim-trail-list { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.sim-trail #sim-trail-list button { flex: none; }
.sim-trail .lbl { flex: none; }
.sim-trail button { font: inherit; font-size: 12px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 10px; padding: 0 8px; cursor: pointer; filter: grayscale(1); }
.sim-trail button:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.sim-trail #sim-clear { flex: none; background: none; border-radius: 6px; filter: none; font-size: 11px; padding: 0 6px; }
.sim-trail i { font-style: normal; opacity: 0.6; }
.sim-trail b { font-weight: 600; color: var(--text-primary); }
.sim-stage .node.visited circle { filter: grayscale(1); opacity: 0.6; }
.sim-stage .node.visited text { fill: var(--text-secondary); }
@media (max-width: 600px) { .sim-search { margin-left: 0; width: 100%; } .sim-search input { flex: 1; } }
/* phones: hamburger menu, and the Find talks graph gets the screen */
.nav-toggle { display: none; margin-left: auto; padding: 6px; background: none; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; color: var(--text-primary); }
.nav-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; align-items: center; gap: 0 12px; padding-top: 8px; padding-bottom: 8px; }
  .nav-toggle { display: block; }
  .site-nav { display: flex; flex-direction: column; position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(280px, 80vw); margin: 0; padding: 56px 0 16px; gap: 0;
    overflow-y: auto; background: var(--surface-2); box-shadow: none; visibility: hidden; transform: translateX(100%); transition: transform .2s ease, visibility 0s .2s; }
  .site-nav.open { visibility: visible; transform: none; box-shadow: -4px 0 24px rgba(0,0,0,.18); transition: transform .2s ease; }
  .nav-scrim { position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }
  .nav-toggle { position: relative; z-index: 31; }
  .site-nav > .nav-item > a { padding: 12px 8px; border-bottom: 0; border-left: 3px solid transparent; font-size: 16px; }
  .site-nav a[aria-current="page"] { border-left-color: var(--talk); }
  .nav-menu, .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu, .caret { display: none; }
  main { padding-top: 12px; }
}
@media (max-width: 800px) {
  #similar .toolbar { position: static; gap: 8px 14px; margin-top: 4px; padding: 8px 0; }
  .sim-help { display: none; }
  main:has(#similar) h1 { font-size: 20px; margin: 2px 0 0; }
  #similar .seg button { padding: 3px 9px; }
  #similar .toolbar { gap: 6px 10px; }
  .sim-search { order: 9; }
  #similar .toolbar .lbl { display: none; }
  [data-sim=degrees] button::after { content: "°"; }
  .sim-main .sim-stage { flex: none; width: calc(100% + 40px); margin: 0 -20px; border-radius: 0; height: calc(0.8 * max(340px, 100svh - var(--header-h, 56px) - 235px)); }
  .sim-card h2 { font-size: 18px; }
}
.sim-card a.cal { font-size: 13px; }
a.cal { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
a.cal svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cmp-pick { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 14px 0; }
.cmp-slot { flex: 1 1 18em; min-width: 0; }
.cmp-slot .lbl { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.cmp-slot .sim-search { display: block; margin-left: 0; }
.cmp-slot .sim-search input { width: 100%; box-sizing: border-box; }
.cmp-chosen { margin-top: 6px; font-size: 14px; }
.cmp-chosen span { font-size: 12px; color: var(--text-secondary); }
.cmp-chosen button { font: inherit; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.cmp-score { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.cmp-score .big { font-size: 36px; font-weight: 700; }
.cmp-facts { margin: 6px 0 14px; padding-left: 18px; font-size: 14px; }
.cmp-table { border-collapse: collapse; font-size: 14px; width: 100%; max-width: 40em; }
.cmp-table th, .cmp-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp-table thead th { font-weight: 600; }
.cmp-table tbody th { font-weight: 400; color: var(--text-secondary); width: 5.5em; }
.cmp-why { list-style: none; margin: 6px 0; padding: 0; max-width: 28em; font-size: 14px; }
.cmp-why li { position: relative; padding: 3px 8px; }
.cmp-why .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--surface-2); z-index: -1; border-radius: 3px; }
.cmp-why { isolation: isolate; }
.sim-side button.why { display: inline; width: auto; padding: 0; border: 0; font-size: 12px; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.sim-side .why-terms { margin-left: calc(3em + 4px); padding: 0 4px 7px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.sim-side .why-terms span { background: var(--surface-2); border-radius: 8px; padding: 1px 7px; }
.sim-side .why-terms i { font-style: normal; color: var(--text-secondary); }
.sim-side .why-terms em { font-style: normal; color: var(--text-secondary); }

/* poster hall map (Find talks) */
.hall { margin: 8px 0; }
.hall summary { cursor: pointer; color: var(--talk); font-size: 13px; }
.hall-ov { display: block; width: 100%; max-width: 640px; height: auto; margin-top: 8px; }
.hall-scroll { overflow-x: auto; margin-top: 8px; }
.hall-detail { display: block; max-width: none; }
.hl-hall { fill: var(--surface-2); stroke: #d6d4cf; }
.hl-b { fill: #fff; stroke: var(--text-secondary); stroke-width: 2; }
.hl-b.on { fill: var(--poster); fill-opacity: .25; stroke: var(--poster); stroke-width: 4; }
.hl-t { font-size: 24px; text-anchor: middle; dominant-baseline: middle; fill: var(--text-secondary); }
.hl-t.on { fill: var(--text-primary); font-weight: 700; }
.hl-s { fill: #fff; stroke: var(--rule); }
.hl-s.on { fill: var(--poster); stroke: var(--poster); }
.hl-n { font-size: 9px; text-anchor: middle; dominant-baseline: middle; fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hl-n.on { fill: #fff; font-weight: 700; }
.hl-sep { stroke: var(--text-primary); stroke-width: 2; }
.hl-gap { fill: var(--surface-2); stroke: var(--text-secondary); stroke-dasharray: 3 2; }
.sim-card .hall-scroll { display: block; margin-right: 0; max-width: 100%; }
.hl-dot { fill: var(--poster); stroke: #fff; stroke-width: 3; }
#sim-color { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 6px; font-size: 13px; cursor: pointer; }
#similar .toolbar { position: static; } /* Match by / search scroll away; only the card (phones) and Related header stick */
@media (max-width: 800px) { .sim-card { position: sticky; top: calc(var(--header-h, 58px) + var(--sim-tb-h, 56px)); z-index: 4; max-height: 38vh; overflow-y: auto; background: var(--surface-1); border-bottom: 1px solid var(--rule); padding-bottom: 4px; } } /* phones: the card stays under the sticky toolbar while the list scrolls; on desktop it scrolls away */
/* Related header and Most similar / Upcoming toggle stay put under the sticky card while the list scrolls with the page */
#similar.no-graph .sim-head { position: sticky; top: calc(var(--header-h, 58px) + var(--sim-tb-h, 56px)); z-index: 3; background: var(--surface-1); padding: 6px 0; margin: 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 800px) { #similar.no-graph .sim-head { top: calc(var(--header-h, 58px) + var(--sim-tb-h, 56px) + var(--sim-card-h, 0px)); } }
.sim-legendbox { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 60px); max-height: calc(100% - 50px); overflow-y: auto; background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 8px; font-size: 13px; }
.sim-legendbox > summary { cursor: pointer; color: var(--talk); }
.sim-legendbox .sim-legend { columns: 1; margin: 6px 0 2px; }
.hall-open { background: none; border: 0; padding: 0; margin: 8px 0; font: inherit; font-size: 13px; color: var(--talk); cursor: pointer; text-decoration: underline; }
.hall-dialog { border: 1px solid var(--rule); border-radius: 10px; padding: 36px 16px 16px; width: min(900px, 94vw); max-height: 90vh; background: var(--surface-1); color: var(--text-primary); box-shadow: 0 12px 40px rgb(0 0 0 / 0.3); }
.hall-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.hall-close { position: absolute; top: 4px; right: 8px; font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--text-secondary); }
.hall-dialog .hall-ov { margin-top: 0; max-width: none; }
.hall-title { margin: -24px 36px 10px 0; font-size: 18px; }
.hall-open { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--talk); border-radius: 6px; text-decoration: none; background: var(--surface-1); }
.sim-side button.hall-open.compact { position: absolute; right: 6px; bottom: 6px; display: inline-flex; width: auto; margin: 0; padding: 2px 8px; font-size: 12px; border: 1px solid var(--talk); color: var(--talk); text-decoration: none; }
.sim-side .hall-open.compact svg { width: 13px; height: 13px; }
.sim-side li:has(.hall-open.compact) .when { padding-right: 62px; }
.hall-open:hover { background: var(--surface-2); }
.hall-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.hall-dialog .hall-ov { padding: 10px; background: var(--surface-2); border-radius: 8px; box-sizing: border-box; }
.hall-dialog .hall-scroll { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); }
.hall-dialog .hall-scroll::before { content: "Poster block layout"; display: block; position: sticky; left: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); }
/* Find talks: make the search box the obvious place to start */
#similar .sim-search input { width: 18em; padding: 6px 10px 6px 32px; font-size: 15px; border: 2px solid var(--talk); border-radius: 8px; background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l4.5 4.5'/%3E%3C/svg%3E") no-repeat 9px center / 16px; }
#similar .sim-search input:focus { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--talk) 25%, transparent); }
.sim-methods { display: none; }
@media (max-width: 800px) { .sim-methods { display: inline; margin-left: 8px; font-size: 13px; font-weight: 400; } }

/* landscape page */
.ls-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.ls-bar .lbl { font-size: 13px; color: var(--text-secondary); }
.ls-bar input[type=search], .ls-bar input[type=text] { font: inherit; font-size: 14px; width: 17em; max-width: 100%; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; }
.ls-bar button:not(.ls-link) { font: inherit; font-size: 14px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--rule);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.ls-bar .seg button { padding: 4px 10px; }
.ls-check, .ls-years-menu label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.ls-check input, .ls-years-menu input { margin: 0; }
.ls-years-menu label:has(input:disabled) { cursor: default; }
.ls-years { position: relative; }
.ls-years summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; }
.ls-years summary::-webkit-details-marker { display: none; }
.ls-years summary::after { content: " \25BE"; color: var(--text-secondary); }
.ls-years-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 8; display: grid; gap: 8px; min-width: 11em; padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); }
.ls-years-menu > label { padding-bottom: 6px; border-bottom: 1px solid var(--rule); color: var(--text-primary); }
#ls-year-options { display: grid; gap: 6px; }
.ls-year-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ls-year-only { flex: none; }
.ls-link { font: inherit; font-size: 13px; color: var(--text-secondary); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.ls-link:hover { color: #b91c1c; }
.ls-info { font-size: 13px; color: var(--text-secondary); }
.ls-ac { position: relative; }
.ls-suggest { position: absolute; top: 100%; left: 0; z-index: 6; width: max(100%, 22em); max-width: 90vw; margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 300px; overflow: auto; background: var(--surface-1); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); }
.ls-suggest li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-primary); }
.ls-suggest li[aria-selected=true], .ls-suggest li[role=option]:hover { background: var(--surface-2); }
.ls-suggest li span:last-child { color: var(--text-secondary); font-size: 12px; }
.ls-suggest li small { color: var(--text-secondary); font-size: 12px; }
.ls-suggest li.group { cursor: default; padding: 6px 8px 2px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.ls-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.ls-legend i { display: block; width: 90px; height: 6px; border-radius: 3px; }
.ls-layers { list-style: none; margin: 8px 0 0; padding: 0 0 4px; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ls-layers li { flex: none; }
.ls-layers:empty { display: none; }
.ls-layers li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; font-size: 13px; background: var(--surface-1);
  border: 1px solid var(--rule); border-radius: 999px; max-width: 100%; }
.ls-layers .name { max-width: 20em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ls-layers .n { color: var(--text-secondary); font-size: 12px; }
.ls-layers input[type=color] { -webkit-appearance: none; appearance: none; flex: none; width: 14px; height: 14px; padding: 0; border: 1px solid rgb(0 0 0 / 0.25);
  border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.ls-layers input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ls-layers input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
.ls-layers input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }
#ls-labels { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ls-anno { position: relative; font-size: 12px; color: var(--text-secondary); }
.ls-anno summary { cursor: pointer; list-style: none; display: inline-block; padding: 0 2px; line-height: 1; color: var(--text-secondary); }
.ls-anno summary::-webkit-details-marker { display: none; }
.ls-anno summary::before { content: "\25B8"; display: inline-block; }
.ls-anno[open] summary::before { content: "\25BE"; }
.ls-anno[open] { z-index: 11; }
.ls-anno summary:hover, .ls-anno summary:focus-visible { color: var(--text-primary); }
.ls-anno-panel { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 10; display: grid; gap: 6px; min-width: 15em; padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
  font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.ls-anno-panel label { display: inline-flex; align-items: center; gap: 6px; }
.ls-anno-panel label:has(input:disabled) { opacity: 0.5; }
.ls-card-web { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ls-card-web-label { font-size: 12px; color: var(--text-secondary); }
.ls-card-web .seg { display: inline-flex; width: max-content; border-radius: 6px; }
.ls-card-web .seg button { background: color-mix(in srgb, var(--author-color) 18%, white); }
.ls-card-web .seg button[aria-pressed=true] { background: color-mix(in srgb, var(--author-color) 30%, white); border-color: color-mix(in srgb, var(--author-color) 55%, var(--rule)); }
.ls-card-merge { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ls-card-merge input[type=search] { box-sizing: border-box; width: min(22em, 70vw); padding: 5px 8px; font: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 6px; }
.ls-card-merge .ls-suggest { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; }
.ls-card-merge .ls-suggest li { display: flex; width: 100%; box-sizing: border-box; }
.ls-card-merge .ls-suggest li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ls-merged-authors { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ls-merged-authors li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.ls-merged-authors .x { border: 0; background: none; padding: 0 4px; font-size: 15px; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.ls-merged-authors .x:hover { color: #b91c1c; }
.ls-layers .x { border: 0; background: none; padding: 0 5px; font-size: 16px; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.ls-layers .x:hover { color: #b91c1c; }
.ls-stage { height: clamp(420px, 72vh, 760px); }
.ls-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ls-stage canvas:active { cursor: grabbing; }
.ls-cluster-control { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin: 8px 0 4px; padding: 8px 10px;
  background: var(--surface-1); border: 1px solid var(--rule); border-radius: 8px; }
.ls-cluster-heading { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.ls-cluster-toggle { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.ls-cluster-toggle input { margin: 0; }
.ls-cluster-settings { grid-column: 1 / -1; display: grid; gap: 10px; }
.ls-cluster-settings[hidden] { display: none; }
.ls-cluster-section-title { display: inline-block; font: inherit; font-size: 13px; font-weight: 650; color: var(--text-primary); background: none; border: 0; padding: 0; cursor: pointer; }
.ls-cluster-section-title:hover, .ls-cluster-section-title:focus-visible { color: var(--talk); }
.ls-cluster-section-title:focus-visible { outline: 2px solid var(--talk); outline-offset: 2px; border-radius: 3px; }
.ls-cluster-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 12px; list-style: none; margin: 3px 0 0; padding: 0; }
.ls-cluster-list:empty { display: none; }
.ls-cluster-list li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-primary); }
.ls-cluster-list li[tabindex] { cursor: pointer; }
.ls-cluster-list li:focus-visible { outline: 2px solid var(--talk); outline-offset: 2px; border-radius: 3px; }
.ls-cluster-list li.is-hidden { opacity: 0.48; text-decoration: line-through; }
.ls-cluster-swatch { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.ls-cluster-list .n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ls-cluster-info { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.4; color: var(--text-secondary); }
@media (max-width: 600px) {
  .ls-cluster-control { padding: 7px 8px; }
  .ls-cluster-list { gap: 4px 9px; }
}
.ls-reset { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 0; font-size: 12px; cursor: pointer;
  background: none; border: none; color: #555; text-decoration: underline; }
.ls-reset:hover { color: #222; }
.ls-map-legend { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: max-content; max-width: calc(100% - 32px); max-height: calc(100% - 24px); overflow: auto;
  padding: 5px 9px; background: var(--surface-1); border: 1px solid var(--rule); border-radius: 7px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); font-size: 12px; }
.ls-map-legend[open] { width: min(360px, calc(100% - 32px)); }
.ls-map-legend summary { display: flex; align-items: center; gap: 6px; width: max-content; cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; }
.ls-map-legend summary::-webkit-details-marker { display: none; }
.ls-map-legend summary::before { content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid currentColor; transition: transform 150ms ease; }
.ls-map-legend[open] summary::before { transform: rotate(90deg); }
.ls-map-legend ul { display: grid; gap: 7px; list-style: none; margin: 8px 0 2px; padding: 0; }
.ls-map-legend li { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 7px; line-height: 1.35; }
.ls-legend-symbol { position: relative; display: inline-block; justify-self: center; color: #168f88; }
.ls-legend-label { width: 12px; height: 12px; }
.ls-legend-label::before, .ls-legend-label::after { position: absolute; content: ""; background: #76b7b2; }
.ls-legend-label::before { left: 5px; top: 0; width: 2px; height: 12px; }
.ls-legend-label::after { left: 0; top: 5px; width: 12px; height: 2px; }
.ls-legend-coauthor { width: 8px; height: 8px; border-radius: 50%; background: #737a84; }
.ls-legend-similar { width: 16px; height: 0; border-top: 2px solid #737a84; transform: rotate(-25deg); }
.ls-legend-similar::after { position: absolute; content: ""; right: 2px; top: -4px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: #737a84; }
.ls-legend-target { width: 13px; height: 13px; border: 1.5px solid #76b7b2; border-radius: 50%; }
.ls-legend-target::before, .ls-legend-target::after { position: absolute; content: ""; background: #76b7b2; }
.ls-legend-target::before { left: 5px; top: -3px; width: 1.5px; height: 17px; }
.ls-legend-target::after { left: -3px; top: 5px; width: 17px; height: 1.5px; }
.ls-legend-path { width: 16px; height: 12px; border-top: 1.5px dashed #76b7b2; transform: rotate(-25deg); }
.ls-legend-path::before, .ls-legend-path::after { position: absolute; content: ""; top: -4px; width: 5px; height: 5px; border: 1.5px solid #76b7b2; border-radius: 50%; }
.ls-legend-path::before { left: 0; background: white; }
.ls-legend-path::after { right: 0; background: #76b7b2; }
.ls-tip .who { font-weight: 600; }
.ls-tip .who span { display: inline; width: auto; font-weight: 400; color: var(--text-secondary); }
.ls-tip div + div { margin-top: 3px; }
.ls-tip .dim { color: var(--text-secondary); }
.ls-count { margin: 0; font-size: 12px; }