@font-face {
  font-family: "Public Sans";
  src: url("/fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/PublicSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ui-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-ink: #1d2127;
  --ui-muted: #6b7280;
  --ui-faint: #8b929c;
  --ui-line: rgba(15, 23, 42, 0.09);
  --ui-surface: #fff;
  --ui-hover: rgba(15, 23, 42, 0.055);
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08);
  --ui-radius: 12px;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fafafa;
}

#map {
  position: relative;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: default;
  touch-action: none;
}

/* Cursor. map.js sets data-cursor: empty is the plain arrow, "node" is a hovered record
   (after the same rest as the highlight, look.hover.delay), "drag" is while dragging. */

#map[data-cursor="node"] {
  cursor: pointer;
}

#map[data-cursor="drag"] {
  cursor: grabbing;
}

/* Hover focus. The hovered record, its direct connections and the records at their far
   ends are drawn sharp on #map-focus; everything else stays on #map, which steps back.
   The timing and amounts come from look.hover in map.js. */

#map-focus {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* Keep the crisp focus drawing above #map's filtered stacking context. Without an explicit
   layer order WebKit can leave only the blurred base copy of small organization records visible. */

#map {
  transition: filter var(--focus-fade, 180ms) ease, opacity var(--focus-fade, 180ms) ease;
}

#map.is-dimmed {
  filter: blur(var(--focus-blur, 2.5px));
  opacity: var(--focus-dim, 0.35);
}

/* Centred on a selected record, everything else steps much further back (look.center). */
#map.is-dimmed.is-centered {
  filter: blur(var(--center-blur, 3px));
  opacity: var(--center-dim, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  #map {
    transition: none;
  }
}

/* Record card, beside the highlighted record. card.js fills it from the record and moves it
   with the record every frame; its opacity follows the highlight fade. */

.node-card {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 280px;
  padding: 12px 14px;
  color: var(--ui-ink);
  font-family: var(--ui-font);
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 50%;
  will-change: transform, opacity;
}

.node-card[hidden] {
  display: none;
}

.node-card-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 500;
}

.node-card-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.node-card-name {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.node-card-description {
  margin: 4px 0 0;
  color: var(--ui-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.node-card-section {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-line);
}

/* Patterns to check (card.js patternSection): a heading, then a row and a note per lead. */
.node-card-heading {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ui-faint);
}

.node-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 12.5px;
}

.node-card-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-muted);
}

.node-card-swatch {
  flex: none;
  width: 12px;
  height: 3px;
  border-radius: 2px;
}

.node-card-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A bill's support and oppose rows add a third column: the estimated lobbying money. */
.node-card-row.has-extra {
  display: grid;
  grid-template-columns: 1fr auto auto;
}

.node-card-extra {
  min-width: 84px;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Money rows: an arrow pointing left for money in, right for money out. */
.node-card-arrow {
  flex: none;
  width: 16px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.node-card-note {
  color: var(--ui-faint);
  font-size: 11px;
}

.node-card-note a {
  color: var(--ui-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.node-card-note a:hover {
  color: var(--ui-ink);
}

/* Record panel, on the right below the search field. panel.js opens it when a record is
   selected (a click, or a search pick) and fills it, starting with the record's card. */

.panel {
  position: fixed;
  top: 72px;
  right: 16px;
  bottom: 16px;
  z-index: 8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  color: var(--ui-ink);
  font-family: var(--ui-font);
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.16s ease;
}

.panel.is-open {
  opacity: 1;
  transform: none;
}

.panel[hidden] {
  display: none;
}

.panel-body {
  flex: 1;
  min-height: 0;
  padding: 24px 24px 28px;
  overflow-y: auto;
}

.panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}

.panel-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.panel-close:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}

.panel-close:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 1px;
}

/* The card at the top of the panel: the hover card's contents, a little larger, kept clear of
   the close button. */
.panel-card .node-card-kind {
  padding-right: 32px;
}

.panel-card .node-card-name {
  margin-top: 6px;
  padding-right: 24px;
  font-size: 17px;
}

.panel-card .node-card-description {
  margin-top: 6px;
  font-size: 13px;
}

.panel-card .node-card-row {
  font-size: 13px;
}

/* In the panel, a record's summary rows (support and oppose, positions, money in and out, authored
   bills) sit together in one padded box, with room around the notes. Groups of rows inside it are
   split by a thin rule. */
.panel-summary {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.035);
}

