/*
 * Buoy Life Cycle - application styles
 *
 * Layered on top of pw-theme.css, which supplies the shared layout
 * classes (topbar, browser-grid, panel, panel-header, count, status,
 * empty). Everything here is namespaced with a blc- prefix so nothing
 * collides with pw-theme.css, stac.css or Bootstrap 5.3.3.
 *
 * Palette is taken from pw-theme.css rather than restated:
 *   #2c6ead  theme blue      #e9f2fb  selected fill
 *   #e5e7eb  border          #6b7280  muted text
 *   #f3f4f6  chip fill       #374151  body text
 *
 * Project:    Buoy Life Cycle
 * Author:     Brendon Gory, brendon.gory@noaa.gov
 */

/* ----------------------
   Layout
   ----------------------
   pw-theme.css sets browser-grid to 360px 1fr, which is right for the
   catalog's dataset titles but too narrow here: buoy ids run to 15
   digits and were being truncated against the date column.
   ---------------------- */

.browser-grid {
  grid-template-columns: 430px 1fr;
}

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

/* ----------------------
   Application tabs
   ----------------------
   Sections of this application, distinct from the PolarWatch navbar
   above. The site navbar is site-level - putting application sections
   in it would make them look like PolarWatch-wide pages and would not
   scale as the catalog adds applications.

   The buoy detail page marks Buoys current: a single buoy is a leaf
   within that section, not a section of its own.
   ---------------------- */

.blc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;

  /*
   * Held below the fixed navbar as the page scrolls, so the sections
   * stay reachable from anywhere on a long page rather than only from
   * the top.
   *
   * top matches the navbar height. z-index sits below Bootstrap's
   * fixed-top (1030) so the navbar still covers the tabs, and above
   * page content so the tabs cover it.
   *
   * The background is not optional: a sticky element without one lets
   * the scrolling content show through, which reads as a rendering
   * fault rather than a design choice.
   *
   * The negative margin and matching padding extend the bar past the
   * container's own padding, so content scrolls under the full width
   * of the strip instead of appearing beside it.
   */
  position: sticky;
  top: 70px;
  z-index: 900;
  background: #ffffff;
  margin: 0 -12px 14px;
  padding: 0 12px;
}

.blc-tab {
  padding: 8px 14px;
  font-size: 0.88rem;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  /* Offset by the container's own border so the active underline sits
     on the divider rather than above it. */
  margin-bottom: -1px;
  white-space: nowrap;
}

.blc-tab:hover {
  color: #2c6ead;
  background: #f8fafc;
}

.blc-tab-active,
.blc-tab-active:hover {
  color: #2c6ead;
  font-weight: 600;
  border-bottom-color: #2c6ead;
  background: none;
}

@media (max-width: 560px) {
  .blc-tabs {
    overflow-x: auto;
  }

  .blc-tab {
    padding: 8px 10px;
    font-size: 0.82rem;
  }
}

/* ----------------------
   Data currency
   ----------------------
   Sits at the right of the topbar, opposite the title. Quiet by
   default; the note beside it appears only when the source has stopped
   supplying new observations.
   ---------------------- */

.blc-generated {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
}

.blc-generated-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}

.blc-generated-value {
  font-variant-numeric: tabular-nums;
  color: #374151;
}

.blc-generated-note {
  color: #92400e;
  font-weight: 600;
}

@media (max-width: 980px) {
  .blc-generated {
    align-items: flex-start;
  }
}

/* ----------------------
   Metric strip
   ---------------------- */

.blc-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: #f3f4f6;
  border-radius: 8px;
  height: 100%;
}

.blc-metric-label {
  font-size: 0.8rem;
  color: #6b7280;
}

.blc-metric-value {
  font-size: 1.35rem;
  font-weight: 600;
  color: #374151;
}

/* ----------------------
   Roster filters
   ----------------------
   The panel carries 14px of padding, so the filter bar and table are
   pulled out to the panel edge with negative margins. Without this the
   scrolling row list sits in a narrow inset column and reads as a
   separate widget rather than as the panel content.
   ---------------------- */

