/* Card grid.
 *
 * Chart-forward by construction: the grid gap is 6px, the card padding is 0,
 * and the chart itself carries no title (the HTML header does), so there is
 * no reserved plot margin to fight. Bootstrap's .card is deliberately NOT
 * used -- its --bs-card-spacer-y is ~1rem, which is exactly the padding this
 * layout exists to avoid, and overriding it costs more code than not opting
 * in.
 */

.cog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
  padding: 6px;
  align-items: start;
}

.cog-card {
  padding: 0;
  border: 1px solid var(--bs-border-color, #d9d2c6);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bs-body-bg, #FAF7F2);
  cursor: zoom-in;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.cog-card:hover,
.cog-card:focus-visible {
  border-color: var(--bs-primary, #22406A);
  box-shadow: 0 1px 6px rgba(14, 26, 43, .12);
  outline: none;
}

.cog-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  padding: 2px 6px;
  font-size: .78rem;
  line-height: 1.15;
}
.cog-card-title  { font-weight: 600; }
.cog-card-badges { display: flex; gap: 3px; flex: 0 0 auto; }

/* The viewBox does the work: the SVG fills its cell and keeps its aspect
 * ratio. Without stripping the authored pt width/height in fit_svg() this
 * would render at a fixed size and ignore the grid entirely. */
.cog-card svg { display: block; width: 100%; height: auto; }

.cog-card-detail { display: none; }

/* -- Expand: pure CSS, no server round-trip, no re-render ----------------- */
.cog-card.cog-expanded {
  position: fixed;
  inset: 2vh 2vw;
  z-index: 1080;
  cursor: zoom-out;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
}
.cog-card.cog-expanded .cog-card-head { font-size: 1.05rem; padding: .5rem .75rem; }
.cog-card.cog-expanded svg { flex: 1 1 auto; height: auto; min-height: 0; }
.cog-card.cog-expanded .cog-card-detail {
  display: block;
  padding: .4rem .75rem .6rem;
  border-top: 1px solid var(--bs-border-color, #d9d2c6);
}
.cog-detail-label { font-weight: 700; font-size: 1.1rem; }

.cog-backdrop {
  position: fixed; inset: 0; z-index: 1070;
  background: rgba(14, 26, 43, .45);
}

/* -- Badges and chips ---------------------------------------------------- */
.cog-badge {
  font-size: .66rem; padding: 0 4px; border-radius: 3px;
  background: var(--bs-light, #F2EDE4); color: var(--bs-body-color, #0E1A2B);
  white-space: nowrap;
}
.cog-badge-warn { background: #FBE0C6; color: #6B2B00; font-weight: 600; }

.cog-chip {
  display: inline-block; font-size: .74rem; padding: 1px 6px;
  border-radius: 10px; background: var(--bs-light, #F2EDE4);
  margin: 1px 2px; white-space: nowrap;
}
.cog-chip-action { cursor: pointer; }
.cog-chip-action:hover { filter: brightness(.95); text-decoration: underline; }

/* -- Disclosure strips ---------------------------------------------------
 * Two strips, always in this order, always visually distinct. One is the
 * data being quiet; the other is the reader being opinionated. Merging them
 * would hide which is which.
 */
.cog-coverage {
  font-size: .8rem; color: var(--cog-muted, #5A6A82);
  padding: 2px 8px 4px;
}
.cog-strip { font-size: .78rem; padding: 4px 8px; line-height: 1.5; }
.cog-strip-label { color: var(--cog-muted, #5A6A82); margin-right: 4px; }
.cog-strip-small    .cog-chip { background: #ECE7DC; }          /* data silence */
.cog-strip-excluded .cog-chip { background: #FBE0C6; color: #6B2B00; } /* analyst choice */

/* -- Picker -------------------------------------------------------------- */
.cog-or {
  margin: .6rem 0 .4rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cog-muted, #5A6A82);
  border-top: 1px solid var(--bs-border-color, #d9d2c6); padding-top: .5rem;
}
.cog-statebtn { margin-bottom: .25rem; }
.cog-scope { margin-bottom: .5rem; }

.cog-results { max-height: 48vh; overflow-y: auto; }
.cog-result {
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.cog-result:hover, .cog-result:focus-visible {
  background: var(--bs-light, #F2EDE4);
  border-color: var(--bs-primary, #22406A); outline: none;
}
.cog-result-name { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.cog-result-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: .74rem; color: var(--cog-muted, #5A6A82);
}
.cog-years { font-variant-numeric: tabular-nums; }

.cog-breadcrumb {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 4px 8px; font-size: .9rem;
  border-bottom: 1px solid var(--bs-border-color, #d9d2c6);
}
.cog-controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 4px 8px 0;
}
.cog-controls .form-group,
.cog-controls .shiny-input-container { margin-bottom: 0; }
.cog-thresh .form-control { padding: 2px 6px; }

.cog-empty { padding: 1rem; max-width: 44rem; }
.cog-note  { font-size: .8rem; color: var(--cog-muted, #5A6A82); }

/* Axis units, shown only when a card is expanded. Uses the brand's muted
   token rather than a literal colour: brand lives in _brand.yml only. */
.cog-card-axis {
  font-size: 0.78rem;
  color: var(--cog-muted);
  margin-bottom: 0.35rem;
}

/* Card actions sit in the expanded detail only, so a collapsed grid stays
   chart-forward. */
.cog-card-actions { margin-top: 0.5rem; }
.cog-card:not(.cog-expanded) .cog-card-actions { display: none; }

/* Dismiss sits beside Download PNG in the card's action row. Muted by
   default: it removes something from the reader's view, so it should not
   compete with the chart for attention, and it should not read as the
   primary thing to do with a card. */
.cog-dismiss {
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
  padding-left: 0.5rem;
}
.cog-dismiss:hover,
.cog-dismiss:focus-visible {
  color: var(--bs-danger, #b02a37);
  text-decoration: underline;
}