.panel-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.panel-action {
  min-height:38px; border:1px solid var(--ui-line); border-radius:10px; background:#fff;
  color:var(--ui-ink); font:600 12.5px/1 var(--ui-font); cursor:pointer;
}
.panel-action:hover,
.panel-action[aria-pressed="true"] { border-color:var(--ui-ink); background:var(--ui-ink); color:#fff; }

/* Actual liquid-gooey surfaces. The SVG silhouette carries the white material and shadow while
   the native buttons and panels remain above it, interactive and crisp. */
#liquid-ui { pointer-events:none; }
.liquid-menu-group,.liquid-edge-group { position:fixed !important; inset:0; width:100vw; height:100vh; pointer-events:none; overflow:visible !important; }
.liquid-menu-group { z-index:12; }
.liquid-edge-group { z-index:20; }
.liquid-native-host { display:block; width:100%; height:100%; pointer-events:auto; }
.liquid-native-placeholder { display:block; flex:0 0 auto; visibility:hidden; pointer-events:none; }
.liquid-native-trigger,.liquid-native-target { position:static !important; inset:auto !important; z-index:auto !important; box-sizing:border-box; width:100% !important; max-width:none; }
.liquid-native-trigger {
  height:100% !important; border-color:transparent !important; background:transparent !important;
  box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.liquid-native-target { opacity:0; transition:opacity 140ms ease,box-shadow 180ms ease; }
.liquid-native-target.is-liquid-visible { opacity:1; transition-delay:90ms,0ms; }
.goo-trigger { position:relative; isolation:isolate; background:var(--ui-surface); }
.liquid-native-trigger[aria-expanded="true"] { background:transparent; }
.goo-trigger > * { position:relative; z-index:2; }
.liquid-native-target:is(.calendar,.browse,.bridge,.legend),.liquid-edge-target {
  border-color:transparent; background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.liquid-native-trigger.is-liquid-settled,.liquid-native-target.is-liquid-settled {
  border-color:var(--liquid-native-border) !important;
  background:var(--liquid-native-background) !important;
  box-shadow:var(--liquid-native-shadow) !important;
  -webkit-backdrop-filter:var(--liquid-native-webkit-backdrop) !important;
  backdrop-filter:var(--liquid-native-backdrop) !important;
  transition-delay:0ms !important;
}
.liquid-menu-group > [data-gooey-svg],.liquid-edge-group > [data-gooey-svg] {
  opacity:1;
  transition:opacity 180ms ease;
}
.liquid-menu-group.is-handing-off > [data-gooey-svg],
.liquid-edge-group.is-handing-off > [data-gooey-svg] { opacity:0; }
.liquid-edge-target {
  border-color:transparent !important; background:transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.liquid-edge-anchor { display:block; width:100%; height:100%; border-radius:999px; }
.liquid-sidebar-source {
  transform:none !important; opacity:1 !important; border-color:transparent !important;
  background:transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* Hook line: a persistent notebook for records the reader wants to keep while exploring. */
.hook-tray {
  position:fixed; right:16px; bottom:72px; z-index:11; box-sizing:border-box;
  width:min(320px,calc(100vw - 32px)); padding:15px; border:1px solid rgba(15,23,42,.11);
  border-radius:16px; background:rgba(255,255,255,.94); color:var(--ui-ink); font-family:var(--ui-font);
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 48px rgba(15,23,42,.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  transition:box-shadow .16s ease;
}
.hook-tray[hidden] { display:none; }
.hook-tray-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.hook-title { display:block; font-size:15px; font-weight:600; }
#hook-count { display:block; margin-top:3px; color:var(--ui-muted); font-size:11.5px; }
.hook-clear { padding:2px 0; border:0; background:none; color:var(--ui-muted); font:12px var(--ui-font); text-decoration:underline; cursor:pointer; }
.hook-list { display:grid; margin:12px 0; padding:0; list-style:none; }
.hook-item { position:relative; display:grid; grid-template-columns:12px minmax(0,1fr) 24px; align-items:center; gap:8px; min-height:34px; }
.hook-item:not(:last-child)::after { content:""; position:absolute; left:5px; top:23px; bottom:-11px; border-left:1px solid #c8cdd4; }
.hook-dot { width:10px; height:10px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #7c8490; }
.hook-name,.hook-remove { border:0; background:none; color:var(--ui-ink); font:12.5px var(--ui-font); cursor:pointer; }
.hook-name { overflow:hidden; padding:7px 0; text-align:left; white-space:nowrap; text-overflow:ellipsis; }
.hook-name:hover { text-decoration:underline; text-underline-offset:3px; }
.hook-remove { color:var(--ui-muted); font-size:18px; }
.hook-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; border-top:1px solid var(--ui-line); padding-top:10px; }
.hook-actions button { min-height:34px; border:1px solid var(--ui-line); border-radius:9px; background:#fff; color:var(--ui-ink); font:600 11.5px var(--ui-font); cursor:pointer; }
.hook-actions button:hover:not(:disabled) { border-color:#a8afb8; background:#f5f6f7; }
.hook-actions button:disabled { opacity:.35; cursor:default; }
.hook-status { margin:0 0 8px; color:var(--ui-muted); font-size:11.5px; }
.hook-status:empty { display:none; }


/* Share studio: the export is composed as a designed relationship card, not a browser screenshot. */
.share-studio { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(15,23,42,.35); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); font-family:var(--ui-font); }
.share-studio[hidden] { display:none; }
.share-studio-card { box-sizing:border-box; width:min(880px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:20px; border:1px solid rgba(15,23,42,.11); border-radius:20px; background:#fff; box-shadow:0 28px 90px rgba(15,23,42,.24); animation:share-studio-enter 420ms cubic-bezier(.16,1,.3,1); }
@keyframes share-studio-enter { 0%{opacity:0;transform:translateY(28px) scale(.92);border-radius:42px} 100%{opacity:1;transform:none;border-radius:20px} }
.share-studio-head { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:16px; }
.share-studio-head span { color:var(--ui-muted); font-size:11px; }
.share-studio-head h2 { margin:3px 0 0; font-size:19px; font-weight:600; }
#share-studio-close { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--ui-line); border-radius:50%; background:#fff; color:var(--ui-muted); cursor:pointer; }
#share-studio-close svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.share-preview { overflow:hidden; border:1px solid rgba(15,23,42,.09); border-radius:16px; background:#f6f7f8; box-shadow:0 12px 32px rgba(15,23,42,.1); }
.share-preview canvas { display:block; width:100%; height:auto; }
.share-detail { margin:18px 0 0; padding:0; border:0; }
.share-detail legend { margin-bottom:8px; color:var(--ui-muted); font-size:11.5px; }
#share-detail-options, #share-template-options { display:flex; flex-wrap:wrap; gap:7px; }
#share-detail-options button, #share-template-options button { min-height:34px; padding:0 14px; border:1px solid var(--ui-line); border-radius:999px; background:#fff; color:var(--ui-ink); font:12px var(--ui-font); cursor:pointer; }
#share-detail-options button[aria-pressed="true"], #share-template-options button[aria-pressed="true"] { border-color:#1d2127; background:#1d2127; color:#fff; }
.share-studio-licence { margin:10px 0 0; color:var(--ui-muted); font-size:11.5px; line-height:1.5; }
.share-studio-licence a { color:inherit; }
.share-studio-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--ui-line); }
.share-studio-actions button { min-height:40px; padding:0 18px; border:1px solid var(--ui-line); border-radius:10px; background:#fff; color:var(--ui-ink); font:600 12.5px var(--ui-font); cursor:pointer; }
.share-studio-actions .is-primary { border-color:#1d2127; background:#1d2127; color:#fff; }
.share-studio-status { min-height:14px; margin:8px 0 0; color:var(--ui-muted); font-size:11.5px; text-align:right; }
@media(max-width:600px){.share-studio{padding:10px}.share-studio-card{max-height:calc(100vh - 20px);padding:14px;border-radius:16px}.share-studio-actions button{flex:1}.share-preview{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.hook-tray.is-entering,.hook-item.is-arriving,.share-studio-card{animation:none}}

@media (min-width:641px) {
  body:has(.panel:not([hidden])) .hook-tray { right:calc(24px + min(360px,calc(100vw - 32px))); }
}
@media (max-width:640px) {
  .hook-tray { right:16px; bottom:16px; max-height:42vh; overflow:auto; }
  body:has(.panel:not([hidden])) .hook-tray { bottom:calc(55vh + 24px); }
}

.panel-summary .node-card-section {
  gap: 10px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.panel-summary .node-card-section + .node-card-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-line);
}

.panel-summary .node-card-row {
  gap: 12px;
}

.panel-summary .has-extra .node-card-label {
  white-space: nowrap;
}

.panel-summary .node-card-extra {
  min-width: 64px;
}

.panel-summary .node-card-note {
  margin-top: -4px;
  font-size: 11.5px;
}

.panel-summary .is-stances .node-card-note {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-line);
}

/* The name links to the record's official page, with a small outbound mark. */
.panel-name-link {
  color: inherit;
  text-decoration: none;
}

.panel-name-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.panel-link-mark {
  width: 14px;
  height: 14px;
  margin-left: 3px;
  vertical-align: -1px;
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-name-link:hover .panel-link-mark {
  stroke: var(--ui-ink);
}

/* Lists under the card: who is on each side and how much. */
.panel-section {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-line);
}

.panel-heading {
  margin: 0;
  font: inherit;
}

/* A list's heading is its open and close button: label, count, and a chevron that turns down
   when the list is open. */
.panel-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ui-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.panel-toggle:hover {
  color: var(--ui-ink);
}

.panel-toggle:focus-visible,
.panel-more:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

.panel-count {
  margin-left: auto;
  color: var(--ui-ink);
  font-size: 12px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.panel-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.panel-toggle[aria-expanded="true"] .panel-chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .panel-chevron {
    transition: none;
  }
}

.panel-list {
  display: grid;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.panel-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 13px;
}

.panel-item-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.panel-item-amount {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.panel-more {
  margin-top: 4px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ui-muted);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.panel-more:hover {
  color: var(--ui-ink);
}

/* On a narrow screen the panel rises from the bottom instead, over at most about half the map. */
@media (max-width: 600px) {
  .panel {
    top: auto;
    max-height: 55vh;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

/* A summary label is a link to its glossary entry. */
.node-card-term {
  color: inherit;
  text-decoration: none;
}

.node-card-term:hover {
  color: var(--ui-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A connection chain in the record panel: records in order, each step between them. */
.panel-chain {
  display: grid;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.panel-chain-record {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.panel-chain-name {
  overflow: hidden;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--ui-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.panel-chain-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-chain-step {
  margin-left: 3px;
  padding: 6px 0 6px 15px;
  border-left: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: 12.5px;
}

/* The date window button (calendar.js) and the panel it opens. The chosen range stays in the panel. */
.map-tools-left {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui-font);
}

/* The wordmark, back to the homepage. Same surface as the round tool buttons beside it, but a
   pill holding the mark and the name, so it reads as the site's identity, not another tool. */
.map-home {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  color: var(--ui-ink);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.map-home svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.map-home:hover {
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 14px 34px rgba(15, 23, 42, 0.1);
}

.map-home:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.calendar {
  position: fixed;
  top: 78px;
  left: 253px;
  z-index: 12;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 80px));
  min-height: 340px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  transition: box-shadow 0.16s ease;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 16px;
}

.calendar-head h2,
.legend-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.calendar-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-preset {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.calendar-preset[aria-pressed="true"] {
  border-color: #1f2937;
  background: #1f2937;
  color: #fff;
}

.calendar-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #f8f9fa;
}

.calendar-fields label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 12px;
}

.calendar-fields input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  font-size: 13px;
}

.calendar-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.calendar-save {
  min-width: 88px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #1f2937;
  border-radius: 10px;
  background: #1f2937;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.calendar-save:disabled {
  border-color: var(--ui-line);
  background: var(--ui-hover);
  color: var(--ui-faint);
  cursor: default;
}

/* The page's heading, for readers of the document rather than the canvas: search engines, screen readers. */
.map-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Filter: the funnel button beside the calendar (filter.js). Laid out like the calendar, one button further right. */
.filter {
  position: fixed;
  top: 78px;
  left: 301px;
  z-index: 12;
  box-sizing: border-box;
  width: min(380px, calc(100vw - 80px));
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  color: var(--ui-ink);
  font-family: var(--ui-font);
}

.filter-head {
  margin-bottom: 14px;
}

.filter-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.filter-summary {
  margin: 4px 0 0;
  color: var(--ui-muted);
  font-size: 12.5px;
}

.filter-label {
  margin: 14px 0 6px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.filter-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  font-size: 13px;
  cursor: pointer;
}

.filter-check input {
  margin: 0;
  accent-color: #1f2937;
}

.filter-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.filter-fields {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #f8f9fa;
}

.filter-fields label:not(.filter-check) {
  display: grid;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 12px;
}

.filter-fields select {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  font-size: 13px;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.filter-apply,
.filter-reset {
  min-width: 88px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #1f2937;
  border-radius: 10px;
  background: #1f2937;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.filter-reset {
  background: #fff;
  color: var(--ui-ink);
}

.filter-apply:disabled,
.filter-reset:disabled {
  border-color: var(--ui-line);
  background: var(--ui-hover);
  color: var(--ui-faint);
  cursor: default;
}

/* Browse: every record as folders, from the list button on the left (browse.js). Left offset
   matches #tool-browse's rendered position (16px map-tools-left inset + the 176.7px .map-home
   pill + 8px gap), not the container's own left, since .map-home now sits before it. */
.browse {
  position: fixed;
  top: 78px;
  left: 201px;
  z-index: 12;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 104px);
  padding: 16px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  transition: box-shadow 0.16s ease;
}

.browse[hidden] {
  display: none !important;
}

.browse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.browse-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.browse-note {
  margin: 6px 0 10px;
  color: var(--ui-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.browse-body {
  overflow-y: auto;
}

.browse-group > summary,
.browse-folder > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid var(--ui-line);
  cursor: pointer;
  font-size: 13.5px;
}

.browse-group > summary {
  font-weight: 600;
}

.browse-folder {
  margin-left: 10px;
}

.browse-folder > summary {
  font-size: 13px;
  font-weight: 400;
}

.browse-count {
  color: var(--ui-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.browse-list {
  display: grid;
  margin: 2px 0 8px 10px;
}

.browse-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.browse-item:hover {
  background: var(--ui-hover);
}

.browse-item-kind {
  flex: none;
  color: var(--ui-muted);
  font-size: 11.5px;
}

.browse-more {
  justify-self: start;
  margin: 4px 0 0 6px;
  padding: 6px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .browse {
    top: 130px;
    left: 16px;
    max-height: calc(100vh - 160px);
  }
}

/* The legend, from the round ? button in the bottom right (legend.js). */
.map-help {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--ui-shadow);
  color: var(--ui-muted);
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.16s ease;
}

.map-help:hover,
.map-help.is-active {
  border-color: rgba(15, 23, 42, 0.2);
  color: var(--ui-ink);
}

.legend {
  position: fixed;
  right: 16px;
  bottom: 78px;
  z-index: 12;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  transition: box-shadow 0.16s ease;
}

/* Beside the record panel on a wide screen; out of its way on a phone, where the panel spans the width. */
@media (min-width: 641px) {
  body:has(.panel:not([hidden])) .map-help,
  body:has(.panel:not([hidden])) .legend {
    right: calc(24px + min(360px, calc(100vw - 32px)));
  }
}

@media (max-width: 640px) {
  body:has(.panel:not([hidden])) .map-help {
    display: none;
  }
}

.legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.legend-section h3 {
  margin: 14px 0 8px;
  color: var(--ui-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 13.5px;
}

.legend-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 999px;
}

.legend-line {
  flex: none;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}

.legend-note {
  margin: 8px 0 0;
  color: var(--ui-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.legend-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  align-items: center;
  font-size: 13px;
}

.legend-key-set {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.legend-keys kbd {
  min-width: 14px;
  padding: 1px 6px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 12px;
  text-align: center;
}

.legend-links {
  display: flex;
  gap: 16px;
  margin: 16px 0 0;
  font-size: 13.5px;
}

.legend-links a {
  color: var(--ui-ink);
}

/* Loading the dataset (index.html, map.js loading). */
.map-loading {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(250, 250, 250, 0.94);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  transition: opacity 0.35s ease;
}

.map-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

/* The orb, with a ring around it that fills as the dataset arrives. */
.map-loading-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
}

.map-loading-ring {
  position: absolute;
  inset: 0;
  width: 104px;
  height: 104px;
  transform: rotate(-90deg);
}

.map-loading-ring circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.map-loading-ring-track {
  stroke: rgba(15, 23, 42, 0.08);
}

.map-loading-ring-line {
  stroke: rgba(15, 23, 42, 0.55);
  stroke-dasharray: 0 289;
  transition: stroke-dasharray 0.2s ease;
}

.map-loading-percent {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--ui-ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The orb is drawn first; the percentage fades in once it is on screen (orbs.js sets data-orb-ready). */
.map-loading-percent,
.map-loading-ring {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.map-loading:has(canvas[data-orb-ready]) .map-loading-percent,
.map-loading:has(canvas[data-orb-ready]) .map-loading-ring {
  opacity: 1;
}

.map-tools-left [hidden],
.calendar[hidden],
.calendar canvas[hidden],
.filter[hidden],
.legend[hidden],
.map-loading[hidden] {
  display: none !important;
}

@media (max-width: 780px) {
  .map-tools-left {
    top: 68px;
  }

  /* The wordmark moves up beside the search field and shrinks to just the mark: a fixed
     position pulls it out of .map-tools-left's flex row, so Browse and Calendar close the
     gap behind it and sit where they did before the wordmark existed. */
  .map-home {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .map-home span {
    display: none;
  }

  .calendar {
    top: 130px;
    left: 68px;
    width: calc(100vw - 84px);
    min-height: min(408px, calc(100dvh - 160px));
    max-height: calc(100dvh - 160px);
    padding: 16px;
  }

  .calendar-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-save {
    width: 100%;
  }
}

/* Views: four cards in the middle of the screen (views.js). */
.views {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.28);
  font-family: var(--ui-font);
}

.views[hidden] {
  display: none !important;
}

.views-sheet {
  box-sizing: border-box;
  width: min(640px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  color: var(--ui-ink);
}

.views-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 14px;
}

.views-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.views-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}

.views-close:hover {
  background: var(--ui-hover);
}

.views-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.views-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 560px) {
  .views-grid {
    grid-template-columns: 1fr;
  }
}

.views-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.views-card:hover {
  border-color: #9ca3af;
}

.views-card[aria-pressed="true"] {
  border-color: #1f2937;
  box-shadow: inset 0 0 0 1px #1f2937;
}

.views-card-title {
  font-size: 15px;
  font-weight: 600;
}

.views-card-text {
  color: var(--ui-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.views-card-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 6px;
}

.views-card-dots span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

/* A connection bridge result no chain of connections reaches from the first pick: shown, but it can't be picked. */
.bridge-results .search-result.is-unreachable {
  opacity: 0.45;
  cursor: default;
}

/* "Show all records", bottom left, and the warning before it draws everything. */
.map-all {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--ui-shadow);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 13px;
  cursor: pointer;
}

/* On a phone the record panel spans the width, so the box steps aside while it is open. */
@media (max-width: 640px) {
  body:has(.panel:not([hidden])) .map-all {
    display: none;
  }
}

.map-all input {
  margin: 0;
  accent-color: #1f2937;
}

.map-warning {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.35);
  font-family: var(--ui-font);
}

.map-warning[hidden] {
  display: none !important;
}

.map-warning-card {
  box-sizing: border-box;
  width: min(420px, 100%);
  padding: 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  color: var(--ui-ink);
}

.map-warning-card h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.map-warning-card p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.5;
}

.map-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.map-warning-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.map-warning-actions button.is-primary {
  border-color: #1f2937;
  background: #1f2937;
  color: #fff;
}

/* A name in a record panel list that is a record opens it. */
.panel-item-name.is-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-item-name.is-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Map tools, round buttons to the left of the search field, and the connection bridge. */
.map-tools {
  position: fixed;
  top: 16px;
  right: calc(24px + min(360px, calc(100vw - 32px)));
  z-index: 10;
  display: flex;
  gap: 8px;
  font-family: var(--ui-font);
}

.map-tool {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--ui-shadow);
  color: var(--ui-muted);
  cursor: pointer;
  transition: box-shadow 0.16s ease;
}

.map-tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-tool:hover,
.map-tool.is-active {
  border-color: rgba(15, 23, 42, 0.2);
  color: var(--ui-ink);
}

.map-tool[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

.map-tool:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.bridge {
  position: fixed;
  top: 78px;
  right: calc(76px + min(360px, calc(100vw - 32px)));
  z-index: 11;
  box-sizing: border-box;
  width: 300px;
  padding: 14px;
  color: var(--ui-ink);
  font-family: var(--ui-font);
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(15, 23, 42, 0.12);
  transition: box-shadow 0.16s ease;
}

.bridge[hidden],
.bridge [hidden] {
  display: none !important;
}

.bridge-title {
  margin-bottom: 4px;
  font-size: 13.5px;
  font-weight: 600;
}

.bridge-field {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--ui-muted);
  font-size: 12.5px;
}

.bridge-field input {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ui-ink);
  font: inherit;
  font-size: 13px;
}

.bridge-field input:focus {
  border-color: rgba(15, 23, 42, 0.25);
}

.bridge-results {
  max-height: 220px;
  margin: 6px 0 0 44px;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.bridge-message {
  margin: 10px 0 0;
  color: var(--ui-muted);
  font-size: 12.5px;
}

@media (max-width: 780px) {
  .map-tools {
    top: 68px;
    right: 16px;
  }

  .bridge {
    top: 130px;
    right: 68px;
    width: calc(100vw - 80px);
  }
}

/* Search, top right */

.search {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: min(360px, calc(100vw - 32px));
  font-family: var(--ui-font);
}

/* Narrow enough that the wordmark sheds its name (above) and becomes a plain circle beside
   the field, so the field gives up its own right-anchored width for a left one next to it. */
@media (max-width: 780px) {
  .search {
    left: 68px;
    width: auto;
  }
}

.search [hidden] {
  display: none !important;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px 0 14px;
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-field:focus-within {
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12);
}

.search-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}

#search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-ink);
  font: inherit;
  font-size: 14px;
}

#search-input::placeholder {
  color: var(--ui-faint);
}

.search-shortcut {
  flex: none;
  padding: 3px 6px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ui-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.search-field:focus-within .search-shortcut {
  display: none;
}

.search-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}

.search-clear svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.search-clear:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}

.search-clear:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 1px;
}

.search-results {
  max-height: min(420px, calc(100vh - 96px));
  margin: 8px 0 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--ui-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(15, 23, 42, 0.12);
}

.search-result {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.search-result[aria-selected="true"] {
  background: var(--ui-hover);
}

.search-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.search-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.search-name,
.search-detail {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-name {
  color: var(--ui-ink);
  font-size: 13.5px;
  font-weight: 500;
}

.search-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ui-muted);
  font-size: 12px;
}

/* The kind, then a thin vertical rule, then the detail. */
.search-kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-ink);
  opacity: 0.72;
}

.search-kind::after {
  content: "";
  width: 1px;
  height: 10px;
  background: rgba(15, 23, 42, 0.2);
}

.search-detail {
  min-width: 0;
}

.search-empty {
  padding: 12px 10px;
  color: var(--ui-muted);
  font-size: 13px;
}

/* The canvas already supplies the visual depth. Backdrop filters force WebKit to re-composite
   large live regions whenever the graph paints, so map chrome stays opaque and inexpensive. */
.node-card,
.panel,
.hook-tray,
.share-studio,
.map-help,
.map-all,
.map-tool,
.map-home,
.bridge,
.search-field,
.search-results {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}