.blc-filters {
  display: flex;
  gap: 8px;
  margin: 0 -14px;
  padding: 0 14px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.blc-filters input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

.blc-filters select {
  flex: 0 0 132px;
}

/* ----------------------
   Roster filters: bar and dialog
   ----------------------
   A native <dialog> rather than a panel inside the roster column. The
   column is 430px wide, which forced every group to collapse and every
   long list to scroll; a modal has room to lay the groups out in
   columns with every option visible.

   showModal() brings focus handling, Escape to close and the backdrop
   with it, none of which is worth reimplementing.
   ---------------------- */

.blc-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -14px;
  padding: 6px 14px;
  border-bottom: 1px solid #e5e7eb;
}

.blc-filter-open {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.78rem;
  color: #374151;
  cursor: pointer;
}

.blc-filter-open:hover {
  border-color: #2c6ead;
  color: #2c6ead;
}

.blc-filter-count {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2c6ead;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  line-height: 17px;
}

.blc-filter-clear {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  color: #1f4f84;
  cursor: pointer;
}

.blc-filter-clear:hover {
  text-decoration: underline;
}

/* ----------------------
   Filter dialog
   ---------------------- */

.blc-dialog {
  width: min(900px, 92vw);
  max-height: 84vh;
  padding: 0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 23, 32, 0.28);
}

.blc-dialog::backdrop {
  background: rgba(15, 23, 32, 0.35);
}

.blc-dialog-form {
  display: flex;
  flex-direction: column;
  max-height: 84vh;
}

.blc-dialog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.blc-dialog-matches {
  font-size: 0.8rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/*
 * Groups in columns. auto-fill rather than a fixed count, so a narrow
 * window gets one column and a wide one gets three without a
 * breakpoint for each.
 */
.blc-dialog-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px 24px;
  padding: 16px 18px;
  overflow-y: auto;
}

.blc-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

.blc-dialog-reset {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
}

.blc-dialog-reset:hover {
  border-color: #b45309;
  color: #b45309;
}

.blc-dialog-done {
  padding: 5px 16px;
  border: none;
  border-radius: 6px;
  background: #2c6ead;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.blc-dialog-done:hover {
  background: #1f4f84;
}

/* ----------------------
   Filter groups
   ---------------------- */

.blc-filter-section {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.blc-filter-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa4ae;
}

/* Selected count for one group, so a group scrolled out of view in the
   dialog still shows that it is filtering. */
.blc-group-count {
  min-width: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #2c6ead;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  line-height: 15px;
  letter-spacing: 0;
}

.blc-filter-note {
  margin: 0 0 6px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #6b7280;
}

/* A group with many options scrolls within its own column rather than
   stretching the dialog to the height of the longest list. */
.blc-filter-options {
  max-height: 240px;
  overflow-y: auto;
}

.blc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.82rem;
  color: #374151;
  cursor: pointer;
}

.blc-check input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: #2c6ead;
}

.blc-check-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blc-check-count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* ----------------------
   Roster table
   ---------------------- */

.blc-table-head {
  display: flex;
  align-items: stretch;
  margin: 0 -14px;
  padding: 0 8px;
  border-bottom: 2px solid #d1d5db;
  background: #f8fafc;
}

.blc-th {
  border: none;
  background: none;
  padding: 8px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  text-align: left;
  cursor: pointer;
}

.blc-th:hover {
  color: #2c6ead;
}

.blc-th::after {
  content: "";
  margin-left: 5px;
  font-size: 0.7rem;
  color: #2c6ead;
}

.blc-th.blc-sorted-asc::after {
  content: "\25B2";
}

.blc-th.blc-sorted-desc::after {
  content: "\25BC";
}

.blc-scroll {
  position: relative;
  margin: 0 -14px;
  max-height: 700px;
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
}

