:root {
  --primary: #00529b;
  --primary-dark: #003a6e;
  --bg: #f7f8fb;
  --card: #ffffff;
  --text: #1c2333;
  --muted: #6b7382;
  --border: #e5e7ee;
  /* Chip track minima as rem so they scale with the root font size. */
  --chip-min-code: 8.5rem;
  --chip-min-plan: 17rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 3vw, 1.5rem);
}

/* Three-column shell: filter rail on the left, content in the middle, glossary
   panel on the right. The grid columns are CSS variables so the JS toggle
   handler can swap collapsed widths without rewriting the whole rule. */
.app-shell {
  --col-left: minmax(15rem, 1.4fr);
  --col-right: minmax(13rem, 1fr);
  max-width: 110rem;
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 3fr) var(--col-right);
  gap: 1.5rem;
  align-items: start;
}
.app-shell.left-collapsed { --col-left: 2.5rem; }
.app-shell.right-collapsed { --col-right: 2.5rem; }
.app-shell .content { min-width: 0; }

.panel {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: 1rem;
  transition: padding .15s ease;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.panel-toggle {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: .35rem;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  padding: 0;
}
.panel-toggle:hover { background: #f1f3f8; color: var(--text); }
.panel-toggle-glyph {
  width: 0; height: 0;
  border-style: solid;
  border-width: .35rem .45rem .35rem 0;
  border-color: transparent currentColor transparent transparent;
}
.panel[data-panel="right"] .panel-toggle-glyph {
  border-width: .35rem 0 .35rem .45rem;
  border-color: transparent transparent transparent currentColor;
}
.panel.collapsed .panel-toggle-glyph {
  transform: rotate(180deg);
}
.panel.collapsed {
  padding: .5rem .35rem;
  overflow: hidden;
}
.panel.collapsed .panel-header {
  flex-direction: column;
  gap: .35rem;
}
.panel.collapsed .sidebar-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: .25rem 0 0;
  white-space: nowrap;
  font-size: .7rem;
}
.panel.collapsed .panel-body { display: none; }
.sidebar-title {
  margin: 0 0 .75rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar .reference-block + .reference-block { margin-top: 1.25rem; }

.glossary-subhead {
  margin: 1.25rem 0 .5rem;
  font-size: .75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.glossary-list {
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
}
.glossary-list dt {
  font-weight: 600;
  margin-top: .6rem;
}
.glossary-list dt:first-child { margin-top: 0; }
.glossary-list dd {
  margin: .15rem 0 0;
  color: var(--text);
  opacity: .85;
}

/* Stack: glossary above content above sidebar would feel weird, so on narrow
   viewports we collapse to a single column with sidebar -> content -> glossary
   reading order. */
@media (max-width: 72rem) {
  .app-shell { grid-template-columns: var(--col-left) minmax(0, 3fr); }
  .info-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 56rem) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* On mobile, "collapsed" means hide the body vertically — the panel stays
     full-width but only its header is visible. The vertical title trick used
     on desktop would look odd here, so reset to horizontal. */
  .panel.collapsed { padding: .65rem 1rem; }
  .panel.collapsed .panel-header { flex-direction: row; }
  .panel.collapsed .sidebar-title {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: .8rem;
  }
  /* Caret rotates vertically on mobile (panels collapse vertically here, not
     horizontally). Expanded → up arrow (click to fold up). Collapsed → the
     existing rotate(180deg) flips it down. Same shape for both panels. */
  .panel-toggle-glyph,
  .panel[data-panel="right"] .panel-toggle-glyph {
    border-width: 0 .35rem .45rem .35rem;
    border-color: transparent transparent currentColor transparent;
  }
}

.hero {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.hero h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  letter-spacing: -0.02em;
}
.hero .lede { margin: 0; opacity: .9; max-width: 45rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

h2 { margin-top: 0; font-size: 1.15rem; letter-spacing: -0.01em; }

.search-card { display: flex; flex-direction: column; gap: 1.25rem; }
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem 1rem;
}
.search-row label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .9rem; color: var(--muted);
}
.search-row .grow { flex: 1 1 15rem; }
.search-row input[type="text"] {
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: .3rem;
  font: inherit;
  background: #fff;
  width: 100%;
}
.search-row button {
  padding: .55rem 1.25rem;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: .3rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.search-row button:hover { background: var(--primary-dark); }
.search-row button:disabled { background: #aaa; cursor: not-allowed; }
#query-stats { color: var(--muted); font-size: .85rem; flex-basis: 100%; }

.results-grid {
  /* Grow with viewport; never so tall that the toolbar disappears on mobile. */
  height: min(75vh, 37.5rem);
  width: 100%;
}

.priced-note { margin-top: .5rem; }
.priced-note:empty { display: none; }

.grid-section { margin-top: 1.25rem; }
.grid-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.grid-section-header h2,
.grid-section-header h3 { margin: 0; }
.grid-section-header h3 {
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.aux-grid { width: 100%; }
.export-btn {
  padding: .35rem .8rem;
  font-size: .8rem;
  background: var(--primary, #2563eb);
  color: #fff;
  border: 0;
  border-radius: .375rem;
  cursor: pointer;
}
.export-btn:hover { background: var(--primary-dark, #1d4ed8); }

/* leaderboard styles removed: now rendered by AG Grid (see #leaderboard-grid) */
.grid-card { padding-bottom: 1rem; }

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.results-header h2 { margin: 0; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 1rem;
}
.summary-grid + .summary-grid { margin-top: 1rem; }
.summary-financials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 30rem) {
  .summary-financials { grid-template-columns: 1fr; }
}
.summary-tile {
  background: #f1f3f8;
  border-radius: .3rem;
  padding: .75rem 1rem;
}
.summary-tile .label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.info-icon {
  position: relative;
  margin-left: .3rem;
  font-size: .85rem;
  color: var(--muted);
  cursor: help;
  opacity: .75;
}
.info-icon:hover { opacity: 1; }
.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + .4rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: .4rem .6rem;
  border-radius: .3rem;
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  width: max-content;
  max-width: 16rem;
  white-space: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease-in;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.info-icon::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: .35rem solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease-in;
  z-index: 20;
}
.info-icon:hover::after,
.info-icon:hover::before { opacity: 1; }
.summary-tile .value { font-size: 1.4rem; font-weight: 600; }

.reference-block { min-width: 0; } /* allow nested grid tracks to shrink, not overflow */
.reference-block h3 {
  margin: 0 0 .5rem; font-size: .85rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}
.chip-list {
  list-style: none; margin: 0; padding: 0;
  /* Vertical stack: each chip takes the full sidebar width with the row count
     pushed to the right. Avoids label clipping ("Bellevue Medical Cente…")
     and gives a scannable filter list. */
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.chip-list li {
  background: #f1f3f8;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem 1rem;
  font-size: .85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  width: 100%;
  min-width: 0;
}
.chip-list li .label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-list li:hover { background: #e3e7f1; }
.chip-list li.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.chip-list li.active:hover { background: var(--primary-dark); }
.chip-list li .count { color: var(--muted); margin-left: .4rem; font-size: .75rem; flex-shrink: 0; }
.chip-list li.active .count { color: rgba(255, 255, 255, .75); }

.checkbox-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem;
  white-space: nowrap;
}
.checkbox-label input { width: auto; }

footer { margin: 2rem 0 1rem; }

/* Phones / very narrow viewports. */
@media (max-width: 45rem) {
  .search-row button { width: 100%; }
  .search-row .checkbox-label { flex-basis: 100%; }
}