:root {
  --bg:      #f7f6f2;
  --surface: #ffffff;
  --border:  #e4e1d8;
  --text:    #1a1a1a;
  --muted:   #6b7280;
  --accent:  #e98d2f;
  --radius:  8px;

  /* Shared app-family header tokens (match Ticker Tape / Code Check) */
  --header-bg:     #f8f5f1;
  --header-border: #ddd8d0;
  --text-dim:      #a09890;
  --accent-light:  #fdf0e0;
  --accent-dark:   #c5721e;
  --shadow:        0 2px 16px rgba(0,0,0,0.09);
  --header-h:      60px;
}

/* ============================================================
   Shared app-family header
   Matches Ticker Tape / Code Check header system so Blockboard
   feels like one product family. Keep these classes in sync if
   the shared header design changes in a sibling app.
   ============================================================ */
header { background:var(--header-bg);border-bottom:1px solid var(--header-border);padding:0 8px 0 12px;height:var(--header-h);display:flex;align-items:center;gap:8px;position:relative;z-index:1300;flex-shrink:0; }
.brand { display:flex;align-items:center;gap:7px;text-decoration:none;color:inherit;min-width:0; }
.brand-logo { width:24px;height:24px;border-radius:6px;object-fit:contain;flex-shrink:0; }
.brand-eyebrow { font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;line-height:1.2; }
.brand h1 { font-family:'Lora',serif;font-size:16px;font-weight:700;line-height:1.15;white-space:nowrap;margin:0; }
.brand-beta { font-family:'Source Sans 3',sans-serif;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--accent-dark);vertical-align:super; }
.brand-subtitle { display:none; font-family:'Source Sans 3',sans-serif;font-size:11px;font-weight:400;color:var(--text-dim);line-height:1.3;white-space:nowrap; }
/* app switcher — logo trigger */
.brand-logo-wrap { position:relative;flex-shrink:0;cursor:pointer; }
.brand-logo-wrap:hover .brand-logo { opacity:.85; }
.logo-chevron { position:absolute;bottom:-3px;right:-3px;width:12px;height:12px;background:var(--header-bg);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none; }
.logo-chevron svg { width:7px;height:7px;color:var(--text-dim);transition:transform .2s ease; }
.brand-logo-wrap.open .logo-chevron svg { transform:rotate(180deg); }
.app-switcher-menu { display:none;position:absolute;top:calc(100% + 10px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;min-width:230px;z-index:1200; }
.app-switcher-menu.open { display:block; }
.app-switcher-eyebrow { font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-family:'Source Sans 3',sans-serif;padding:4px 10px 2px;display:block; }
.app-switcher-menu a { display:block;padding:6px 10px;border-radius:7px;text-decoration:none;color:var(--muted); }
.app-name { display:block;font-family:'Lora',serif;font-size:15px;font-weight:700;color:inherit;line-height:1.2; }
.app-tagline { display:block;font-family:'Source Sans 3',sans-serif;font-size:11px;font-weight:400;color:var(--text-dim);line-height:1.3;margin-top:1px;white-space:normal; }
.app-switcher-menu a:hover { background:var(--bg);color:var(--text); }
.app-switcher-menu a.active { color:var(--text);background:var(--bg);cursor:default; }
.header-actions { margin-left:auto;display:flex;align-items:center;gap:4px;min-width:0; }
.btn-hdr { background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--muted);cursor:pointer;padding:3px 6px;font-size:10px;font-family:'Source Sans 3',sans-serif;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:3px; }
.btn-hdr svg { width:10px!important;height:10px!important;flex-shrink:0; }
.btn-hdr:hover { border-color:var(--accent);color:var(--accent-dark);background:var(--accent-light); }
.btn-label-full { display:none; }
.btn-label-short { display:inline; }
.bb-last-updated { font-size:10px;white-space:nowrap;display:flex;align-items:baseline;gap:0.3em;color:var(--text-dim);font-family:'Source Sans 3',sans-serif; }
.bb-last-updated .lbl { font-weight:500;color:#9b4040; }
.bb-last-updated .val { font-weight:500;color:var(--muted); }
@media (min-width:600px) {
  header { padding:0 20px;gap:12px; }
  .brand-logo { width:28px;height:28px; }
  .brand h1 { font-size:18px; }
  .brand-subtitle { display:block; }
  .header-actions { gap:12px; }
  .btn-hdr { padding:6px 11px;font-size:12px; }
  .btn-hdr svg { width:13px;height:13px; }
  .btn-label-full { display:inline; }
  .btn-label-short { display:none; }
  .bb-last-updated { font-size:0.72rem;gap:0.35em; }
  .bb-last-updated .val { color:#9ca3af; }
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);font-family:'Inter',sans-serif;color:var(--text);font-size:14px; }

/* Modal */
.bb-modal-backdrop { display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.55);backdrop-filter:blur(3px); }
.bb-modal-backdrop.open { display:flex;align-items:center;justify-content:center; }
.bb-modal { background:white;border-radius:14px;width:min(640px,92vw);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.28);animation:modal-in 0.22s ease; }
@keyframes modal-in { from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;} }
.bb-modal-header { padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.bb-modal-header h2 { font-family:'Lora',serif;font-size:1.25rem;margin:0; }
.bb-modal-close-x { background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.4rem;line-height:1;padding:2px 6px;border-radius:4px; }
.bb-modal-close-x:hover { background:#f3f4f6;color:var(--text); }
.bb-modal-body { overflow-y:auto;padding:20px 24px;flex:1; }
.bb-modal-body h3 { font-family:'Inter',sans-serif;font-size:1rem;margin:16px 0 6px;color:var(--text); }
.bb-modal-body h3:first-child { margin-top:0; }
.bb-modal-body p,.bb-modal-body li { font-size:0.85rem;color:#374151;line-height:1.65;margin:4px 0; }
.bb-modal-body code { background:#f3f4f6;padding:1px 5px;border-radius:3px;font-family:'Azeret Mono',monospace;font-size:0.78rem; }
.bb-modal-callout { background:#fefce8;border:1px solid #fde68a;border-radius:8px;padding:11px 15px;margin:0 0 14px;font-size:0.85rem;color:#78350f; }
.bb-modal-footer { padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center; }
.bb-modal-cta { background:var(--accent);color:white;border:none;border-radius:8px;padding:9px 22px;font-size:0.88rem;font-weight:600;cursor:pointer;transition:opacity 0.15s; }
.bb-modal-cta:hover { opacity:0.88; }

/* Header scope group: county chip + overview link, one connected unit */
.header-scope-group { display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:7px;flex-shrink:0;overflow:hidden; }
.county-chip-inner { display:flex;align-items:center;gap:4px;padding:0 6px 0 8px; }
.county-chip-icon { width:12px;height:12px;color:var(--muted);flex-shrink:0; }
.county-chip-chevron { width:7px;height:7px;color:var(--text-dim);flex-shrink:0;pointer-events:none;margin-left:-2px; }
.county-chip-select { -webkit-appearance:none;appearance:none;border:none;background:transparent;font-family:'Source Sans 3',sans-serif;font-size:11px;font-weight:600;color:var(--text);padding:6px 2px;cursor:pointer;max-width:120px; }
.county-chip-select:focus { outline:none; }
.scope-divider { width:1px;background:var(--border);align-self:stretch;margin:6px 0; }
.scope-overview-link { display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0 10px;font-family:'Source Sans 3',sans-serif;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap; }
.scope-overview-link svg { width:11px;height:11px;flex-shrink:0; }
.scope-overview-link:hover { color:var(--accent-dark);background:var(--accent-light); }
@media (min-width:600px) {
  .county-chip-select { font-size:12px;max-width:160px; }
  .scope-overview-link { font-size:12px;padding:0 12px; }
}

/* Map layers control (Leaflet control, topright) */
.map-layers-segment { position:relative;flex-shrink:0; }
.map-layers-btn { display:flex;align-items:center;gap:6px;height:32px;background:none;border:none;cursor:pointer;padding:0 10px;font-family:'Source Sans 3',sans-serif;font-size:0.82rem;font-weight:600;color:var(--text);white-space:nowrap;border-top-right-radius:8px;border-bottom-right-radius:8px; }
.map-layers-btn:hover { background:var(--bg); }
.map-layers-btn svg { width:13px;height:13px;color:var(--muted);flex-shrink:0; }
.map-layers-panel { display:none;position:absolute;top:100%;right:0;margin-top:4px;width:220px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:4px 0;z-index:500; }
.map-layers-segment.open .map-layers-panel { display:block; }
.map-layers-section { padding:8px 12px;border-bottom:1px solid var(--border); }
.map-layers-section:last-child { border-bottom:none; }
.map-layers-section-title { font-family:'Azeret Mono',monospace;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:6px; }
.map-layers-radio { display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--text);padding:2px 0;cursor:pointer; }

/* County / California overview slide-over */
.bb-overview-backdrop { display:none;position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,0.35); }
.bb-overview-backdrop.open { display:block; }
.bb-overview-sheet { position:absolute;top:0;right:0;bottom:0;width:min(360px,90vw);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.22s ease; }
.bb-overview-backdrop.open .bb-overview-sheet { transform:translateX(0); }
.bb-overview-header { padding:16px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.bb-overview-header h2 { font-family:'Lora',serif;font-size:1.05rem;margin:0; }
.bb-overview-body { overflow-y:auto;padding:14px 18px;flex:1; }

/* Layout */
.bb-root { display:flex;flex-direction:column;height:100vh;height:100dvh; }
.bb-body { display:flex;flex:1;overflow:hidden;min-height:0; }

/* Left column: map (top) + block table (bottom) */
.bb-left { flex:1.3;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border); }
.bb-map-wrap { flex:1;min-height:0;position:relative; }
.bb-map-wrap .leaflet-container { height:100% !important;width:100% !important; }
#map { height:100% !important; }
.bb-bottom-table { height:36vh;min-height:220px;display:flex;flex-direction:column;overflow:hidden; }

/* Block table toolbar */
.bb-bottom-table .dataTables_wrapper { flex:1;min-height:0; }

.sidebar-section-title { font-family:'Azeret Mono',monospace;font-size:0.63rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px; }
.form-check { display:flex;align-items:center;gap:6px; }
.form-check-label { font-size:0.82rem; }
.confirmed-date-link { font-size:0.72rem;color:#6b7280;text-decoration:none;font-weight:600;font-family:'Azeret Mono',monospace; }
.confirmed-date-link:hover { text-decoration:underline;color:#374151; }

/* Right: full-height species/summary panel */
.bb-right { height:100%;width:44%;min-width:360px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden; }

/* Sheet handle/back row — only meaningful on the mobile bottom sheet;
   hidden entirely on desktop where the table and right panel are always
   visible side by side. */
.bb-sheet-handle-row { display:none; }
.bb-sheet-handle { width:36px;height:4px;border-radius:2px;background:#cbc6b8;margin:0 auto; }
.bb-sheet-back { display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--text);font-family:'Source Sans 3',sans-serif;font-size:0.82rem;font-weight:600;padding:0; }
.bb-sheet-back svg { width:13px;height:13px;flex-shrink:0; }

/* ============================================================
   Mobile bottom sheet (<768px)
   Reuses the same #block_table / #block_detail_ui elements as desktop —
   no duplicated markup or logic. .bb-left becomes display:contents so its
   children (.bb-map-wrap, .bb-bottom-table) act as if they were direct
   children of .bb-body, letting the map fill the screen with the table
   and species panel overlaid as a draggable-feeling sheet at the bottom.
   Sheet "mode" (browse vs detail) and "state" (peek/half/full) are driven
   by data-attributes on #bb-body, set from app.js.
   ============================================================ */
@media (max-width: 767px) {
  .bb-body { position:relative;overflow:hidden; }
  .bb-left { display:contents; }

  .bb-map-wrap { position:absolute;inset:0;height:auto; }

  .bb-bottom-table,
  .bb-right {
    position:absolute;left:0;right:0;bottom:0;
    width:auto;min-width:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    border-right:none;
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 20px rgba(0,0,0,0.16);
    z-index:600;
    height:104px;
    transition:height 0.22s ease;
    display:none;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom);
  }

  /* Mode: which panel occupies the sheet */
  #bb-body[data-sheet-mode="browse"] .bb-bottom-table { display:flex; }
  #bb-body[data-sheet-mode="detail"] .bb-right { display:flex; }

  /* State: how tall the sheet is */
  #bb-body[data-sheet-state="half"] .bb-bottom-table,
  #bb-body[data-sheet-state="half"] .bb-right { height:56vh; }
  #bb-body[data-sheet-state="full"] .bb-bottom-table,
  #bb-body[data-sheet-state="full"] .bb-right {
    height:calc(100vh - var(--header-h) - 12px);
    height:calc(100dvh - var(--header-h) - 12px);
  }

  .bb-sheet-handle-row { display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px 7px;flex-shrink:0;cursor:pointer;position:relative; }
  .bb-sheet-title { font-family:'Azeret Mono',monospace;font-size:0.72rem;font-weight:500;color:var(--muted);position:absolute;left:14px; }
  .bb-sheet-back { position:absolute;left:14px; }

  /* Map layers / zoom-locate bar and search box: keep them from
     overrunning narrow viewports */
  /* Species table's "Atlas status" column: the 4-dot progress tracker adds
     meaningful width that isn't needed once you're relying on the label
     text anyway — dropping it shrinks the column, which also helps
     scrollX's header/body alignment have less horizontal distance to
     drift over. */
  #bb-body .status-track { display:none; }
  #bb-body .status-pill { gap:0; }

  #bb-body .bb-search-input, #bb-body .bb-search-results { width:min(230px, calc(100vw - 90px)); }

  /* Detail mode: peek shows the compact stat strip (no dashboard/species
     table — those need real vertical room); half/full show the segmented
     Summary/Species control instead, and only one of the two panes at a
     time based on which segment is active. */
  #bb-body[data-sheet-state="peek"] .bd-peek-stats { display:flex; }
  #bb-body[data-sheet-state="peek"] .bb-sheet-hint { display:block;text-align:center;font-size:0.66rem;color:var(--text-dim);padding:0 0 8px; }
  #bb-body[data-sheet-state="peek"] .block-mini-dashboard,
  #bb-body[data-sheet-state="peek"] .species-table-wrap { display:none; }

  #bb-body[data-sheet-state="half"] .bd-segmented,
  #bb-body[data-sheet-state="full"] .bd-segmented { display:flex; }
  #bb-body[data-sheet-state="half"] .block-mini-dashboard,
  #bb-body[data-sheet-state="full"] .block-mini-dashboard { display:flex; overflow-x:visible;overflow-y:auto; max-height:none; height:auto; }
  #bb-body[data-sheet-state="half"] .dash-row,
  #bb-body[data-sheet-state="full"] .dash-row { flex-wrap:wrap;min-width:0; }
  #bb-body[data-sheet-state="half"] .stat-chip,
  #bb-body[data-sheet-state="full"] .stat-chip { flex:1 1 0;min-width:0; }
  #bb-body[data-sheet-state="half"] .dash-chart-cell,
  #bb-body[data-sheet-state="full"] .dash-chart-cell { flex:1 1 100%;width:100%;margin-top:4px; }
  #bb-body[data-sheet-state="half"] .species-table-wrap,
  #bb-body[data-sheet-state="full"] .species-table-wrap { display:flex; }
  #bb-body[data-detail-segment="species"] .block-mini-dashboard { display:none; }
  #bb-body[data-detail-segment="summary"] .species-table-wrap { display:none; }

  /* The legend and search box both live in Leaflet's topleft control
     corner, which defaults to a higher z-index than the sheet (1000 vs.
     the sheet's 600) — drop that corner below the sheet on mobile so the
     sheet always covers them when it overlaps, rather than floating above
     it. To search or reference the legend, collapse the sheet to peek or
     half first. */
  .leaflet-top.leaflet-left,
  .leaflet-bottom.leaflet-left { z-index:550; }

  /* In "full" state the sheet covers most of the screen, so the top-right
     zoom/locate/Map-layers bar ends up floating awkwardly over the species
     table. Search stays available (it's the primary way to change what's
     selected without collapsing the sheet first). */
  #bb-body[data-sheet-state="full"] .bb-zoom-locate-control { display:none; }

  /* Drag handle: suppress the browser's default touch-scroll gesture so it
     doesn't fight with our own pointer-drag tracking. */
  .bb-sheet-handle-row { touch-action:none; }

  /* While actively dragging, height is set via inline style (JS) for 1:1
     finger tracking — the CSS transition is only for the snap-to-state
     animation once the drag ends. */
  .bb-bottom-table.dragging, .bb-right.dragging { transition:none; }
}

/* ============================================================
   Narrow phones (<500px) — e.g. iPhone SE. At the 767px breakpoint above,
   the header and the top-right control bar assume more room than these
   devices have: the header overflows (About button pushed off-screen) and
   the zoom/locate/Map-layers bar collides with the search box beside it.
   ============================================================ */
@media (max-width: 500px) {
  /* Header: wrap the county/overview group to its own row instead of
     letting it crowd out the timestamp and About button on row one. */
  header { flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;row-gap:6px; }
  .header-scope-group { order:5;flex-basis:100%;width:100%; }
  :root { --header-h: 96px; } /* header is 2 rows tall at this width — keeps the "full" sheet height calc and map-fill in sync */
  /* The overview button normally drops to a short "Overview"-only label
     below 600px to save space in a single header row — but at this width
     the county/overview group gets its own full-width row with plenty of
     room to spare, so show the full "<county> overview" label instead. */
  .scope-overview-link .btn-label-full { display:inline; }
  .scope-overview-link .btn-label-short { display:none; }

  /* Zoom/locate/Map-layers bar: narrow it to just the three icon buttons
     and wrap Map layers to its own row underneath (icon-only) instead of
     overlapping the search box to its left. */
  .bb-zoom-locate-control { flex-wrap:wrap;width:104px; }
  .bb-zl-divider-pre-layers { display:none; }
  .map-layers-segment { flex-basis:100%;border-top:1px solid var(--border); }
  .map-layers-btn { justify-content:center;padding:0;width:100%; }
  .map-layers-btn span { display:none; }
}


/* Loading */
#map-loading { position:absolute;inset:0;z-index:1000;background:rgba(247,246,242,0.82);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none; }
#map-loading.hidden { display:none; }
.map-spinner { width:36px;height:36px;border:3px solid #e4e1d8;border-top-color:#5b21b6;border-radius:50%;animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
#map-loading p { font-family:'Azeret Mono',monospace;font-size:0.72rem;color:#6b7280;margin:0; }

/* Search control (topleft) — replaces the default leaflet-control-geocoder UI */
.bb-search-control { position:relative; }
.bb-search-input { width:230px;border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 10px;font-family:'Inter',sans-serif;font-size:0.82rem;color:var(--text);background:var(--surface); }
.bb-search-input:focus { outline:none;border-color:var(--accent); }
.bb-search-results { display:none;position:absolute;top:100%;left:0;margin-top:4px;width:230px;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.14); }
.bb-search-results.open { display:block; }
.bb-search-group-label { font-family:'Azeret Mono',monospace;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);padding:8px 10px 4px; }
.bb-search-result { width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:none;cursor:pointer;padding:6px 10px;text-align:left; }
.bb-search-result:hover { background:var(--bg); }
.bb-search-result-main { font-family:'Inter',sans-serif;font-size:0.8rem;color:var(--text); }
.bb-search-result-sub { font-family:'Inter',sans-serif;font-size:0.68rem;color:var(--muted); }
.bb-search-empty { padding:10px;font-size:0.78rem;color:var(--muted);font-style:italic; }

/* Zoom + locate, merged into one horizontal row (topright) */
.bb-zoom-locate-control { display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.bb-zl-btn { width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text);flex-shrink:0; }
.bb-zl-btn:first-child { border-top-left-radius:8px;border-bottom-left-radius:8px; }
.bb-zl-btn:hover { background:var(--bg); }
.bb-zl-btn svg { width:15px;height:15px; }
.bb-zl-divider { width:1px;background:var(--border);align-self:stretch;margin:6px 0;flex-shrink:0; }

/* Map legend */
.leaflet-control .legend-title { font-family:'Inter',sans-serif !important;font-size:0.72rem !important;font-weight:600 !important;margin-bottom:4px !important; }
.leaflet-control .legend-scale div { font-family:'Inter',sans-serif !important;font-size:0.72rem !important; }
.info.legend { font-family:'Inter',sans-serif !important;font-size:0.72rem !important;background:white;padding:8px 10px;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,0.18); }
.info.legend i { width:12px !important;height:12px !important;margin-right:4px !important;float:left;border-radius:2px; }

.leaflet-control-attribution { font-size:0.55rem !important;font-family:'Inter',sans-serif !important; }

/* DT */
table.dataTable { font-size:0.7rem !important;font-family:'Inter',sans-serif !important; }
table.dataTable thead th { font-family:'Inter', sans-serif !important;font-size:0.68rem !important;text-transform:none !important;letter-spacing:0.02em !important;color:var(--muted) !important;border-bottom:2px solid var(--border) !important;background:white !important;white-space:normal !important;line-height:1.2;vertical-align:middle;padding:4px 6px !important; }
table.dataTable tbody td { padding:3px 6px !important;vertical-align:middle !important;border-color:var(--border) !important;font-size:0.7rem !important;line-height:1.3 !important;letter-spacing:-0.02em !important; }
table.dataTable tbody tr:hover { background:#f7f6f2 !important; }
table.dataTable tbody tr.row-selected { background:#fef3c7 !important; }
.dataTables_filter input { font-size:0.8rem;border:1px solid var(--border);border-radius:var(--radius);padding:3px 7px; }
.dataTables_filter { padding:6px 8px; }
.dataTables_info { font-size:0.7rem;color:var(--muted);padding:4px 8px; }

/* DT controls */
.dataTables_filter,
.dataTables_length,
.dataTables_paginate,
.dataTables_info {
  font-family:'Azeret Mono', monospace !important;
  font-size:0.68rem !important;
  color:var(--muted) !important;
}

/* Search label */
.dataTables_filter label {
  font-size:0.68rem !important;
  margin-bottom:0 !important;
}

/* Search input */
.dataTables_filter input {
  font-family:'Inter', sans-serif !important;
  font-size:0.68rem !important;
  height:18px !important;
  padding:2px 6px !important;
  border-radius:6px !important;
  margin-left:4px !important;
}

/* Pagination buttons */
.dataTables_paginate {
  padding-top:0 !important;
  margin-top:0 !important;
  display:flex !important;
  align-items:center !important;
  height:100% !important;
}
.dataTables_paginate .paginate_button {
  font-size:0.68rem !important;
  padding:1px 6px !important;
  margin:0 1px !important;
  min-width:auto !important;
  line-height:1.4 !important;
  vertical-align:middle !important;
}

/* Current page */
.dataTables_paginate .paginate_button.current {
  border-radius:5px !important;
}

/* Showing X to X... line */
.dataTables_info {
  padding-top:.25 !important;
  display:flex !important;
  align-items:center !important;
  height:100% !important;
}

.dataTables_wrapper {
  font-family: 'Inter', sans-serif !important;
}

/* Compact top controls row */
.dataTables_wrapper .row:first-child {
  min-height:28px !important;
  align-items:center !important;
  display:flex !important;
}
.dataTables_wrapper .row:first-child > div {
  display:flex !important;
  align-items:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Species pane */
.species-pane { display:flex;flex-direction:column;height:100%;overflow:hidden; }
.block-detail-hint { display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:0.88rem;font-style:italic; }
.block-detail-header { padding:6px 12px 5px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0; }
.block-name { font-family:'Azeret Mono',monospace;font-size:0.88rem;font-weight:500;color:var(--accent); }
.block-name-link { color:var(--accent);text-decoration:none; }
.block-name-link:hover { text-decoration:underline;opacity:0.85; }
.block-county { font-size:0.74rem;color:var(--muted); }
.block-select-badge { font-family:'Source Sans 3',sans-serif;font-size:0.62rem;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap; }
.block-select-badge.badge-geo { background:#eff6ff;color:#1d4ed8; }
.block-select-badge.badge-default { background:var(--accent-light);color:var(--accent-dark); }
.opacity-row { display:flex;align-items:center;gap:4px;margin-top:6px; }
.opacity-row label { font-size:0.72rem;color:var(--muted);white-space:nowrap;margin:0;flex-shrink:0; }
.opacity-row input[type=range] { flex:1;min-width:0;accent-color:var(--accent); }

/* Mobile-only: peek-state quick stats + the Summary/Species segmented
   control for half/full. Both default to hidden — desktop always shows
   the full dashboard and species table together, with neither element. */
.bd-peek-stats { display:none; }
.bb-sheet-hint { display:none; }
.bd-peek-stat { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:6px 4px;text-align:center; }
.bd-peek-stat-value { font-family:'Azeret Mono',monospace;font-size:1rem;font-weight:600;color:#1a1a1a; }
.bd-peek-stat-label { font-size:0.62rem;color:var(--muted);margin-top:1px; }
.bd-segmented { display:none;background:var(--bg);border-radius:9px;padding:3px;gap:2px;margin:8px 12px 0; }
.bd-seg-btn { flex:1;background:none;border:none;border-radius:7px;cursor:pointer;padding:7px 0;font-family:'Source Sans 3',sans-serif;font-size:0.82rem;font-weight:600;color:var(--muted);transition:background 0.15s ease,color 0.15s ease,box-shadow 0.15s ease; }
.bd-seg-btn.active { background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.16); }

/* Mini dashboard */
.block-mini-dashboard { flex-shrink:0;background:#fafaf8;border-bottom:1px solid var(--border);padding:7px 12px 6px;display:flex;flex-direction:column;gap:6px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;max-height:38vh; height: 170px}
.dash-row { display:flex;align-items:center;gap:8px;min-width:max-content; }
.dash-divider { height:1px;background:var(--border);margin:2px 0; }
.stat-chip { display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;border:1px solid var(--border);border-radius:7px;padding:3px 7px;min-width:48px;min-height:48px;text-align:center;flex-shrink:0; }
.dash-chart-cell { flex:1;min-width:0; }
.dash-chart-cell-pad { padding-top:2px; }
.stat-chip-value { font-family:'Azeret Mono',monospace;font-size:1rem;font-weight:600;line-height:1.1;color:#1a1a1a; }
.stat-chip-label { font-size:0.58rem;color:#6b7280;line-height:1.2;margin-top:1px;text-align:center; }
.species-table-wrap { flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0; }
.species-table-wrap .dataTables_wrapper { display:block; }
.species-table-wrap .dataTables_scrollBody { overflow-y:auto !important;overflow-x:auto !important; }
.species-table-wrap .dataTables_scrollHead { overflow:hidden !important; }
.species-table-wrap .dataTables_scrollHeadInner,
.species-table-wrap .dataTables_scrollHeadInner table { width:100% !important; }
.species-table-wrap table.dataTable td:last-child,
.species-table-wrap table.dataTable th:last-child { white-space:nowrap !important; }

/* Status pills */
.status-pill { display:inline-flex;align-items:center;gap:9px;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap; }
.status-confirmed { background:#065f46;border-color:white; }
.status-probable  { background:#CFF1E6;border-color:#059669; }
.status-possible  { background:#ecfdf5;border-color:#34d399; }
.status-observed  { background:#f8fafc;border-color:#64748b; }
.status-none      { background:#f9fafb;border-color:#9ca3af;opacity:0.55; }
.status-track { display:flex;align-items:center; }
.status-dot { width:13px;height:13px;border-radius:50%;background:white;border:2px solid #d1d5db;position:relative;z-index:2;flex-shrink:0; }
.status-dot:not(:last-child) { margin-right:10px; }
.status-dot:not(:last-child)::after { content:'';position:absolute;top:50%;left:100%;width:10px;height:2px;transform:translateY(-50%);background:#d1d5db;z-index:1; }
.filled-1 { background:#94a3b8;border-color:#64748b; }
.filled-2 { background:#6ee7b7;border-color:#34d399; }
.filled-3 { background:#10b981;border-color:#059669; }
.filled-4 { background:#065f46;border-color:white; }
.filled-1::after { background:#94a3b8 !important; }
.filled-2::after { background:#6ee7b7 !important; }
.filled-3::after { background:#10b981 !important; }
.status-dot-check::before { content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:8px;font-weight:700;line-height:1; }
.status-label { font-size:0.72rem;font-weight:600;letter-spacing:0.01em; }
.status-confirmed .status-label { color:white; }
.status-probable  .status-label { color:#059669; }
.status-possible  .status-label { color:#34d399; }
.status-observed  .status-label { color:#64748b; }
.status-none      .status-label { color:#9ca3af; }

/* Sensitive species tag */
.sensitive-tag { display:inline-flex;align-items:center;gap:3px;background:#fff1f2;color:#be123c;border:1px solid #fecdd3;border-radius:999px;padding:3px 10px;font-size:0.72rem;font-weight:600;white-space:nowrap;font-family:'Inter',sans-serif; }

/* Links */
.checklist-link { text-decoration:none;font-size:0.74rem;font-weight:400;font-family:'Azeret Mono',monospace; }
.checklist-link:hover { text-decoration:underline; }
.checklist-confirmed { color:#065f46; }
.checklist-probable  { color:#059669; }
.checklist-possible  { color:#0d9488; }
.checklist-observed  { color:#64748b; }
.species-link { color:var(--text);text-decoration:none; }
.species-link:hover { color:#5b21b6;text-decoration:underline; }
.code-link {
  text-decoration:none;
  cursor:pointer;
}
.code-link:hover span {
  text-decoration:underline;
}
.dt-nowrap { white-space:nowrap !important; }
.dt-center { text-align:center !important; }
.dt-left { text-align:left !important; }

.confirmed-date-link { text-decoration:none;font-size:0.68rem;font-weight:400;font-family:'Azeret Mono',monospace;color:#6b7280; }
.confirmed-date-link:hover { text-decoration:underline;color:#374151; }
::-webkit-scrollbar { width:4px;height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border);border-radius:4px; }