/*
 * The sizer holds the full height of the list and never changes while
 * scrolling. Only the rows inside it move.
 *
 * The previous approach resized a spacer above and below the visible
 * rows on every scroll event, which changed the container's
 * scrollHeight mid-scroll; the browser then clamped scrollTop to the
 * new height and threw the list to the top or bottom. Clicking the
 * scrollbar track hit it every time, because that is a single large
 * jump rather than a series of small ones.
 */
.blc-sizer {
  position: relative;
  width: 100%;
}

.blc-rows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

/*
 * Row height is fixed at 34px and mirrored by ROW_HEIGHT in roster.js.
 * Changing it here without changing it there breaks the scroll spacer
 * arithmetic and rows drift out of position as the list scrolls.
 */
.blc-row {
  display: flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  padding: 0 14px;
  border-bottom: 1px solid #f1f3f5;
  border-left: 3px solid transparent;
  font-size: 0.82rem;
  color: #374151;
  cursor: pointer;
}

.blc-row:hover {
  background: #eef4fa;
}

.blc-row-selected,
.blc-row-selected:hover {
  background: #e9f2fb;
  border-left-color: #2c6ead;
}

.blc-row a {
  color: #1f4f84;
  text-decoration: none;
}

.blc-row a:hover {
  text-decoration: underline;
}

.blc-col-id {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/*
 * The truncation has to be on the anchor, not the wrapper. The wrapper
 * is a flex container, so its overflow rules do not apply to the child
 * laying out inside it - the id simply spilled into the next column.
 * min-width: 0 is required as well: a flex item defaults to min-content
 * width and refuses to shrink below its text without it.
 */
.blc-col-id a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buoy ids run to 15 digits, so the columns beside them are kept tight
   and the row uses tabular figures to stop the dates jittering. */
.blc-col-date {
  flex: 0 0 74px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.blc-col-num {
  flex: 0 0 58px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.blc-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.blc-status-active {
  background: #2c6ead;
}

.blc-status-inactive {
  background: #c2c8ce;
}

/*
 * Withdrawn: removed from the IABP registry, so the record is frozen.
 * Hollow rather than filled - the buoy is still listed here, but
 * nothing about it can change again.
 */
.blc-status-withdrawn {
  background: #ffffff;
  border: 2px solid #b45309;
}

.blc-status-unknown {
  background: #e5e7eb;
}

/* Status badge on the buoy page. */
.blc-status-badge.blc-status-active {
  background: #e9f2fb;
  color: #1f4f84;
}

.blc-status-badge.blc-status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}

.blc-status-badge.blc-status-withdrawn {
  background: #fef3e2;
  color: #b45309;
}

.blc-empty {
  padding: 20px 12px;
  margin: 0;
  font-size: 0.88rem;
  text-align: center;
}

/* ----------------------
   Map hover ring
   ----------------------
   Drawn around the marker whose roster row is under the pointer.

   The radius and opacity are animated rather than the marker itself:
   at this density a marker that merely grows is easy to miss, while a
   ring expanding outward gives the eye somewhere to travel to. SVG
   attributes are animated directly, since a CSS transform on an SVG
   path scales about the wrong origin.
   ---------------------- */

.blc-hover-ring {
  animation: blc-pulse 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes blc-pulse {
  0% {
    r: 8;
    stroke-opacity: 1;
    stroke-width: 4;
  }

  /*
   * The ring holds its opacity through the first part of the expansion
   * rather than fading from the outset. A ring that starts fading
   * immediately is faintest exactly when it is largest, which is when
   * it would otherwise be easiest to catch out of the corner of an eye.
   */
  45% {
    r: 92;
    stroke-opacity: 0.9;
    stroke-width: 2.5;
  }

  100% {
    r: 184;
    stroke-opacity: 0;
    stroke-width: 1;
  }
}

/*
 * Respect a reduced-motion preference: the ring still marks the buoy,
 * it just holds still. Repeating motion is a genuine accessibility
 * problem for some readers, and the highlight works without it.
 */
@media (prefers-reduced-motion: reduce) {
  .blc-hover-ring {
    animation: none;
    r: 24;
    stroke-opacity: 1;
    stroke-width: 3;
  }
}

/* ----------------------
   Detail page
   ---------------------- */

/* The record panel needs less width than the roster it replaces. */
.blc-detail-grid {
  grid-template-columns: 340px 1fr;
}

@media (max-width: 980px) {
  .blc-detail-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Two-column definition list. The label column is fixed so the values
 * line up down the panel rather than stepping in and out with the
 * length of each label.
 */
.blc-facts {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 0.85rem;
}

.blc-facts dt {
  font-weight: 500;
  color: #6b7280;
}

.blc-facts dd {
  margin: 0;
  color: #374151;
  overflow-wrap: anywhere;
}

/* ----------------------
   Vector map furniture
   ----------------------
   The readout and legend float over the map, so both need a stacking
   context above the Leaflet panes and must not intercept the pointer -
   the readout is driven by mousemove on the map itself.
   ---------------------- */

.blc-map-wrap {
  position: relative;
}

.blc-readout {
  position: absolute;
  top: 10px;
  left: 52px;
  z-index: 500;
  pointer-events: none;
  padding: 8px 11px;
  border-radius: 6px;
  background: rgba(23, 37, 52, 0.88);
  color: #e8edf2;
  font-size: 0.72rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.blc-readout-main {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
}

.blc-readout-line {
  color: #b8c4d0;
}

.blc-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 500;
  pointer-events: none;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5e7eb;
}

.blc-legend-title {
  display: block;
  font-size: 0.68rem;
  color: #6b7280;
  margin-bottom: 3px;
}

.blc-legend canvas {
  display: block;
  border-radius: 2px;
}

.blc-legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* ----------------------
   Transport threshold
   ----------------------
   The reader's copy of a judgement the pipeline also makes. Kept close
   to the statistics it governs rather than near the chart, because the
   numbers are what change most visibly.
   ---------------------- */

.blc-threshold {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8fafc;
}

.blc-threshold label {
  display: block;
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.blc-threshold-value {
  font-weight: 600;
  color: #374151;
  font-variant-numeric: tabular-nums;
}

.blc-threshold-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blc-threshold input[type="range"] {
  flex: 1 1 auto;
  max-width: 360px;
  accent-color: #2c6ead;
}

.blc-threshold-reset {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  color: #1f4f84;
  cursor: pointer;
  white-space: nowrap;
}

.blc-threshold-reset:hover {
  text-decoration: underline;
}

.blc-threshold-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #6b7280;
}

/* ----------------------
   Statistics table
   ---------------------- */

.blc-stats-wrap {
  overflow-x: auto;
}

.blc-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.blc-stats th,
.blc-stats td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f3f5;
  text-align: right;
  white-space: nowrap;
}

.blc-stats thead th {
  border-bottom: 2px solid #d1d5db;
  background: #f8fafc;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}

.blc-stats thead th:first-child,
.blc-stats tbody th {
  text-align: left;
}

.blc-stats tbody th {
  font-weight: 500;
  color: #374151;
}

.blc-unit {
  color: #6b7280;
  font-weight: 400;
  font-size: 0.78rem;
}

.blc-chart {
  width: 100%;
  min-height: 260px;
}

/* Fleet charts span the full page width rather than a panel column,
   so they can afford more height for a six-year monthly series. */
.blc-chart-tall {
  min-height: 300px;
}

.blc-chart + .blc-chart {
  border-top: 1px solid #f1f3f5;
  padding-top: 4px;
  margin-top: 4px;
}

/* ----------------------
   Explanations page
   ----------------------
   A narrow contents column beside the sections, reusing browser-grid.
   The contents list sticks while the sections scroll, which is what
   makes a long single-page reference usable.
   ---------------------- */

.blc-explain-grid {
  grid-template-columns: 260px 1fr;
  align-items: start;
}

@media (max-width: 980px) {
  .blc-explain-grid {
    grid-template-columns: 1fr;
  }
}

.blc-contents-panel {
  position: sticky;
  /* Clears the fixed navbar and the sticky tab strip beneath it. */
  top: 122px;
}

.blc-contents {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0 -14px;
}

.blc-contents-link {
  padding: 5px 14px;
  font-size: 0.82rem;
  color: #6b7280;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.blc-contents-link:hover {
  color: #2c6ead;
  background: #f8fafc;
}

.blc-contents-active {
  color: #2c6ead;
  font-weight: 500;
  border-left-color: #2c6ead;
  background: #e9f2fb;
}

/*
 * scroll-margin-top keeps a jumped-to heading below the fixed navbar
 * and the sticky tabs. Without it the browser scrolls the heading to
 * the very top of the viewport, where both cover it.
 */
.blc-explain {
  padding: 0 0 20px;
  scroll-margin-top: 126px;
}

.blc-explain + .blc-explain {
  border-top: 1px solid #f1f3f5;
  padding-top: 20px;
}

.blc-explain-title {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: #374151;
}

/*
 * The anchor link appears on hover only. Always visible it reads as
 * punctuation in the heading; absent entirely there is no way to copy
 * a link to one explanation.
 */
.blc-explain-anchor {
  margin-left: 8px;
  font-size: 0.85rem;
  color: #c2c8ce;
  text-decoration: none;
  opacity: 0;
}

.blc-explain-title:hover .blc-explain-anchor {
  opacity: 1;
}

.blc-explain-anchor:hover {
  color: #2c6ead;
}

.blc-explain-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #374151;
  overflow-wrap: anywhere;
}

.blc-explain-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #1f4f84;
  font-size: 0.85em;
}

/* MathJax display equations scroll rather than widen the panel. */
.blc-explain-body mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}

/* ----------------------
   Coverage table
   ----------------------
   A plain scrolling table rather than the roster's windowed list. It
   is ten columns wide and read by scanning and sorting rather than by
   scrolling a long way, so the windowing machinery would add
   complexity without buying anything.
   ---------------------- */

.blc-note {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6b7280;
}

.blc-coverage-wrap {
  margin: 0 -14px;
  max-height: 70vh;
  overflow: auto;
}

.blc-coverage {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.blc-coverage th,
.blc-coverage td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f3f5;
  text-align: left;
  white-space: nowrap;
}

.blc-coverage thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  border-bottom: 2px solid #d1d5db;
  font-size: 0.72rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.blc-coverage thead th:hover {
  color: #2c6ead;
}

.blc-coverage thead th::after {
  content: "";
  margin-left: 5px;
  font-size: 0.65rem;
  color: #2c6ead;
}

.blc-coverage thead th.blc-sorted-asc::after {
  content: "\25B2";
}

.blc-coverage thead th.blc-sorted-desc::after {
  content: "\25BC";
}

.blc-coverage tbody tr:hover {
  background: #f8fafc;
}

.blc-coverage .blc-num {
  text-align: right;
}

.blc-coverage a {
  color: #1f4f84;
  text-decoration: none;
}

.blc-coverage a:hover {
  text-decoration: underline;
}

.blc-outcome {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.blc-outcome-in {
  background: #e9f2fb;
  color: #1f4f84;
}

/*
 * Amber rather than red. An excluded buoy is not an error: it reports
 * in a way this site's rules cannot place, which is a statement about
 * the rules as much as the buoy.
 */
.blc-outcome-out {
  background: #fef3e2;
  color: #b45309;
  cursor: help;
}

/* ----------------------
   Map panel
   ---------------------- */

.blc-map-panel {
  display: flex;
  flex-direction: column;
}

/*
 * leaflet.css sets .leaflet-container { background: #ddd }. blc.css is
 * linked after it so this wins on source order, but the id selector is
 * used to keep the rule safe if the link order ever changes.
 */
#map.blc-map {
  flex: 1 1 auto;
  min-height: 520px;
  background: #eaf1f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.blc-map-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #6b7280;
}

@media (max-width: 980px) {
  .blc-scroll {
    max-height: 340px;
    height: 340px;
  }

  #map.blc-map {
    min-height: 380px;
  }
}