/* Desktop hide/show tab stays on screen when the menu is closed */
@media (min-width: 640px) {
  .sidebar-toggle,
  #sidebarToggle {
    display: flex !important;
    z-index: 240 !important;
  }
  #sidebar.collapsed,
  body.sidebar-collapsed #sidebar {
    width: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    border-right: none !important;
    padding: 0 !important;
  }
  #sidebar.collapsed #sidebarToggle,
  body.sidebar-collapsed #sidebarToggle {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 72px !important;
    border-radius: 0 10px 10px 0 !important;
  }
  body.sidebar-collapsed #workspace {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

:root {
  --bottom-bar-h: 14px;
  --bottom-safe: env(safe-area-inset-bottom, 0px);
  --bg: #f0f2f5;
  --panel-bg: #ffffff;
  --text: #1a1a1a;
  --text-muted: #666;
  --border: #ddd;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --danger: #ef4444;
  --success: #22c55e;
  --node-border: #3b82f6;
  --edge: #94a3b8;
  --toolbar-bg: #ffffff;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --input-bg: #fff;
  --overlay: rgba(0,0,0,0.5);
}

body.dark {
  --bg: #0f172a;
  --panel-bg: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --accent: #60a5fa;
  --accent-hover: #3b82f6;
  --danger: #f87171;
  --success: #4ade80;
  --node-border: #60a5fa;
  --edge: #64748b;
  --toolbar-bg: #1e293b;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --input-bg: #0f172a;
  --overlay: rgba(0,0,0,0.7);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Toolbar */
#toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 10;
  flex-wrap: wrap;
}

#toolbar h1,
#toolbar h1.app-brand {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#toolbar .app-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: block;
}


.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="text"], input[type="search"], input[type="url"], textarea, select {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

#searchInput {
  width: 180px;
  max-width: 180px;
}

#tagFilter {
  min-width: 140px;
  width: auto;
}

button, .btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

button:hover, .btn:hover {
  background: var(--accent-hover);
}

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

button.secondary:hover {
  background: var(--border);
}

button.danger {
  background: var(--danger);
}

button.danger:hover {
  background: #dc2626;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Main layout */
#main {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

#network {
  flex: 1;
  background: transparent;
}

/* Side panel */
#panel {
  width: 360px;
  max-width: 90vw;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 20;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

#panel.open {
  transform: translateX(0);
}

#panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

#panel-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
}

#panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

#panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-section {
  margin-bottom: 18px;
}

.panel-section label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.profile-img-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--node-border);
  cursor: pointer;
  background: var(--border);
}

.profile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-img-wrap .overlay-hint {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.profile-img-wrap:hover .overlay-hint {
  opacity: 1;
}
.panel-anim-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.panel-anim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: -8px 0 14px;
}
.panel-anim-actions button {
  font-size: 0.78rem;
  padding: 6px 10px;
}
.figure-anim-burst {
  position: fixed;
  width: 96px;
  height: 96px;
  object-fit: contain;
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}
.figure-anim-burst.is-on {
  opacity: 1;
  transform: scale(1);
}
body.bsb-panel-book .panel-anim-actions { display: none; }

.tags-list, .links-list, .relations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tag-chip {
  background: var(--accent);
  color: white;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-chip button {
  background: transparent;
  border: none;
  color: white;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.link-item a {
  color: var(--accent);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-item a:hover {
  text-decoration: underline;
}

.relation-item {
  font-size: 0.9rem;
  padding: 4px 0;
  color: var(--text-muted);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--panel-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.15rem;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.form-row input, .form-row textarea, .form-row select {
  width: 100%;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

/* Crop modal special */
#cropModal .modal {
  max-width: 560px;
}

#cropContainer {
  position: relative;
  width: 100%;
  height: 320px;
  background: #111;
  overflow: hidden;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
}

#cropContainer:active {
  cursor: grabbing;
}

#cropCanvas {
  display: block;
}

#cropOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.45);
  /* circle cutout via mask will be handled in JS or CSS */
}

.crop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.crop-controls label {
  font-size: 0.85rem;
  white-space: nowrap;
}

.crop-controls input[type="range"] {
  flex: 1;
}

/* Empty state */
#emptyState {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 5;
}

#emptyState.hidden {
  display: none;
}

#emptyState h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: var(--text);
}

#emptyState p {
  max-width: 320px;
  text-align: center;
  line-height: 1.5;
}

/* Toast */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--panel-bg);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  z-index: 200;
  transition: transform 0.25s ease;
  font-size: 0.9rem;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
}

/* Utility */
.hidden {
  display: none !important;
}

.flex-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }

/* Responsive */
@media (max-width: 640px) {
  #toolbar {
    gap: 8px;
    padding: 8px 10px;
  }
  #searchInput {
    width: 120px;
  }
  #panel {
    width: 100%;
  }
}

/* ========== Floating page button & menu ========== */
#pageFab,
#pageMenu {
  display: none !important; /* legacy — not used */
}
#pageFab:hover {
  transform: scale(1.08);
  background: var(--accent-hover);
}

#pageMenu {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 260px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 51;
  overflow: hidden;
}
#pageMenu.hidden { display: none; }

.page-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
#pageList {
  max-height: 240px;
  overflow-y: auto;
}
.page-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.page-item:hover { background: var(--bg); }
.page-item.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  font-weight: 600;
}
.page-item .page-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-item input {
  flex: 1;
  font-size: 0.9rem;
  padding: 4px 8px;
}
.page-menu-footer {
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* ========== Calendar view ========== */
#calendarView {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: auto;
  z-index: 4;
}
#calendarView.hidden { display: none; }

#calendarHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#calTitle {
  font-size: 1.3rem;
  font-weight: 700;
  margin-right: auto;
}

#calendarGrid {
  /* base styles; .cal-list overrides for vertical mode */
  margin: 0 auto;
  width: 100%;
}
.cal-day-name {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0;
}
.cal-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  background: var(--panel-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.cal-cell:hover {
  border-color: var(--accent);
}
.cal-cell.other-month {
  opacity: 0.4;
}
.cal-cell.today {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
}
.cal-cell.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.cal-day-num {
  font-size: 0.85rem;
  font-weight: 600;
}
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.cal-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* Day detail panel (inside calendar) */
#dayDetail {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 320px;
  max-height: calc(100% - 100px);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  overflow-y: auto;
  z-index: 10;
}
#dayDetail.hidden { display: none; }
/* older day-detail-header rule removed – see later definition */
#dayPeopleList {
  margin-bottom: 12px;
}
.day-person-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.day-person-row img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.day-person-row .name { flex: 1; font-size: 0.9rem; }
.day-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
#dayNotes {
  width: 100%;
  min-height: 70px;
  margin-bottom: 10px;
}


/* ========== Page switcher (top toolbar) ========== */
.page-switcher {
  display: flex;
  gap: 4px;
  background: var(--bg);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.page-btn {
  background: transparent;
  color: var(--text);
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}
.page-btn.active {
  background: var(--accent);
  color: white;
}
.page-btn:not(.active):hover {
  background: var(--border);
}

/* ========== New Day Timeline (24h) ========== */
#dayDetail {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#dayDetail.hidden { display: none; }

.day-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  flex-shrink: 0;
}
.day-detail-header h3 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#milestoneBtn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 5px 10px;
}
#hoursList {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 40px;
}

.hour-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--panel-bg);
  overflow: hidden;
}
.hour-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  gap: 10px;
}
.hour-header:hover { background: var(--bg); }
.hour-header .chevron {
  transition: transform 0.2s;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.hour-block.open .hour-header .chevron {
  transform: rotate(90deg);
}
.hour-segments {
  display: none;
  border-top: 1px solid var(--border);
  padding: 6px 8px 10px;
}
.hour-block.open .hour-segments {
  display: block;
}

.segment {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 4px 0;
  background: var(--bg);
}
.segment-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  gap: 8px;
}
.segment-header:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.segment-entries {
  display: none;
  padding: 4px 8px 8px;
  border-top: 1px dashed var(--border);
}
.segment.open .segment-entries {
  display: block;
}

.entry-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.entry-line:last-child { border-bottom: none; }
.entry-line img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.entry-line .entry-body {
  flex: 1 1 auto;
  min-width: 120px;
}
.entry-line .entry-name {
  font-weight: 600;
  margin-bottom: 4px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.entry-line .entry-notes {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: normal;          /* normal paragraph flow */
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
}
.entry-line .entry-time {
  font-size: 0.75rem;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.entry-line .entry-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.entry-line button {
  padding: 2px 6px;
  font-size: 0.7rem;
}

.add-entry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 4px;
  align-items: center;
}
.add-entry-row select,
.add-entry-row input[type="time"],
.add-entry-row input[type="text"] {
  font-size: 0.8rem;
  padding: 4px 8px;
}
.add-entry-row textarea {
  width: 100%;
  min-height: 50px;
  font-size: 0.8rem;
}

/* ========== Vertical month list (new design) ========== */
#calendarGrid.cal-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.cal-day-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cal-day-row:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-bg));
}
.cal-day-row.today {
  border-color: var(--accent);
}
.cal-day-row.selected {
  box-shadow: 0 0 0 2px var(--accent);
}
.cal-day-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 70px;
}
.cal-day-num {
  font-size: 1.1rem;
  font-weight: 700;
}
.cal-weekday {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.cal-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.cal-more {
  font-size: 0.75rem;
  color: var(--text-muted);
  align-self: center;
}
.cal-chevron {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* ========== Clean vertical list (matching example) ========== */
#calendarGrid.cal-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-bg);
}
.cal-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: var(--panel-bg);
  border-radius: 0;
  transition: background 0.12s;
}
.cal-day-row:last-child {
  border-bottom: none;
}
.cal-day-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
  border-color: var(--border);
}
.cal-day-row.today {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
}
.cal-day-row.selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-bg));
  box-shadow: none;
}
.cal-day-num {
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 22px;
  text-align: right;
}
.cal-weekday {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 14px;
}
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: auto;
}
.cal-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.cal-more {
  font-size: 0.7rem;
  color: var(--text-muted);
  align-self: center;
}

/* Month header – simpler */
#calendarHeader {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  justify-content: space-between;
}
#calTitle {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Milestone days – light green outline */
.cal-day-row.milestone {
  outline: 2px solid #86efac;
  outline-offset: -2px;
  background: color-mix(in srgb, #86efac 12%, var(--panel-bg));
}
body.dark .cal-day-row.milestone {
  outline-color: #4ade80;
  background: color-mix(in srgb, #4ade80 10%, var(--panel-bg));
}

#milestoneBtn.active-milestone {
  background: #86efac;
  color: #14532d;
  border-color: #86efac;
}
body.dark #milestoneBtn.active-milestone {
  background: #4ade80;
  color: #14532d;
}

/* Priority entry highlight */
.entry-line.priority {
  background: color-mix(in srgb, #fbbf24 12%, transparent);
  border-radius: 6px;
}
.entry-line.priority .priority-btn {
  color: #d97706;
}

.entry-notes-edit {
  width: 100%;
  font-size: 0.8rem;
  margin-top: 4px;
}
.entry-time-edit {
  font-size: 0.8rem;
  max-width: 110px;
}
.hidden { display: none !important; }

/* ========== FORCE clean day panel + entry layout (final overrides) ========== */

#dayDetail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: var(--bg) !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#dayDetail.hidden {
  display: none !important;
}

.day-detail-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--panel-bg) !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

.day-detail-header h3#dayDetailTitle {
  margin: 0 !important;
  font-size: 1.05rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#milestoneBtn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

#hoursList {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 12px 16px 40px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Entry lines – paragraph text + clean edit mode */
.entry-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 6px !important;
  border-bottom: 1px solid var(--border) !important;
}

.entry-line img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.entry-line .entry-body {
  flex: 1 1 180px !important;
  min-width: 160px !important;
}

.entry-line .entry-name {
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.entry-line .entry-notes {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  display: block !important;
}

.entry-line .entry-notes-edit {
  width: 100% !important;
  min-height: 70px !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  display: block !important;
}

.entry-line .entry-time,
.entry-line .entry-time-edit {
  flex-shrink: 0 !important;
  font-size: 0.8rem !important;
}

.entry-line .entry-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* When editing, stack the body full width under the icon row */
.entry-line:has(.edit-mode:not(.hidden)) {
  flex-direction: column !important;
}
.entry-line:has(.edit-mode:not(.hidden)) .entry-body {
  width: 100% !important;
  min-width: 100% !important;
}

/* Ensure priority icons are always visible on day rows */
.cal-day-row .cal-dots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-left: auto !important;
  align-items: center !important;
  min-height: 20px !important;
}
.cal-day-row .cal-dot {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.cal-day-row .cal-more {
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
}

.cal-prio-count {
  font-size: 0.7rem;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  flex-shrink: 0;
}
.cal-day-row {
  min-height: 36px !important;
}
.cal-day-row .cal-dots {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.cal-day-row .cal-dot {
  width: 22px !important;
  height: 22px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========== Calendar scroll fix ========== */
#calendarView {
  position: absolute !important;
  inset: 0 !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 16px 48px !important;
  z-index: 4 !important;
}
#calendarView:not(.hidden) {
  display: flex !important;
}
#calendarView.hidden {
  display: none !important;
}

#calendarHeader {
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: var(--bg) !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  max-width: 1000px !important;
  width: min(1000px, 96%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#calendarGrid.cal-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: 1000px !important;
  width: min(1000px, 96%) !important;
  margin: 0 auto 40px auto !important;
  overflow: visible !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  height: auto !important;
  max-height: none !important;
}

#calendarGrid.cal-list .cal-day-row {
  flex-shrink: 0 !important;
}

/* ========== YouTube video overlay ========== */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-overlay.hidden {
  display: none !important;
}
.video-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}
.video-player-box {
  position: relative;
  z-index: 1;
  width: min(900px, 96vw);
  background: var(--panel-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.video-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.video-player-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}
.video-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.link-item a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-video-btn {
  padding: 2px 8px !important;
  font-size: 0.75rem !important;
  background: #c62828 !important;
  color: #fff !important;
  border: none !important;
  white-space: nowrap;
}
.play-video-btn:hover {
  background: #e53935 !important;
}

/* Floating play bar when selected node has videos */
#nodeVideoBar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
  padding: 8px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
#nodeVideoBar.hidden {
  display: none !important;
}
#nodeVideoBar button {
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* ========== Mockup layout: sidebar + workspace ========== */
#app {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  background: #0b1220 !important;
}

#sidebar {
  width: 300px;
  flex-shrink: 0;
  background: #0f172a;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  z-index: 40;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #1e293b;
  width: 100%;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.sidebar-brand:hover { background: rgba(251, 191, 36, 0.08); }
.sidebar-brand .app-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.brand-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f8fafc;
  line-height: 1.2;
}
.brand-sub {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #d97706;
  font-weight: 600;
}

#sideNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  flex: 1;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}
.nav-network-block > .nav-item {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-item:hover {
  background: #1e293b;
  color: #e2e8f0;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(217,119,6,0.2), transparent);
  color: #fbbf24;
  border: 1px solid rgba(217,119,6,0.35);
}
.nav-icon {
  width: 1.2em;
  text-align: center;
  opacity: 0.9;
}

.sidebar-footer {
  padding: 12px 10px calc(28px + var(--bottom-bar-h, 14px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
#sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}
#sideNav {
  flex: 1 1 auto;
  min-height: 0;
}
.nav-foot-btn {
  width: 100%;
  font-size: 0.8rem !important;
}

#workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #0b1220;
}

/* Thin bottom boundary — keeps page controls above device home areas */
.app-bottom-bar,
#bottomBar {
  flex-shrink: 0;
  height: calc(var(--bottom-bar-h) + var(--bottom-safe, env(safe-area-inset-bottom, 0px)));
  min-height: var(--bottom-bar-h);
  box-sizing: border-box;
  background: #0f172a;
  border-top: 1px solid #1e293b;
  width: 100%;
  z-index: 25;
  pointer-events: none;
}
body:not(.dark) .app-bottom-bar,
body:not(.dark) #bottomBar {
  background: #f8fafc;
  border-top-color: #cbd5e1;
}

/* Keep network controls above the bottom bar */
#netNavControls {
  bottom: calc(var(--bottom-bar-h) + var(--bottom-safe, env(safe-area-inset-bottom, 0px))) !important;
  height: 52px !important;
}
#netNavControls .net-nav-left,
#netNavControls .net-nav-right {
  bottom: 10px !important;
}

/* Scrollable page content clears the bottom bar */
.page-scroll,
#notesList,
#documentsList,
#charList,
#locSide,
.comm-list,
.comm-trending-list,
.comm-detail-body,
#hoursList,
#calendarGrid.cal-list {
  padding-bottom: calc(28px + var(--bottom-bar-h) + var(--bottom-safe, env(safe-area-inset-bottom, 0px))) !important;
  box-sizing: border-box;
}

#communityView .section-toolbar,
.page-toolbar,
.section-toolbar {
  /* toolbars stay at top; scroll areas handle bottom inset */
}

/* Day detail sheet sits above bottom bar */
#dayDetail {
  bottom: calc(var(--bottom-bar-h) + var(--bottom-safe, env(safe-area-inset-bottom, 0px))) !important;
}

/* Panel footer buttons above bottom bar when panel is open */
#panel {
  bottom: calc(var(--bottom-bar-h) + var(--bottom-safe, env(safe-area-inset-bottom, 0px))) !important;
}



#toolbar {
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
  padding: 10px 16px !important;
  gap: 12px !important;
  flex-shrink: 0;
}

/* Toolbar: Menu + horizontal scroll row */
.toolbar-menu-btn,
#mobileMenuBtn {
  display: none; /* desktop: hidden */
  flex-shrink: 0;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  border-radius: 50% !important;
  border: 2px solid #d97706 !important;
  background: #1e293b !important;
  color: #fbbf24 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.toolbar-menu-btn .menu-btn-icon {
  display: block;
  line-height: 1;
  font-size: 1.05rem;
}
.toolbar-menu-btn:hover,
#mobileMenuBtn:hover {
  background: #334155 !important;
  color: #fde68a !important;
  border-color: #fbbf24 !important;
}
.toolbar-scroll {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #d97706;
}
.toolbar-left {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

#main {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #0b1220;
}

#placeholderView {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1220;
  z-index: 5;
}
#placeholderView.hidden { display: none !important; }
.placeholder-card {
  max-width: 420px;
  text-align: center;
  padding: 32px;
  border: 1px solid #1e293b;
  border-radius: 12px;
  background: #0f172a;
  color: #94a3b8;
}
.placeholder-card h2 {
  color: #f8fafc;
  margin: 0 0 12px;
}

/* #addBtn default accent — Network row uses .nav-add-person overrides */
#addBtn:not(.nav-add-person) {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #0f172a !important;
  font-weight: 600;
}
#addBtn:not(.nav-add-person):hover {
  background: #f59e0b !important;
}

/* legacy 800px icon-rail removed — handled by mobile drawer below */

/* ========== Collapsible sidebar + board title + nav buttons ========== */
#sidebar {
  transition: width 0.2s ease, margin 0.2s ease;
  position: relative;
}
#sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-right: none !important;
  padding: 0 !important;
}
#sidebar.collapsed .sidebar-brand,
#sidebar.collapsed .board-title-block,
#sidebar.collapsed #boardBgBanner,
#sidebar.collapsed #sideNav,
#sidebar.collapsed .sidebar-footer {
  opacity: 0;
  pointer-events: none;
}

.sidebar-toggle,
#sidebarToggle {
  position: absolute !important;
  right: -16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 60 !important;
  width: 16px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  border: 1px solid #334155 !important;
  border-left: none !important;
  background: #0f172a !important;
  color: #fbbf24 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.25);
}
#sidebar.collapsed {
  overflow: visible !important;
}
#sidebar.collapsed .sidebar-toggle,
#sidebar.collapsed #sidebarToggle {
  right: -16px !important;
}
.sidebar-toggle:hover,
#sidebarToggle:hover {
  background: #1e293b !important;
  color: #fde68a !important;
  border-color: #d97706 !important;
}

/* Board title block */
.board-title-block {
  padding: 12px 12px 8px;
  border-bottom: 1px solid #1e293b;
}
.board-title-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.board-title-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
#boardTitleInput {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 6px 8px;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: #f8fafc;
}
#boardTitleInput:focus {
  outline: none;
  border-color: #d97706;
}
#saveBoardTitleBtn {
  flex-shrink: 0;
  padding: 6px 8px !important;
  font-size: 0.75rem !important;
}
.board-select {
  width: 100%;
  font-size: 0.8rem;
  padding: 6px 8px;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: #e2e8f0;
}

/* Board background image controls + sidebar banner */
.board-bg-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.board-bg-row button {
  flex: 1;
  padding: 5px 8px !important;
  font-size: 0.72rem !important;
}
#boardBgBanner {
  margin: 0 10px 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #0b1220;
  max-height: 110px;
  flex-shrink: 0;
}
#boardBgBanner.hidden {
  display: none !important;
}
#boardBgBanner img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center;
}
#sidebar.collapsed #boardBgBanner {
  display: none !important;
}

/* Faded full-area background behind Network / pages */
#mainBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: transparent;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.22;
  transition: opacity 0.25s ease, background-image 0.25s ease;
}
#main > *:not(#mainBg):not(#netNavControls) {
  position: relative;
  z-index: 1;
}
#netNavControls {
  position: absolute !important;
  z-index: 12 !important;
}
#network,
#calendarView,
#placeholderView,
#emptyState,
#netNavControls,
#nodeVideoBar {
  z-index: 2;
}
#locationsView,
#charactersView,
#evidenceView,
#documentsView,
#notesView,
#communityView {
  z-index: 30;
}
#panel {
  z-index: 40;
}

.nav-create-board {
  margin-top: 10px;
  border: 1px dashed rgba(217,119,6,0.4) !important;
  color: #d97706 !important;
}
.nav-create-board:hover {
  background: rgba(217,119,6,0.12) !important;
  color: #fbbf24 !important;
}

/* Uniform header height across pages */
#toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
}

/* vis-network navigation / zoom buttons — amber outline, icons restored */
div.vis-network div.vis-navigation {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 52px !important;
  pointer-events: none !important;
}

div.vis-network div.vis-navigation div.vis-button {
  position: absolute !important;
  top: auto !important;
  bottom: 14px !important;
  width: 36px !important;
  height: 36px !important;
  pointer-events: auto !important;
  background-color: transparent !important;
  /* do NOT clear background-image — sprites provide the icons */
  border: 1.5px solid #d97706 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
}

div.vis-network div.vis-navigation div.vis-button:hover {
  background-color: rgba(217, 119, 6, 0.12) !important;
  border-color: #fbbf24 !important;
  box-shadow: none !important;
}

/* Directional — bottom left, one row */
div.vis-network div.vis-navigation div.vis-left  { left: 14px !important;  right: auto !important; }
div.vis-network div.vis-navigation div.vis-up    { left: 56px !important;  right: auto !important; }
div.vis-network div.vis-navigation div.vis-down  { left: 98px !important;  right: auto !important; }
div.vis-network div.vis-navigation div.vis-right { left: 140px !important; right: auto !important; }

/* Zoom — bottom right, one row */
div.vis-network div.vis-navigation div.vis-zoomIn      { right: 98px !important; left: auto !important; }
div.vis-network div.vis-navigation div.vis-zoomOut     { right: 56px !important; left: auto !important; }
div.vis-network div.vis-navigation div.vis-zoomExtends { right: 14px !important; left: auto !important; }


/* Custom network controls — fully transparent */
#netNavControls {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 56px !important;
  width: 100% !important;
  pointer-events: none !important;
  z-index: 12 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#netNavControls .net-nav-left,
#netNavControls .net-nav-right {
  position: absolute !important;
  top: auto !important;
  bottom: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  pointer-events: auto !important;
  transition: right 0.25s ease, left 0.25s ease;
}
#netNavControls .net-nav-left {
  left: 14px !important;
  right: auto !important;
}
#netNavControls .net-nav-right {
  right: 14px !important;
  left: auto !important;
}

#netNavControls button {
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #d97706 !important;
  border-radius: 5px;
  color: #d97706 !important;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0.95;
}
#netNavControls button:hover {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}
#netNavControls button:active {
  background: rgba(217, 119, 6, 0.22) !important;
}

/* Hide built-in vis nav if any still appear */
div.vis-network div.vis-navigation {
  display: none !important;
}

/* Force-hide all built-in vis navigation (green outlines) */
div.vis-network div.vis-navigation,
div.vis-network div.vis-navigation *,
.vis-navigation,
.vis-button.vis-up,
.vis-button.vis-down,
.vis-button.vis-left,
.vis-button.vis-right,
.vis-button.vis-zoomIn,
.vis-button.vis-zoomOut,
.vis-button.vis-zoomExtends {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Custom controls: amber gold only */
#netNavControls button {
  border-color: #d97706 !important;
  color: #d97706 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#netNavControls button:hover,
#netNavControls button:focus {
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Auth + public mode */
.auth-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 4px 8px;
  border: 1px solid #1e293b;
  border-radius: 999px;
}
.auth-badge.admin { color: #fbbf24; border-color: rgba(217,119,6,0.5); }
.auth-badge.user { color: #38bdf8; border-color: rgba(56,189,248,0.4); }

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.auth-tab {
  flex: 1;
  padding: 8px;
  background: #0b1220;
  border: 1px solid #1e293b;
  color: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
}
.auth-tab.active {
  border-color: #d97706;
  color: #fbbf24;
}
.auth-message {
  font-size: 0.85rem;
  color: #f87171;
  margin-bottom: 8px;
}
.auth-message.ok { color: #4ade80; }
.auth-hint {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 12px;
}
.auth-modal label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: #94a3b8;
}
.auth-modal input[type="email"],
.auth-modal input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

/* Read-only mode: disable editing chrome */
body.bsb-readonly #addBtn,
body.bsb-readonly #savePersonBtn,
body.bsb-readonly #deletePersonBtn,
body.bsb-readonly #lockBtn,
body.bsb-readonly #addLinkBtn,
body.bsb-readonly #addTagBtn,
body.bsb-readonly #addRelationBtn,
body.bsb-readonly #createBoardBtn,
body.bsb-readonly #saveBoardTitleBtn,
body.bsb-readonly #boardTitleInput,
body.bsb-readonly #boardSelect,
body.bsb-readonly #importBtn {
  opacity: 0.45;
  pointer-events: none !important;
}
body.bsb-readonly #panelNotes,
body.bsb-readonly #panelName {
  pointer-events: none;
  opacity: 0.9;
}


.password-field {
  display: flex;
  gap: 8px;
  align-items: center;
}
.password-field input {
  flex: 1;
  min-width: 0;
}
.password-toggle {
  flex-shrink: 0;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}




/* ---------- Locations (Leaflet) ---------- */
#locationsView {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #0b1220;
  z-index: 6;
  box-sizing: border-box;
}
#locationsView.hidden { display: none !important; }

#locationsToolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #1e293b;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  background: #0b1220;
  min-height: 44px;
}

.loc-hint { font-size: 0.8rem; color: #94a3b8; }

#locationsBody {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: 1fr;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#locationsView.map-hidden #locationsBody {
  grid-template-columns: 1fr;
}

#locMap {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  background: #94a3b8;
  position: relative;
  z-index: 1;
}

#locMap .leaflet-container,
#locMap .leaflet-pane,
#locMap .leaflet-map-pane {
  width: 100% !important;
  height: 100% !important;
}

#locationsView.map-hidden #locMap {
  display: none !important;
}

body.bsb-template-bible #locLayerBar {
  display: none !important;
}
body.bsb-template-bible #locMap {
  display: none !important;
}
body.bsb-template-bible #bibleMapBar {
  display: flex !important;
}
body:not(.bsb-template-bible) #bibleMapBar,
body:not(.bsb-template-bible) #bibleMapWrap {
  display: none !important;
}
#bibleMapBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#bibleMapBar .side-filter-label {
  margin: 0;
}
#bibleMapSelect {
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 420px;
}
.bible-map-zoom {
  display: inline-flex;
  gap: 6px;
}
#bibleMapWrap {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  background: #0b1220;
  position: relative;
  z-index: 1;
}
body.bsb-template-bible #bibleMapWrap:not(.hidden) {
  display: flex !important;
}
#locationsView.map-hidden #bibleMapWrap {
  display: none !important;
}
#bibleMapStage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
  background: #111827;
  cursor: grab;
  touch-action: none;
}
#bibleMapStage:active {
  cursor: grabbing;
}
#bibleMapInner {
  position: relative;
  display: inline-block;
  transform-origin: 0 0;
}
#bibleMapImg {
  display: block;
  max-width: none;
  width: min(100%, 1100px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  cursor: crosshair;
}
#bibleMapPins {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.bible-map-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #d97706;
  border: 2px solid #fde68a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  pointer-events: auto;
  padding: 0;
  cursor: pointer;
}
.bible-map-pin.is-active {
  background: #fbbf24;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}
.bible-map-credit {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #94a3b8;
  background: #0b1220;
  border-top: 1px solid #1e293b;
}

#locSide {
  grid-column: 2;
  grid-row: 1;
  width: 320px;
  max-width: 320px;
  border-left: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #0b1220;
  overflow: hidden;
  z-index: 2;
}

#locationsView.map-hidden #locSide {
  grid-column: 1;
  width: 100%;
  max-width: none;
  border-left: none;
}

#locList {
  flex: 1;
  overflow: auto;
  padding: 10px;
}

.loc-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #1e293b;
  border-radius: 8px;
  cursor: pointer;
  background: #0f172a;
}
.loc-item:hover, .loc-item.active { border-color: #d97706; }
.loc-item-name { font-weight: 600; color: #e2e8f0; }
.loc-item-meta { font-size: 0.75rem; color: #94a3b8; }

#locEditor {
  border-top: 1px solid #1e293b;
  padding: 12px;
  flex-shrink: 0;
}
#locEditor.hidden { display: none; }
#locEditor label {
  display: block;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: #94a3b8;
}
#locEditor input, #locEditor textarea {
  width: 100%;
  box-sizing: border-box;
}
.loc-coords { display: flex; gap: 8px; }
.loc-coords input { flex: 1; font-size: 0.75rem; }
.loc-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

@media (max-width: 800px) {
  #locationsBody {
    grid-template-columns: 1fr !important;
    grid-template-rows: 45vh 1fr;
  }
  #locMap { grid-column: 1; grid-row: 1; min-height: 220px; }
  #locSide {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    border-left: none;
    border-top: 1px solid #1e293b;
  }
}

/* ---------- Shared page views (Characters / Evidence / Documents / Notes) ---------- */
.page-view {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #0b1220;
  z-index: 30;
  box-sizing: border-box;
  pointer-events: auto;
}
.page-view.hidden {
  display: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.page-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  flex: 0 0 auto;
  flex-wrap: wrap;
  background: #0b1220;
}
.page-hint {
  font-size: 0.8rem;
  color: #94a3b8;
}
.page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 24px;
  -webkit-overflow-scrolling: touch;
}

.figure-catalog-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 4px 12px;
}
.figure-catalog-bar input[type="search"] {
  flex: 1 1 220px;
  min-width: 160px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
}
.figure-catalog-tabs { display: flex; gap: 8px; }
.fig-cat-tab {
  border: 1px solid #334155;
  background: #0f172a;
  color: #cbd5e1;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.fig-cat-tab.active {
  border-color: #d97706;
  color: #fbbf24;
  background: #1c1408;
}
.figure-catalog-sorts { display: flex; gap: 8px; }
.fig-sort-tab {
  border: 1px solid #334155;
  background: #0f172a;
  color: #cbd5e1;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.fig-sort-tab.active {
  border-color: #38bdf8;
  color: #7dd3fc;
  background: #0b1a24;
}
.fig-book-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
}
.fig-book-hint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.fig-book-save {
  background: #1d4ed8;
  border: 1px solid #3b82f6;
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.82rem;
}
.fig-book-save:disabled {
  opacity: 0.45;
  cursor: default;
  background: #1e293b;
  border-color: #334155;
}
.fig-book-row {
  display: flex;
  align-items: stretch;
}
.fig-book-grip {
  flex: 0 0 52px;
  min-width: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  border-right: 1px solid #1e293b;
  background: rgba(30, 58, 138, 0.28);
  font-size: 1.35rem;
  letter-spacing: -2px;
  border-radius: 10px 0 0 10px;
}
.fig-book-grip:active { cursor: grabbing; background: rgba(37, 99, 235, 0.45); color: #dbeafe; }
.fig-book-movers {
  display: flex;
  flex-direction: column;
  flex: 0 0 28px;
  border-right: 1px solid #1e293b;
}
.fig-book-move {
  flex: 1;
  min-height: 24px;
  border: 0;
  background: #0f172a;
  color: #93c5fd;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0;
}
.fig-book-move:hover { background: #1e3a8a; color: #fff; }
@media (max-width: 900px) {
  .fig-book-grip {
    flex-basis: 64px;
    min-width: 64px;
    min-height: 56px;
    font-size: 1.55rem;
  }
}
.fig-book.is-dragging { opacity: 0.45; }
.fig-book.fig-book-drop { outline: 1px dashed #38bdf8; }
.fig-book {
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #0b1220;
}
.fig-book-h {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #f8fafc;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 12px;
  cursor: pointer;
}
.fig-ch-h {
  width: 100%;
  text-align: left;
  background: #0f172a;
  border: none;
  border-top: 1px solid #1e293b;
  color: #cbd5e1;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.88rem;
}
.fig-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 8px 12px 12px;
}
.fig-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 12px 14px;
}
.fig-card-list .char-card { max-width: none; }
.fig-mini {
  text-align: left;
  background: #111827;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.86rem;
}
.fig-mini:hover { border-color: #d97706; }
.figure-catalog-panel {
  position: relative;
  width: min(640px, calc(100vw - 24px));
  max-height: min(88vh, 820px);
  overflow: auto;
  background: #0f172a;
  border: 1px solid #d97706;
  border-radius: 12px;
  padding: 22px 20px 16px;
  color: #e2e8f0;
}
.figure-catalog-x {
  position: absolute; top: 8px; right: 10px;
  border: none; background: transparent; color: #94a3b8;
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.figure-catalog-kicker { color: #fbbf24; font-size: 0.78rem; letter-spacing: .04em; text-transform: uppercase; }
.figure-catalog-panel h2 { margin: 6px 0 4px; font-size: 1.45rem; }
.figure-catalog-kind { color: #94a3b8; margin: 0 0 12px; font-size: 0.88rem; }
.figure-catalog-verses-label { font-size: 0.8rem; color: #cbd5e1; margin-bottom: 6px; }
.fig-mentions {
  margin: 8px 0 12px;
  border: 1px solid #1e293b;
  border-radius: 8px;
  background: #0b1220;
}
.fig-mentions > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fig-mentions > summary::-webkit-details-marker { display: none; }
.fig-mentions > summary::before {
  content: "▸ ";
  color: #94a3b8;
  text-decoration: none;
}
.fig-mentions[open] > summary { border-bottom: 1px solid #1e293b; color: #e2e8f0; text-decoration: none; }
.fig-mentions[open] > summary::before { content: "▾ "; }
.figure-catalog-verses {
  display: block;
  max-height: 160px;
  overflow: auto;
  padding: 8px 10px 10px;
  font-size: 0.76rem;
  line-height: 1.55;
  margin: 0;
}
.figure-catalog-verses .scripture-cite {
  font-size: 0.76rem;
  margin-right: 0.55em;
}
.figure-catalog-notes-lab { display: block; font-size: 0.8rem; margin-bottom: 4px; color: #cbd5e1; }
#figureCatalogNotes {
  width: 100%; box-sizing: border-box; min-height: 110px;
  background: #020617; color: #e2e8f0; border: 1px solid #334155;
  border-radius: 8px; padding: 8px; margin-bottom: 10px;
}
.figure-catalog-actions { display: flex; gap: 8px; justify-content: flex-end; }
#figureCatalogModal { z-index: 32000; align-items: center; justify-content: center; }
#figureCatalogModal:not(.hidden) { display: flex; }

/* Characters vertical list */
.char-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin-bottom: 12px;
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0f172a;
  max-width: 640px;
  text-align: left;
}
.char-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: default;
}
.char-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #d97706;
  flex-shrink: 0;
  background: #1e293b;
}
.char-meta {
  flex: 1;
  min-width: 0;
}
.char-name {
  font-weight: 600;
  color: #f8fafc;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.char-tags {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.char-toggle {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
}
.char-notes-panel {
  display: none;
  border-top: 1px solid #1e293b;
  padding: 12px 14px 14px;
  background: #0b1220;
}
.char-card.open .char-notes-panel {
  display: block;
}
.fig-photo-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.fig-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.fig-photo-actions button {
  font-size: 0.78rem;
  padding: 6px 10px;
}
.char-notes-panel label {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 6px;
}
.char-notes-panel textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
}
.char-notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.char-charcount {
  font-size: 0.75rem;
  color: #64748b;
}
.char-charcount.over { color: #f87171; }
.char-notes-actions {
  display: flex;
  gap: 8px;
}
.char-empty {
  color: #94a3b8;
  padding: 24px 8px;
  max-width: 480px;
}

/* Evidence tiles */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  align-content: start;
  align-items: start;
}
.ev-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #0f172a;
  cursor: pointer;
  padding: 0;
}
.ev-tile.ev-tile-land {
  aspect-ratio: 16 / 9;
}
.ev-tile.ev-tile-port {
  aspect-ratio: 9 / 16;
}
.ev-tile-wrap.ev-wrap-land {
  grid-column: span 2;
}
.ev-tile:hover, .ev-tile:focus {
  border-color: #d97706;
  outline: none;
}
.ev-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #020617;
}
.ev-tile-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  font-size: 0.7rem;
  color: #e2e8f0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-empty {
  grid-column: 1 / -1;
  color: #94a3b8;
  padding: 24px 8px;
}

/* Evidence viewer modal */
.evidence-modal {
  width: min(98vw, 1200px) !important;
  max-width: 1200px !important;
  max-height: 96vh !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border-width: 1px !important;
  gap: 0 !important;
  overflow: hidden;
}
.evidence-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px !important;
  flex-shrink: 0;
  border-bottom: 1px solid #1e293b;
}
.evidence-modal .modal-header h3 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 0.95rem;
}
.evidence-modal .modal-footer {
  padding: 8px 10px !important;
  flex-shrink: 0;
  border-top: 1px solid #1e293b;
  gap: 8px;
}
.ev-counter {
  font-size: 0.75rem;
  color: #94a3b8;
  flex-shrink: 0;
}
.evidence-viewer-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 8px 8px !important;
}
/* Image row — fixed height so notes never grow into it */
.ev-viewer-main {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
.ev-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 3;
}
.ev-nav-btn:hover:not(:disabled) {
  border-color: #d97706 !important;
  color: #fbbf24 !important;
}
.ev-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
#evViewerStage {
  width: 100%;
  height: min(78vh, 860px);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* keep zoomed image inside stage */
  isolation: isolate;
  background: #020617;
  border-radius: 4px;
  border: 1px solid #1e293b;
  position: relative;
  z-index: 1;
}
#evViewerImg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.08s ease;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 0;
}
#evViewerImg.ev-viewer-port {
  max-height: 100%;
  width: auto;
}
#evViewerImg.ev-viewer-land {
  max-width: 100%;
  height: auto;
}
/* Zoom bar always above the image, never covered */
.ev-zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  padding: 6px 8px;
  margin: 0;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 4px;
  pointer-events: auto;
}
.ev-zoom-controls button {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
}
.ev-zoom-controls input[type="range"] {
  width: min(220px, 40vw);
  position: relative;
  z-index: 6;
}
/* Notes sit below image+zoom; expand only within this block (scroll inside), not under the image */
.ev-notes-block {
  border-top: 1px solid #1e293b;
  padding-top: 8px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: inherit;
}
.ev-notes-block label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 4px;
}
.ev-notes-count {
  font-size: 0.7rem;
  color: #64748b;
}
.ev-notes-count.over { color: #f87171; }
.ev-notes-block textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  max-height: 160px; /* grow downward within notes; then scroll inside */
  resize: vertical;
  overflow-y: auto;
  font-family: inherit;
  font-size: 0.85rem;
  margin-bottom: 6px;
  line-height: 1.4;
}
.ev-notes-block #evNotesSave {
  font-size: 0.75rem !important;
  padding: 5px 10px !important;
}
@media (max-width: 700px) {
  .ev-viewer-main {
    grid-template-columns: 32px 1fr 32px;
  }
  .ev-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 1.25rem !important;
  }
  #evViewerStage {
    height: min(72vh, 640px);
    min-height: 180px;
  }
  .ev-tile-wrap.ev-wrap-land {
    grid-column: span 2;
  }
  .ev-notes-block textarea {
    max-height: 120px;
  }
}

/* Documents list */
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0f172a;
  max-width: 720px;
  cursor: pointer;
}
.doc-item:hover { border-color: #d97706; }
.doc-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #1e293b;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.doc-meta { flex: 1; min-width: 0; }
.doc-name {
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
}
.doc-empty {
  color: #94a3b8;
  padding: 24px 8px;
  max-width: 480px;
}

/* Document viewer modal — large reading surface */
#docViewer.modal-overlay {
  align-items: stretch !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}
#docViewer .doc-modal,
.doc-modal {
  width: min(1600px, 98vw) !important;
  max-width: 98vw !important;
  height: min(96vh, 96dvh) !important;
  max-height: min(96vh, 96dvh) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#docViewer .modal-header {
  flex: 0 0 auto !important;
  padding: 12px 16px !important;
}
#docViewer .modal-footer {
  flex: 0 0 auto !important;
  padding: 12px 16px !important;
  gap: 10px !important;
}
#docViewer .modal-footer button {
  min-height: 40px !important;
  padding: 8px 16px !important;
}
.doc-viewer-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  position: relative !important;
  background: #020617 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
#docViewerFrame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: none !important;
  background: #fff !important;
  display: block !important;
}
.doc-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  color: #94a3b8;
  text-align: center;
  background: #0b1220;
}
.doc-fallback.hidden { display: none !important; }
.doc-fallback .btn {
  display: inline-block;
  padding: 10px 18px;
  background: #d97706;
  color: #0f172a;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* Notes cards */
.note-card {
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0f172a;
  padding: 12px 14px;
  margin-bottom: 12px;
  max-width: 720px;
}
.note-card.editing {
  border-color: #d97706;
}
.note-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.note-title {
  flex: 1;
  font-weight: 600;
  color: #f8fafc;
  font-size: 1rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-title-input {
  flex: 1;
  font-weight: 600;
  font-size: 1rem;
}
.note-body {
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.5em;
}
.note-body-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}
.note-meta {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 8px;
}
.note-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.note-empty {
  color: #94a3b8;
  padding: 24px 8px;
  max-width: 480px;
}

@media (max-width: 600px) {
  .evidence-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .char-card, .doc-item, .note-card {
    max-width: none;
  }
}

/* ---------- Community ---------- */
#communityView {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: #0b1220;
  z-index: 6;
  overflow: hidden;
}
#communityView.hidden { display: none !important; }

.comm-compose-overlay {
  position: fixed;
  inset: 0;
  z-index: 240000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px) + 16px) 16px 16px;
  background: rgba(2, 6, 23, 0.72);
  overflow: auto;
}
.comm-compose-overlay.hidden { display: none !important; }
.comm-compose {
  margin: 0;
  padding: 16px 16px 14px;
  border: 1px solid #1e293b;
  border-radius: 12px;
  background: #0f172a;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.comm-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.comm-compose-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #f8fafc;
}
.comm-compose-x {
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.comm-compose.hidden { display: none !important; }
.comm-compose textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  margin-bottom: 10px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  font-style: normal;
}
.comm-compose-files {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.comm-file-names {
  font-size: 0.75rem;
  color: #94a3b8;
}
.comm-compose-actions {
  display: flex;
  gap: 8px;
}
.comm-hint {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 10px;
}

.comm-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  /* Feed left · Trending/Post fills entire remaining right side */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  gap: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.comm-feed-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #1e293b;
}
#communityView .comm-layout {
  min-height: calc(100vh - 70px);
}
#commList {
  display: block !important;
  visibility: visible !important;
  min-height: 280px;
  overflow: auto;
  padding: 0 16px 24px;
  width: 100%;
  box-sizing: border-box;
}
#commList .comm-post {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.comm-list .comm-status {
  display: block;
  padding: 18px 4px;
}
.comm-side-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  background: #0b1220;
  border-left: 1px solid #1e293b;
  overflow: hidden;
}
.comm-trending-panel,
.comm-detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.comm-trending-panel {
  flex: 0 0 26%;
  max-height: 28%;
  border-bottom: 1px solid #1e293b;
}
.comm-detail-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.comm-side-title {
  margin: 0;
  padding: 8px 14px 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d97706;
  flex-shrink: 0;
}
.comm-trending-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 12px 14px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
.comm-trend-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 10px !important;
  margin-bottom: 4px;
  border-radius: 8px !important;
  border: 1px solid #1e293b !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  cursor: pointer;
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
.comm-trend-item:hover,
.comm-trend-item.active {
  border-color: #d97706 !important;
  background: rgba(217, 119, 6, 0.1) !important;
}
.comm-trend-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e2e8f0;
}
.comm-trend-meta {
  margin-top: 4px;
  font-size: 0.7rem;
  color: #64748b;
}
.comm-side-empty {
  padding: 8px 14px 16px;
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}
.comm-detail-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 12px 16px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
.comm-detail-body .comm-post {
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.comm-detail-body .comm-att-img {
  max-height: 280px;
}
.comm-post-featured {
  border-color: rgba(217, 119, 6, 0.45);
}
/* community mobile handled in Phase 1 block */


.comm-post {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0f172a;
}
.comm-post.highlight {
  border-color: #d97706;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.35);
}
.comm-votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  flex-shrink: 0;
}
.comm-votes button {
  width: 32px;
  height: 28px;
  padding: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1;
}
.comm-votes button.voted-up {
  border-color: #d97706 !important;
  color: #d97706 !important;
}
.comm-votes button.voted-down {
  border-color: #f87171 !important;
  color: #f87171 !important;
}
.comm-score {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
  min-height: 1.2em;
}
.comm-body-wrap {
  flex: 1;
  min-width: 0;
}
/* Community post author row — compact avatar */
.comm-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}
.comm-post-menu { margin-left: auto; position: relative; flex-shrink: 0; }
.comm-post-kebab {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: #94a3b8; font-size: 1.25rem; line-height: 1; cursor: pointer;
  border-radius: 8px;
}
.comm-post-kebab:hover { color: #fde68a; background: rgba(217,119,6,0.12); }
.comm-post-menu-drop {
  position: absolute; right: 0; top: 34px; z-index: 40;
  min-width: 160px; padding: 6px;
  background: #0f172a; border: 1px solid rgba(251,191,36,0.35);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.comm-post-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: #e2e8f0;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.88rem;
}
.comm-post-menu-item:hover { background: rgba(217,119,6,0.16); color: #fde68a; }
.comm-post-menu-item.danger { color: #fca5a5; }
.comm-post-menu-item.danger:hover { background: rgba(185,28,28,0.2); color: #fecaca; }
.comm-author-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #1e293b;
  border: 1px solid #334155;
  flex-shrink: 0;
  display: block;
}
.comm-author-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fbbf24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comm-author-time {
  font-size: 0.75rem;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}
.comm-detail-body .comm-author-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
}

.comm-meta {
  font-size: 0.7rem;
  color: #64748b;
  margin-bottom: 6px;
}
.comm-text {
  white-space: pre-wrap;
  word-break: break-word;
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 8px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  font-style: normal;
}
.comm-text a.comm-inline-link {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.comm-text a.comm-inline-link:hover { color: #93c5fd; }
.comm-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  max-height: calc(1.45em * 10);
}
.comm-see-more {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0 0 8px;
  margin: 0;
  color: #93c5fd;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}
.comm-see-more:hover { text-decoration: underline; }
.comm-atts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 12px;
  width: 100%;
}
.comm-att-img-link {
  display: block;
  width: 100%;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #020617;
  cursor: pointer;
}
/* Cropped, formatted in-post image (not a thumbnail) */
.comm-att-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  object-position: center center;
  background: #020617;
  vertical-align: middle;
}
/* When natural aspect is very tall, still cap height and crop */
.comm-att-img.portrait {
  max-height: 520px;
  object-fit: cover;
}
.comm-att-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #1e293b;
  background: #0b1220;
  font-size: 0.85rem;
  color: #93c5fd;
  text-decoration: none;
  width: fit-content;
}
.comm-att-doc:hover { border-color: #d97706; color: #fbbf24; }
.comm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.comm-actions button {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}
.comm-edited {
  margin-left: 6px;
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}
.comm-empty, .comm-status {
  padding: 16px;
  color: #94a3b8;
  max-width: 720px;
}
.comm-empty.hidden { display: none !important; }
.section-toolbar .active-sort {
  border-color: #d97706 !important;
  color: #fbbf24 !important;
}


/* ========== Light mode contrast fixes ========== */
body:not(.dark) {
  color: #0f172a;
}
body:not(.dark) #app {
  background: #e2e8f0 !important;
}
body:not(.dark) #sidebar {
  background: #f8fafc !important;
  border-right-color: #cbd5e1 !important;
  color: #0f172a;
}
body:not(.dark) .brand-name,
body:not(.dark) .board-title-label,
body:not(.dark) .nav-label,
body:not(.dark) .nav-item {
  color: #0f172a !important;
}
body:not(.dark) .nav-item:hover,
body:not(.dark) .nav-item.active {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
}
body:not(.dark) .nav-create-board {
  color: #b45309 !important;
  border-color: rgba(180, 83, 9, 0.45) !important;
}
body:not(.dark) #workspace,
body:not(.dark) #main {
  background: #f1f5f9 !important;
}
body:not(.dark) #toolbar {
  background: #f8fafc !important;
  border-bottom-color: #cbd5e1 !important;
}
body:not(.dark) .section-label {
  color: #b45309 !important;
}
body:not(.dark) button.secondary {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
}
body:not(.dark) button.secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
body:not(.dark) #sidebar .nav-foot-btn,
body:not(.dark) #darkToggle,
body:not(.dark) #exportBtn,
body:not(.dark) #importBtn {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
}
body:not(.dark) input,
body:not(.dark) textarea,
body:not(.dark) select {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
body:not(.dark) #boardTitleInput,
body:not(.dark) .board-select {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
body:not(.dark) .auth-badge {
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  background: #fff;
}
body:not(.dark) .auth-badge.admin {
  color: #b45309 !important;
  border-color: rgba(180, 83, 9, 0.5) !important;
}
body:not(.dark) .auth-badge.user {
  color: #0369a1 !important;
}
body:not(.dark) .sidebar-footer {
  border-top-color: #cbd5e1 !important;
}
body:not(.dark) .board-title-block {
  border-bottom-color: #cbd5e1 !important;
}
body:not(.dark) #boardBgBanner {
  border-color: #cbd5e1 !important;
  background: #e2e8f0 !important;
}
body:not(.dark) .modal {
  background: #fff !important;
  color: #0f172a !important;
}
body:not(.dark) .modal-header,
body:not(.dark) .modal-footer {
  border-color: #e2e8f0 !important;
}
body:not(.dark) .modal-header h3 {
  color: #0f172a !important;
}
body:not(.dark) #panel {
  background: #fff !important;
  color: #0f172a !important;
  border-left-color: #cbd5e1 !important;
}
body:not(.dark) #panel label,
body:not(.dark) .panel-section label {
  color: #475569 !important;
}
body:not(.dark) .loc-item,
body:not(.dark) .char-card,
body:not(.dark) .doc-item,
body:not(.dark) .note-card,
body:not(.dark) .comm-post {
  background: #fff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body:not(.dark) .loc-item-name,
body:not(.dark) .char-name,
body:not(.dark) .doc-name,
body:not(.dark) .comm-text {
  color: #0f172a !important;
}
body:not(.dark) .loc-item-meta,
body:not(.dark) .char-tags,
body:not(.dark) .comm-meta {
  color: #64748b !important;
}
body:not(.dark) #locationsView,
body:not(.dark) #charactersView,
body:not(.dark) #evidenceView,
body:not(.dark) #documentsView,
body:not(.dark) #notesView,
body:not(.dark) #communityView,
body:not(.dark) #calendarView {
  background: #f1f5f9 !important;
}
body:not(.dark) #emptyState h2,
body:not(.dark) .placeholder-card h2 {
  color: #0f172a !important;
}
body:not(.dark) #emptyState p,
body:not(.dark) .placeholder-card p {
  color: #475569 !important;
}
body:not(.dark) .placeholder-card {
  background: #fff !important;
  border-color: #cbd5e1 !important;
}
body:not(.dark) #netNavControls button {
  color: #b45309 !important;
  border-color: #b45309 !important;
  background: rgba(255,255,255,0.85) !important;
}
body:not(.dark) #mainBg {
  opacity: 0.28;
}


/* Community reactions */
.comm-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 6px 0 2px;
  align-items: center;
}
.comm-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  border: 1px solid #334155 !important;
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  font-size: 0.75rem !important;
  line-height: 1.1 !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.comm-react-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.comm-react-btn:hover:not(:disabled) {
  border-color: #d97706 !important;
  background: rgba(217, 119, 6, 0.1) !important;
}
.comm-react-btn.active {
  border-color: #d97706 !important;
  background: rgba(217, 119, 6, 0.18) !important;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.35);
}
.comm-react-emoji {
  font-size: 0.88rem;
  line-height: 1;
  display: inline-block;
}
.comm-react-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  min-width: 0.75em;
}
.comm-react-btn.active .comm-react-count {
  color: #fbbf24;
}

/* Pop + pulse on react (CSS only — playful confetti can layer later) */
@keyframes comm-react-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  55%  { transform: scale(0.92); }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes comm-react-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}
.comm-react-btn.react-pop {
  animation: comm-react-pop 0.35s ease-out, comm-react-pulse 0.45s ease-out;
}
.comm-react-btn.react-pop .comm-react-emoji {
  animation: comm-react-pop 0.35s ease-out;
}

body:not(.dark) .comm-react-btn {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
body:not(.dark) .comm-react-btn.active {
  border-color: #b45309 !important;
  background: rgba(217, 119, 6, 0.12) !important;
}
body:not(.dark) .comm-react-count {
  color: #64748b;
}

body:not(.dark) .comm-feed-col,
body:not(.dark) .comm-side-col {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
}
body:not(.dark) .comm-trend-item {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
body:not(.dark) .comm-trend-line { color: #0f172a; }
body:not(.dark) .comm-side-title { color: #b45309; }


/* Community location highlights + import actions */
.comm-text .comm-loc-hit {
  color: #fbbf24;
  background: rgba(217, 119, 6, 0.15);
  border-bottom: 1px solid rgba(251, 191, 36, 0.7);
  text-decoration: none;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}
.comm-text .comm-loc-hit:hover {
  background: rgba(217, 119, 6, 0.28);
  color: #fde68a;
}
.comm-import-actions {
  display: none;
}
.comm-import-inline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.comm-import-btn {
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
}
body:not(.dark) .comm-text .comm-loc-hit {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
}





/* ========== Phase 1: Mobile layout reset (max-width 900px) ==========
   Goals: usable Network, one drawer, readable pages, no leftover corner controls.
   ================================================================== */

/* Legacy controls — never show */
#pageFab,
#pageMenu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}
/* Desktop/tablet: hide Menu button (sidebar always visible) */
@media (min-width: 640px) {
  .toolbar-menu-btn,
  #mobileMenuBtn {
    display: none !important;
  }
}


/* Edge tab to open/close sidebar (desktop + mobile) */
.sidebar-toggle,
#sidebarToggle {
  position: absolute !important;
  right: -16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 60 !important;
  width: 16px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  border: 1px solid #334155 !important;
  border-left: none !important;
  background: #0f172a !important;
  color: #fbbf24 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.25);
}
.sidebar-toggle:hover,
#sidebarToggle:hover {
  background: #1e293b !important;
  border-color: #d97706 !important;
}

@media (max-width: 900px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  #app {
    display: flex;
    flex-direction: row;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
  }

  /* ----- Sidebar as off-canvas drawer ----- */
  #sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 88vw) !important;
    max-width: 300px !important;
    height: 100dvh !important;
    height: 100vh !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #sidebar:not(.collapsed) {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
  }
  #sidebar.collapsed {
    transform: translateX(-100%) !important;
    width: min(300px, 88vw) !important;
    min-width: 0 !important;
    overflow: visible !important; /* so edge tab can stick out when open; closed uses fixed tab */
    border: none !important;
    padding: 0 !important;
  }
  #sidebar.collapsed .sidebar-brand,
  #sidebar.collapsed .board-title-block,
  #sidebar.collapsed #boardBgBanner,
  #sidebar.collapsed #sideNav,
  #sidebar.collapsed .sidebar-footer {
    opacity: 1;
    pointer-events: auto;
  }

  #sideNav {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  .sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 12px 32px !important;
    margin-top: auto !important;
  }
  .sidebar-footer button {
    min-height: 44px !important;
    width: 100% !important;
  }

  /* Edge tab always reachable */
  .sidebar-toggle,
  #sidebarToggle {
    display: flex !important;
    z-index: 110 !important;
  }
  #sidebar:not(.collapsed) .sidebar-toggle,
  #sidebar:not(.collapsed) #sidebarToggle {
    position: absolute !important;
    right: -16px !important;
    left: auto !important;
    top: 50% !important;
  }
  #sidebar.collapsed .sidebar-toggle,
  #sidebar.collapsed #sidebarToggle {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 0 10px 10px 0 !important;
  }

  .mobile-nav-backdrop {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(2, 6, 23, 0.45);
    border: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .mobile-nav-backdrop.visible {
    display: block !important;
    pointer-events: auto !important;
  }
  /* Never leave the shade on when the drawer is closed */
  body:not(.mobile-nav-open) .mobile-nav-backdrop {
    display: none !important;
    pointer-events: none !important;
  }

  /* ----- Workspace fills the screen ----- */
  #workspace {
    width: 100% !important;
    max-width: 100vw !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 100dvh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #toolbar {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    overflow: hidden !important;
  }
  .toolbar-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }
  .toolbar-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 8px !important;
    align-items: center !important;
    padding-bottom: 2px;
  }
  .toolbar-scroll .toolbar-left,
  .toolbar-scroll .toolbar-group,
  .toolbar-scroll .auth-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
  }
  #toolbar button,
  #toolbar .auth-badge,
  #toolbar select,
  #toolbar input {
    flex-shrink: 0 !important;
    min-height: 36px;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
  #searchInput {
    font-size: 16px !important;
    width: 110px !important;
    max-width: 110px !important;
  }
  #tagFilter {
    font-size: 16px !important;
    max-width: 100px !important;
  }
  /* Keep top bar lean on phones — publish/view only; keep Get Full Access */
  #publishBoardBtn,
  #viewToggleBtn {
    display: none !important;
  }
  #userMenuBtn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #1e293b !important;
    border: 2px solid #d97706 !important;
  }
  #userMenuInitial {
    color: #fbbf24 !important;
  }

  #main {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ----- Network: full main, touch-friendly ----- */
  #network {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    z-index: 2 !important;
    display: block;
  }
  #network .vis-network,
  #network canvas {
    width: 100% !important;
    height: 100% !important;
  }

  #netNavControls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--bottom-bar-h, 14px) + env(safe-area-inset-bottom, 0px)) !important;
    height: 56px !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }
  #netNavControls .net-nav-left,
  #netNavControls .net-nav-right {
    pointer-events: auto !important;
    bottom: 8px !important;
    gap: 8px !important;
  }
  #netNavControls .net-nav-left { left: 10px !important; right: auto !important; }
  #netNavControls .net-nav-right { right: 10px !important; left: auto !important; }
  #netNavControls button {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1.5px solid #d97706 !important;
  }

  /* ----- Shared page views ----- */
  #communityView,
  #documentsView,
  #notesView,
  #locationsView,
  #charactersView,
  #evidenceView,
  #calendarView {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    background: #0b1220 !important;
  }
  #communityView.hidden,
  #documentsView.hidden,
  #notesView.hidden,
  #locationsView.hidden,
  #charactersView.hidden,
  #evidenceView.hidden,
  #calendarView.hidden {
    display: none !important;
  }

  .page-toolbar,
  .section-toolbar {
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .page-toolbar button,
  .section-toolbar button {
    min-height: 40px !important;
  }

  .page-scroll,
  #notesList,
  #documentsList,
  #charList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 36px !important;
  }

  .note-card,
  .doc-item,
  .char-card,
  .loc-item {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Locations */
  #locationsView {
    display: flex !important;
    flex-direction: column !important;
  }
  #locationsBody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(200px, 40vh) minmax(0, 1fr) !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  #locMap {
    min-height: 200px !important;
    height: 100% !important;
  }
  #locSide {
    overflow: auto !important;
    border-left: none !important;
    border-top: 1px solid #1e293b !important;
    padding-bottom: 36px !important;
  }

  /* Community: feed primary, trending secondary */
  .comm-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(120px, 28vh) !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  .comm-feed-col {
    min-height: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #1e293b !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .comm-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 8px 10px 32px !important;
    max-width: none !important;
  }
  .comm-side-col {
    min-height: 0 !important;
    border-left: none !important;
    overflow: hidden !important;
  }
  .comm-post {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .comm-votes {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .comm-compose-overlay {
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 10px 16px !important;
    align-items: flex-start !important;
  }
  .comm-compose {
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .comm-import-actions {
    flex-direction: column !important;
  }
  .comm-import-btn {
    width: 100% !important;
    min-height: 42px !important;
  }

  /* Timeline */
  #calendarHeader,
  #calendarGrid.cal-list {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #dayDetail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--bottom-bar-h, 14px) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: 100% !important;
    max-height: 70vh !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 55 !important;
  }

  /* Person panel full width */
  #panel {
    width: min(100vw, 400px) !important;
    max-width: 100vw !important;
    z-index: 50 !important;
  }

  .evidence-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .evidence-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal {
    width: min(100vw - 16px, 480px) !important;
    max-height: min(90dvh, 90vh) !important;
  }

  /* Document viewer stays near full-screen on phones */
  #docViewer .doc-modal,
  .doc-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #docViewer.modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
} /* end @media (max-width: 900px) mobile shell */


/* Community toolbar — same weight as the other page toolbars */
.comm-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}
.comm-toolbar button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(217, 119, 6, 0.55) !important;
  background: #0f172a !important;
  color: #fde68a !important;
}
.comm-toolbar button:hover {
  background: rgba(217, 119, 6, 0.18) !important;
  color: #fffbeb !important;
}
.comm-toolbar button.active-sort,
.comm-toolbar #commNewPostBtn {
  background: rgba(217, 119, 6, 0.32) !important;
  border-color: #fbbf24 !important;
  color: #fffbeb !important;
}
.comm-trending-btn {
  display: none !important; /* PWA / narrow only */
}
.comm-business-btn,
.comm-fellowship-btn,
#commBusinessBtn,
#commFellowshipBtn {
  display: none !important;
}
body.bsb-template-bible .comm-fellowship-btn,
body.bsb-template-bible #commBusinessBtn,
body.bsb-template-bible #commFellowshipBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.nav-admin-comm {
  font-size: 0.8rem !important;
  color: #fbbf24 !important;
  padding-left: 28px !important;
}
.nav-admin-comm.hidden { display: none !important; }

/* PWA / mobile: feed vs trending as separate full screens */
body.comm-pwa-split .comm-trending-btn {
  display: inline-flex !important;
}
body.comm-pwa-split .comm-layout {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  position: relative;
}
body.comm-pwa-split .comm-feed-col {
  display: flex !important;
  flex-direction: column !important;
  border-right: none !important;
  border-bottom: none !important;
  min-height: 0 !important;
  height: 100% !important;
}
body.comm-pwa-split .comm-side-col {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  background: #0b1220 !important;
  border-left: none !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}
body.comm-pwa-split.comm-show-trending .comm-feed-col {
  display: flex !important;
  flex: 0 0 auto !important;
  height: auto !important;
  overflow: visible !important;
}
body.comm-pwa-split.comm-show-trending .comm-list,
body.comm-pwa-split.comm-show-trending #commEmpty,
body.comm-pwa-split.comm-show-trending #commStatus {
  display: none !important;
}
body.comm-pwa-split.comm-show-trending .comm-side-col {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  height: auto !important;
}
body.comm-pwa-split.comm-show-trending .comm-layout {
  display: flex !important;
  flex-direction: column !important;
}
body.comm-pwa-split .comm-trending-btn.active-sort {
  border-color: #d97706 !important;
  color: #fbbf24 !important;
}

@media (max-width: 900px) {
  .comm-toolbar button {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
  }
}


/* Side panel search + tags */
.side-filter-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 14px;
  margin: 4px 8px 8px;
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
}
.side-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.side-filter-block #searchInput,
.side-filter-block #tagFilter {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.85rem !important;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0b1220;
  color: #e2e8f0;
}
body:not(.dark) .side-filter-block {
  border-color: #e2e8f0;
}
body:not(.dark) .side-filter-block #searchInput,
body:not(.dark) .side-filter-block #tagFilter {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Account dropdown — always vertical, on-screen */
.user-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.user-menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #d97706;
  background: #1e293b;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-menu-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.user-menu-avatar.has-src,
.user-menu-avatar.has-img {
  display: block !important;
}
.user-menu-initial {
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.9rem;
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: min(70vh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
  margin: 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  z-index: 200;
}
.user-menu-dropdown.hidden {
  display: none !important;
}
.user-menu-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid #1e293b;
  margin-bottom: 4px;
}
.user-menu-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #1e293b;
  flex-shrink: 0;
}
.user-menu-name {
  font-weight: 600;
  color: #f8fafc;
  font-size: 0.9rem;
}
.user-menu-email {
  font-size: 0.72rem;
  color: #94a3b8;
  word-break: break-all;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #e2e8f0;
  padding: 10px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 0;
}
.user-menu-item:hover {
  background: #1e293b;
  color: #fbbf24;
}
.user-menu-logout {
  margin-top: 4px;
  border-top: 1px solid #1e293b;
  color: #f87171 !important;
}
.user-menu-logout:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5 !important;
}
body:not(.dark) .user-menu-dropdown {
  background: #fff;
  border-color: #cbd5e1;
}
body:not(.dark) .user-menu-head {
  border-bottom-color: #e2e8f0;
}
body:not(.dark) .user-menu-name { color: #0f172a; }
body:not(.dark) .user-menu-item { color: #0f172a; }
body:not(.dark) .user-menu-item:hover { background: #f1f5f9; }

/* Characters / page views: ensure above network on all sizes */
#charactersView,
#evidenceView,
#documentsView,
#notesView,
#locationsView {
  z-index: 6;
}

@media (max-width: 900px) {
  /* Account menu drops DOWN from the avatar in the top banner */
  #toolbar {
    overflow: visible !important;
  }
  .toolbar-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  .user-menu-wrap {
    position: relative !important;
    z-index: 260 !important;
  }
  .user-menu-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    max-width: min(280px, calc(100vw - 16px)) !important;
    max-height: min(70vh, 400px) !important;
    z-index: 300 !important;
  }
  /* Person profile panel = full screen width on phones / PWA */
  #panel {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 40 !important;
  }
  #charactersView,
  #evidenceView,
  #documentsView,
  #notesView,
  #locationsView,
  #communityView {
    z-index: 30 !important;
  }
}


/* Locations map layer switcher */
.loc-layer-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #94a3b8;
  white-space: nowrap;
}
.loc-layer-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1;
}
#locBasemapSelect {
  font-size: 0.75rem;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  max-width: 130px;
  line-height: 28px;
  box-sizing: border-box;
  vertical-align: middle;
}
.loc-layer-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #cbd5e1;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.loc-layer-check input {
  accent-color: #d97706;
  margin: 0;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.loc-layer-check:has(input:checked) {
  border-color: #d97706;
  color: #fbbf24;
  background: rgba(217, 119, 6, 0.12);
}
body:not(.dark) #locBasemapSelect,
body:not(.dark) .loc-layer-check {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}
body:not(.dark) .loc-layer-check:has(input:checked) {
  border-color: #d97706;
  color: #b45309;
  background: rgba(217, 119, 6, 0.1);
}
/* Hide duplicate Leaflet layers control — toolbar is primary */
#locMap .leaflet-control-layers {
  display: none !important;
}
@media (max-width: 900px) {
  #locationsToolbar {
    flex-wrap: wrap;
  }
  .loc-layer-bar {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #locBasemapSelect {
    max-width: 120px;
    height: 28px;
  }
}

/* Network + Add Person row — aligned with nav items */
.nav-add-person,
#addBtn.nav-add-person {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  border: 1px solid rgba(217, 119, 6, 0.4) !important;
  background: linear-gradient(90deg, rgba(217,119,6,0.22), rgba(217,119,6,0.08)) !important;
  color: #fbbf24 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.nav-add-person:hover,
#addBtn.nav-add-person:hover {
  background: linear-gradient(90deg, rgba(217,119,6,0.35), rgba(217,119,6,0.15)) !important;
  border-color: #d97706 !important;
  color: #fde68a !important;
}
.nav-add-person:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}

/* Trending button — centered label */
.comm-trending-btn,
#commTrendingBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
body.comm-pwa-split .comm-trending-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide auth badge on narrow screens when account menu exists */
@media (max-width: 900px) {
  #authBadge:not(.hidden) {
    /* still allow Public for logged-out */
  }
  #authBadge.admin,
  #authBadge.user {
    display: none !important;
  }
}

/* ===== Standalone trial panel (replaces modal-overlay for CTA reliability) ===== */
#trialPrompt.trial-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}
#trialPrompt.trial-panel.hidden {
  display: none !important;
}
#trialPrompt .trial-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  pointer-events: auto;
}
#trialPrompt .trial-panel-card {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  pointer-events: auto !important;
}
#trialPrompt .trial-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #1e293b;
}
#trialPrompt .trial-panel-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #f8fafc;
}
#trialPrompt .trial-panel-x {
  background: transparent;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
}
#trialPrompt .trial-panel-body {
  padding: 16px 18px;
}
#trialPrompt .trial-panel-foot {
  padding: 14px 18px 18px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #1e293b;
  pointer-events: auto !important;
}
#trialPrompt a.trial-start-btn,
#trialPrompt #trialPromptCheckout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  border: none !important;
  -webkit-tap-highlight-color: rgba(59,130,246,0.4);
}

/* Desktop / tablet: pinned sidebar with an edge tab to hide and reopen */
@media (min-width: 640px) {
  #mobileMenuBtn,
  .toolbar-menu-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #sidebarToggle,
  .sidebar-toggle {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    right: -18px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 400 !important;
    width: 6px !important;
    min-width: 6px !important;
    height: 72px !important;
    border-radius: 0 4px 4px 0 !important;
    border: 1px solid #d97706 !important;
    border-left: none !important;
    background: #0f172a !important;
    color: #fbbf24 !important;
  }

  #sidebar,
  #sidebar:not(.collapsed) {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
    border-right: 1px solid #1e293b !important;
    box-shadow: none !important;
    z-index: 40 !important;
    padding: 0 !important;
  }

  #sidebar.collapsed,
  body.sidebar-collapsed #sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: visible !important;
    border-right: none !important;
    padding: 0 !important;
  }

  #sidebar.collapsed .sidebar-brand,
  #sidebar.collapsed .board-title-block,
  #sidebar.collapsed #boardBgBanner,
  #sidebar.collapsed #sideNav,
  #sidebar.collapsed .sidebar-footer {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #sidebar.collapsed #sidebarToggle,
  body.sidebar-collapsed #sidebarToggle {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  body.sidebar-collapsed #workspace,
  #workspace {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .mobile-nav-backdrop,
  .mobile-nav-backdrop.visible,
  body.mobile-nav-open .mobile-nav-backdrop {
    display: none !important;
    pointer-events: none !important;
  }
}


/* ===== Notes page: notes list (left) + Motive/Means/Opportunity (right) ===== */
#notesView.hidden {
  display: none !important;
}
#notesView:not(.hidden),
#notesView[data-premium-open="1"],
body.bsb-page-notes #notesView {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
#notesView[data-premium-open="1"] {
  /* Sit beside pinned sidebar; never wider than the remaining viewport */
  left: 300px !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 767px) {
  #notesView[data-premium-open="1"] {
    left: 0 !important;
    width: 100% !important;
  }
}

.notes-layout,
.notes-layout.notes-layout-list-only {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 16px !important;
  padding: 12px 16px 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#notesView #notesList,
#notesView .notes-layout #notesList {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 8px 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
}

#notesView .note-card {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#notesView .mmo-stack,
.mmo-stack {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mmo-block {
  flex: 1 1 0 !important;
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  visibility: visible !important;
}
.mmo-block h4 {
  margin: 0 0 8px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fbbf24 !important;
  flex: 0 0 auto !important;
  display: block !important;
  visibility: visible !important;
}
.mmo-text {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 72px !important;
  resize: none !important;
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  font: inherit !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
}
body:not(.dark) .mmo-block {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
body:not(.dark) .mmo-block h4 { color: #b45309 !important; }
body:not(.dark) .mmo-text {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Phone: stack Motive/Means/Opportunity under the notes list */
@media (max-width: 767px) {
  .notes-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(180px, 1fr) auto !important;
    overflow: auto !important;
  }
  #notesView #notesList,
  #notesView .notes-layout #notesList {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #notesView .mmo-stack,
  .mmo-stack {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex: none !important;
    height: auto !important;
  }
  .mmo-block {
    flex: none !important;
    min-height: 130px !important;
  }
  .mmo-text {
    min-height: 90px !important;
    resize: vertical !important;
  }
}


/* ==== CRITICAL Notes layout fix (must win over all prior rules) ==== */
@media (min-width: 768px) {
  body.bsb-page-notes #notesView,
  body.bsb-page-notes #notesView[data-premium-open="1"],
  #notesView[data-premium-open="1"] {
    position: fixed !important;
    top: 52px !important;
    left: 300px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: calc(100vw - 300px) !important;
    max-width: calc(100vw - 300px) !important;
    min-width: 0 !important;
    height: auto !important;
    inset: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.bsb-page-notes #notesView .notes-layout,
  #notesView[data-premium-open="1"] .notes-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    gap: 16px !important;
    padding: 12px 16px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.bsb-page-notes #notesView .mmo-stack,
  #notesView .mmo-stack {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
  body.bsb-page-notes #notesView #notesList,
  #notesView #notesList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
}




/* ===== Notes toolbar buttons: centered labels ===== */
.notes-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.notes-toolbar .notes-tool-btn,
.notes-toolbar #noteCreateBtn,
.notes-toolbar #notesMyNotesBtn,
.notes-toolbar #notesMmoBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
.notes-pwa-only {
  display: none !important;
}

/* ===== PWA Notes: Create Note | My Notes | M.M.O. — one pane at a time ===== */
body.notes-pwa-split .notes-pwa-only,
body.notes-pwa-split #notesMyNotesBtn,
body.notes-pwa-split #notesMmoBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body.notes-pwa-split .notes-desktop-hint {
  display: none !important;
}
body.notes-pwa-split .notes-toolbar .notes-tool-btn.active-sort {
  border-color: #d97706 !important;
  color: #fbbf24 !important;
  background: rgba(217, 119, 6, 0.12) !important;
}

/* Default (My Notes): list only — hide M.M.O. panels completely */
body.notes-pwa-split.bsb-page-notes #notesView .notes-layout,
body.notes-pwa-split #notesView .notes-layout {
  display: block !important;
  position: relative !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 8px 12px 12px !important;
  box-sizing: border-box !important;
}
body.notes-pwa-split.bsb-page-notes #notesView #notesList,
body.notes-pwa-split #notesView #notesList {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
body.notes-pwa-split.bsb-page-notes #notesView .mmo-stack,
body.notes-pwa-split #notesView .mmo-stack,
body.notes-pwa-split.bsb-page-notes #notesView[data-premium-open="1"] .mmo-stack {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* M.M.O. tab: panels only — hide notes list */
body.notes-pwa-split.notes-show-mmo.bsb-page-notes #notesView #notesList,
body.notes-pwa-split.notes-show-mmo #notesView #notesList {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.notes-pwa-split.notes-show-mmo.bsb-page-notes #notesView .mmo-stack,
body.notes-pwa-split.notes-show-mmo #notesView .mmo-stack,
body.notes-pwa-split.notes-show-mmo.bsb-page-notes #notesView[data-premium-open="1"] .mmo-stack {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 8px 12px 12px !important;
  background: #0b1220 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  gap: 10px !important;
}
body.notes-pwa-split.notes-show-mmo .mmo-block {
  flex: 1 1 0 !important;
  min-height: 120px !important;
}
body:not(.dark).notes-pwa-split.notes-show-mmo #notesView .mmo-stack {
  background: #f0f2f5 !important;
}


/* ===== DESKTOP: never show Notes tab buttons; keep side-by-side M.M.O. ===== */
@media (min-width: 768px) {
  #notesMyNotesBtn,
  #notesMmoBtn,
  .notes-pwa-only,
  body.notes-pwa-split #notesMyNotesBtn,
  body.notes-pwa-split #notesMmoBtn,
  body.notes-pwa-split .notes-pwa-only {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.notes-pwa-split .notes-desktop-hint,
  .notes-desktop-hint {
    display: inline !important;
  }
  /* Cancel any PWA single-pane rules on desktop */
  body.notes-pwa-split.bsb-page-notes #notesView .notes-layout,
  body.notes-pwa-split #notesView .notes-layout,
  body.bsb-page-notes #notesView .notes-layout,
  #notesView[data-premium-open="1"] .notes-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    position: relative !important;
  }
  body.notes-pwa-split.bsb-page-notes #notesView #notesList,
  body.notes-pwa-split #notesView #notesList,
  body.notes-pwa-split.notes-show-mmo #notesView #notesList {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    inset: auto !important;
  }
  body.notes-pwa-split.bsb-page-notes #notesView .mmo-stack,
  body.notes-pwa-split #notesView .mmo-stack,
  body.notes-pwa-split.notes-show-mmo #notesView .mmo-stack,
  body.notes-pwa-split.bsb-page-notes #notesView[data-premium-open="1"] .mmo-stack {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }
}


/* Desktop: shift zoom buttons left when profile panel is open */
@media (min-width: 768px) {
  body.panel-open #netNavControls .net-nav-right {
    right: calc(360px + 16px) !important;
    left: auto !important;
  }
  /* Keep directional buttons left; slightly tighten when panel open */
  body.panel-open #netNavControls .net-nav-left {
    left: 14px !important;
  }
}
/* Wide phones with full-width panel: tuck zoom above bottom bar, not under panel */
@media (max-width: 767px) {
  body.panel-open #netNavControls {
    display: none !important; /* profile is full-screen on phone */
  }
}


/* ===== PWA side-nav HIT TARGET FIX v26 =====
   Workspace / page overlays were stealing taps; only a thin left strip hit the buttons. */
@media (max-width: 900px) {
  /* Drawer above everything except true modals */
  #sidebar:not(.collapsed),
  body.mobile-nav-open #sidebar {
    z-index: 200 !important;
    pointer-events: auto !important;
  }
  body.mobile-nav-open .mobile-nav-backdrop {
    z-index: 190 !important;
    pointer-events: auto !important;
  }
  /* While drawer is open, nothing under it should receive taps */
  body.mobile-nav-open #workspace,
  body.mobile-nav-open #workspace *,
  body.mobile-nav-open #main,
  body.mobile-nav-open #network,
  body.mobile-nav-open #netNavControls,
  body.mobile-nav-open #charactersView,
  body.mobile-nav-open #evidenceView,
  body.mobile-nav-open #documentsView,
  body.mobile-nav-open #notesView,
  body.mobile-nav-open #communityView,
  body.mobile-nav-open #locationsView,
  body.mobile-nav-open #calendarView {
    pointer-events: none !important;
  }
  /* Re-enable the drawer itself */
  body.mobile-nav-open #sidebar,
  body.mobile-nav-open #sidebar #sideNav,
  body.mobile-nav-open #sidebar .nav-item,
  body.mobile-nav-open #sidebar .nav-network-block,
  body.mobile-nav-open #sidebar #addBtn,
  body.mobile-nav-open #sidebar .sidebar-footer,
  body.mobile-nav-open #sidebar .sidebar-footer button,
  body.mobile-nav-open #sidebar .board-title-block,
  body.mobile-nav-open #sidebar input,
  body.mobile-nav-open #sidebar select,
  body.mobile-nav-open #sidebar button {
    pointer-events: auto !important;
  }

  #sideNav {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #sideNav .nav-item {
    position: relative !important;
    z-index: 11 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 0 4px 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(217, 119, 6, 0.3);
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  /* Label/icon never steal the row hit target */
  #sideNav .nav-item .nav-icon,
  #sideNav .nav-item .nav-label {
    pointer-events: none !important;
    position: relative !important;
    z-index: 0 !important;
  }
  /* Invisible full-row hit layer above any stray overlays inside the button */
  #sideNav .nav-item::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 12 !important;
    pointer-events: auto !important;
  }
  #sideNav .nav-network-block {
    display: flex !important;
    width: 100% !important;
    position: relative !important;
    z-index: 11 !important;
    gap: 8px !important;
  }
  #sideNav .nav-network-block .nav-item {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  #sideNav .nav-network-block #addBtn,
  #sideNav #addBtn {
    position: relative !important;
    z-index: 12 !important;
    min-height: 48px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  #sideNav .nav-network-block #addBtn::after {
    content: none !important; /* don't block Add Person internal clicks if any */
  }
}


/* =====================================================================
   CANONICAL DESKTOP CHROME (v31) — do not dilute with later overrides
   Toolbar: NETWORK centered; actions flush right
   Side nav: Network + Add Person on one row
   ===================================================================== */
@media (min-width: 768px) {
  #sidebar,
  #sidebar:not(.collapsed) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
  }

  #toolbar {
    display: block !important;
    position: relative !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
    z-index: 500 !important;
    grid-template-columns: none !important;
  }
  #mobileMenuBtn,
  .toolbar-menu-btn {
    display: none !important;
  }
  /* Centered page title */
  #toolbar .toolbar-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  #toolbar .toolbar-center .section-label {
    pointer-events: auto !important;
    color: #d97706 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }
  /* Actions justified to the RIGHT edge of the banner */
  #toolbar .toolbar-end {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    z-index: 510 !important;
  }
  #toolbar .toolbar-end > button,
  #toolbar .toolbar-end > .auth-badge,
  #toolbar .toolbar-end > .user-menu-wrap {
    flex-shrink: 0 !important;
    position: relative !important;
  }
  #toolbar #userMenuBtn,
  #toolbar .user-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #d97706 !important;
    background: #1e293b !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #toolbar #userMenuAvatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  #toolbar .user-menu-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 700 !important;
  }

  /* Network row: [Network ........ + Add Person] */
  #sideNav .nav-network-block {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 6px !important;
    margin: 2px 0 6px !important;
    box-sizing: border-box !important;
  }
  #sideNav .nav-network-block > #navNetwork,
  #sideNav .nav-network-block > .nav-item {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 120px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #sideNav .nav-network-block > #addBtn,
  #sideNav #addBtn.nav-add-person,
  #sideNav #addBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    min-height: 34px !important;
    margin: 0 0 0 auto !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(217, 119, 6, 0.5) !important;
    background: linear-gradient(90deg, rgba(217,119,6,0.28), rgba(217,119,6,0.1)) !important;
    color: #fbbf24 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  body.bsb-readonly #sideNav #addBtn {
    opacity: 0.45 !important;
    /* still on the Network row visually */
  }
}

/* Trial prompt visibility (keep) */
#trialPrompt.trial-panel.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10000 !important;
  position: fixed !important;
  inset: 0 !important;
}


/* Side filter: Search + Tags stacked cleanly (label above each control) */
#sideFilterBlock.side-filter-block,
.side-filter-block {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: auto !important;
  padding: 10px 12px 14px !important;
  box-sizing: border-box !important;
}
.side-filter-block .side-filter-label {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 0 0 !important;
  float: none !important;
  position: static !important;
}
.side-filter-block #searchInput,
.side-filter-block #tagFilter {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Zoom group shifts with profile panel — high priority */
@media (min-width: 768px) {
  body.panel-open #netNavControls .net-nav-right {
    right: calc(360px + 16px) !important;
    left: auto !important;
    transition: right 0.25s ease !important;
  }
  body:not(.panel-open) #netNavControls .net-nav-right {
    right: 14px !important;
  }
}


/* ===== TRIAL MODAL — centered card + dimmed overlay (restored) ===== */
#trialPrompt.trial-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  background: transparent !important;
}
#trialPrompt.trial-panel.hidden {
  display: none !important;
  pointer-events: none !important;
}
#trialPrompt.trial-panel.is-open,
#trialPrompt.trial-panel:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#trialPrompt .trial-panel-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, 0.75) !important;
  pointer-events: auto !important;
  z-index: 0 !important;
}
#trialPrompt .trial-panel-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
  overflow: auto !important;
  margin: 0 auto !important;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
  color: #e2e8f0 !important;
}
#trialPrompt .trial-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid #1e293b !important;
  flex-shrink: 0 !important;
}
#trialPrompt .trial-panel-head h3 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
}
#trialPrompt .trial-panel-x {
  background: transparent !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
#trialPrompt .trial-panel-body {
  padding: 16px 18px !important;
  flex: 1 1 auto !important;
}
#trialPrompt .trial-offer-card {
  background: #020617 !important;
  border: 1px solid #1e293b !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
#trialPrompt .trial-offer-price {
  margin: 0 0 8px !important;
  color: #fbbf24 !important;
  font-size: 1rem !important;
}
#trialPrompt .trial-offer-lead {
  margin: 0 0 10px !important;
  color: #cbd5e1 !important;
}
#trialPrompt .trial-offer-list {
  margin: 0 !important;
  padding-left: 1.2em !important;
  color: #e2e8f0 !important;
}
#trialPrompt .trial-offer-list li {
  margin: 4px 0 !important;
}
#trialPrompt .trial-offer-login-line {
  margin: 14px 0 0 !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
}
#trialPrompt .trial-panel-foot {
  padding: 14px 18px 18px !important;
  display: flex !important;
  justify-content: stretch !important;
  border-top: 1px solid #1e293b !important;
  flex-shrink: 0 !important;
}
#trialPrompt a.trial-start-btn,
#trialPrompt #trialPromptCheckout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Account dropdown stays on-screen */
#toolbar .user-menu-wrap {
  position: relative !important;
  overflow: visible !important;
}
#toolbar .user-menu-dropdown,
.user-menu-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 240px !important;
  max-width: min(280px, calc(100vw - 24px)) !important;
  transform: none !important;
  z-index: 800 !important;
}

/* Add Person label centered */
#sideNav #addBtn,
#sideNav #addBtn.nav-add-person {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}


/* ===== Account dropdown — match PWA (vertical dark card) ===== */
#toolbar .user-menu-dropdown,
.user-menu-dropdown {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-width: 260px !important;
  width: 280px !important;
  max-width: min(300px, calc(100vw - 16px)) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  overflow: hidden !important;
  z-index: 900 !important;
}
/* Higher specificity than #toolbar .user-menu-dropdown so close works */
#toolbar .user-menu-dropdown.hidden,
.user-menu-dropdown.hidden,
#userMenuDropdown.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.user-menu-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #1e293b !important;
  margin: 0 !important;
  background: #0f172a !important;
}
.user-menu-avatar-lg,
#userMenuDropAvatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.user-menu-name {
  font-weight: 700 !important;
  color: #f8fafc !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}
.user-menu-email {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  word-break: break-all !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}
/* Vertical text rows — not blue pills */
.user-menu-item,
#userMenuDropdown .user-menu-item,
button.user-menu-item {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #e2e8f0 !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  white-space: normal !important;
}
.user-menu-item:hover,
#userMenuDropdown .user-menu-item:hover {
  background: #1e293b !important;
  color: #f8fafc !important;
}
.user-menu-logout,
#userMenuDropdown .user-menu-logout {
  color: #f87171 !important;
  border-top: 1px solid #1e293b !important;
  margin-top: 4px !important;
}
.user-menu-logout:hover {
  background: rgba(248, 113, 113, 0.08) !important;
  color: #fca5a5 !important;
}

/* ===== Trial modal — match approved card design ===== */
#trialPrompt.trial-panel.is-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  padding: 20px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  pointer-events: auto !important;
}
#trialPrompt .trial-panel-backdrop {
  display: none !important; /* outer panel already dimmed */
}
#trialPrompt .trial-panel-card {
  width: min(440px, 92vw) !important;
  max-width: 92vw !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 auto !important;
}
#trialPrompt .trial-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px 8px !important;
  border-bottom: none !important;
  background: transparent !important;
}
#trialPrompt .trial-panel-head h3 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
}
#trialPrompt .trial-panel-x {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid #475569 !important;
  background: transparent !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}
#trialPrompt .trial-panel-body {
  padding: 4px 18px 8px !important;
}
#trialPrompt .trial-offer-card {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}
#trialPrompt .trial-offer-price {
  margin: 0 0 12px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
}
#trialPrompt .trial-offer-lead {
  margin: 0 0 10px !important;
  color: #e2e8f0 !important;
  font-size: 0.95rem !important;
}
#trialPrompt .trial-offer-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #cbd5e1 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}
#trialPrompt .trial-offer-list li {
  margin: 0 !important;
  padding: 0 !important;
}
#trialPrompt .trial-offer-list li::before {
  content: "- " !important;
}
#trialPrompt .trial-offer-login-line {
  margin: 12px 0 0 !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
}
#trialPrompt .trial-panel-foot {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 12px 18px 16px !important;
  border-top: none !important;
  background: transparent !important;
}
#trialPrompt a.trial-start-btn,
#trialPrompt #trialPromptCheckout {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  min-height: 40px !important;
  background: #3b82f6 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* trial close X centered in its box */
#trialPrompt .trial-panel-x,
#trialPromptClose {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}
/* trial-panel-x centered v37 */


/* AUTH MODAL Z v41 — always above toolbar/account chrome */
#authModal.modal-overlay {
  z-index: 300000 !important;
}
#authModal.modal-overlay.visible {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}


/* LOGIN FIX v42 — toolbar must receive clicks; auth modal always on top */
#toolbar {
  z-index: 2000 !important;
  pointer-events: auto !important;
  position: relative !important;
}
#toolbar .toolbar-end {
  pointer-events: auto !important;
  z-index: 2010 !important;
}
#toolbar #loginBtn,
#loginBtn {
  display: inline-flex !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2020 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#loginBtn.hidden {
  display: none !important;
}
#authModal.modal-overlay {
  z-index: 300000 !important;
}
#authModal.modal-overlay.visible {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
}
#authModal .modal.auth-modal {
  pointer-events: auto !important;
  z-index: 20001 !important;
  position: relative !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  max-width: 420px !important;
  width: min(420px, 92vw) !important;
}


/* AUTH MSG v44 */
#authMessage:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.35) !important;
  border: 1px solid #ef4444 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin: 0 0 12px 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
}
#authMessage.ok:not(.hidden) {
  color: #bbf7d0 !important;
  background: rgba(20, 83, 45, 0.35) !important;
  border-color: #22c55e !important;
}
#authModal .modal-footer button,
#authSubmitBtn {
  pointer-events: auto !important;
  cursor: pointer !important;
  min-height: 44px !important;
}


/* FREE USER GATES v45 */
#loginBtn.hidden,
#toolbar #loginBtn.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
}
#createBoardBtn.hidden,
.nav-create-board.hidden {
  display: none !important;
}
#authMessage.hidden {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
body.bsb-logged-in .trial-offer-login-line {
  display: none !important;
}

body:not(.bsb-admin) #userMenuViewToggle {
  display: none !important;
}


/* TRIAL CTA v46 */
#trialPrompt.trial-panel.is-open,
#trialPrompt.trial-panel:not(.hidden) {
  z-index: 25000 !important;
  pointer-events: auto !important;
}
#trialPrompt .trial-panel-card,
#trialPrompt a.trial-start-btn,
#trialPrompt #trialPromptCheckout,
#trialPrompt #trialPromptLogin,
#trialPrompt #trialPromptClose {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 25001 !important;
}
#userMenuViewToggle[hidden],
#userMenuViewToggle.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
}


/* BOARD BG SIDEBAR v50 — below Tags, above Create New Board */
#sideNav .board-bg-row,
#boardBgControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
  padding: 0 2px;
}
#sideNav .board-bg-row .secondary,
#boardBgControls .secondary {
  flex: 1 1 auto;
  min-height: 34px;
  font-size: 0.8rem;
}
#sideNav #boardBgBanner {
  margin: 0 0 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #334155);
  max-height: 120px;
}
#sideNav #boardBgBanner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: cover;
}
#sideNav #boardBgBanner.hidden {
  display: none !important;
}

/* RESTRICT BEHAVIOR v64 — full menu always visible; no display:none on nav chrome */
body.bsb-restricted #sideCommEnableBtn,
body.bsb-restricted #sideCommDisableBtn {
  display: none !important;
}
/* Get Full Access always visible for restricted */
body.bsb-restricted #downloadAppBtn,
body.bsb-public-visitor #downloadAppBtn,
body.bsb-free-user #downloadAppBtn {
  display: inline-flex !important;
  visibility: visible !important;
}
@media (min-width: 640px) {
  #mobileMenuBtn, .toolbar-menu-btn {
    display: none !important;
  }
}


/* Prevent any full-screen transparent layer above the form */
#profileSetupModal .modal-body::before,
#profileSetupModal .modal-body::after,
#profileSetupModal .profile-setup-modal::before {
  content: none !important;
  display: none !important;
}

/* PROFILE SETUP CLICK v70 — only capture clicks when modal is open */
#profileSetupModal.modal-overlay {
  z-index: 10050 !important;
}
#profileSetupModal.modal-overlay:not(.visible) {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#profileSetupModal.modal-overlay.visible {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#profileSetupModal.modal-overlay.visible .modal,
#profileSetupModal.modal-overlay.visible .profile-setup-modal,
#profileSetupModal.modal-overlay.visible input,
#profileSetupModal.modal-overlay.visible button,
#profileSetupModal.modal-overlay.visible label,
#profileSetupModal.modal-overlay.visible textarea {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Trial panel: never block the page while hidden */
#trialPrompt.trial-panel.hidden,
#trialPrompt.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ===== CLICK FIX v71 — modals above trial layer; hidden overlays never steal clicks ===== */
.modal-overlay {
  z-index: 11000 !important;
}
.modal-overlay:not(.visible) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.modal-overlay.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-overlay.visible .modal,
.modal-overlay.visible .modal * {
  pointer-events: auto !important;
}
.modal-overlay.visible input,
.modal-overlay.visible textarea,
.modal-overlay.visible select,
.modal-overlay.visible button,
.modal-overlay.visible label {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Trial panel only blocks when explicitly open */
#trialPrompt.trial-panel {
  z-index: 10000 !important;
}
#trialPrompt.trial-panel.hidden,
#trialPrompt.hidden,
#trialPrompt.trial-panel:not(.is-open):not(.visible) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
#trialPrompt.trial-panel.is-open {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10000 !important;
}
/* Kill the dangerous :not(.hidden) full-screen catch-all if trial class is wrong */
#trialPrompt.trial-panel:not(.is-open):not(.visible) {
  pointer-events: none !important;
}

/* ===== PROFILE + CROP v72 — reliable clicks for paid user onboarding ===== */
#profileSetupModal.modal-overlay.visible {
  z-index: 11500 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
#profileSetupModal.modal-overlay.visible .modal,
#profileSetupModal.modal-overlay.visible .profile-setup-modal {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 440px !important;
}
#profileSetupModal.modal-overlay.visible input,
#profileSetupModal.modal-overlay.visible textarea,
#profileSetupModal.modal-overlay.visible button,
#profileSetupModal.modal-overlay.visible label {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 2 !important;
}
#profileSetupModal.profile-cropping {
  pointer-events: none !important;
}
#cropModal.modal-overlay.visible {
  z-index: 12050 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
#cropModal.modal-overlay.visible .modal,
#cropModal.modal-overlay.visible input,
#cropModal.modal-overlay.visible button,
#cropModal.modal-overlay.visible #cropCanvas,
#cropModal.modal-overlay.visible #cropContainer {
  pointer-events: auto !important;
}


/* ===== Native dialog profile + crop v73 (top layer, always clickable) ===== */
dialog.profile-setup-dialog, dialog.crop-dialog { /* repositioned in v76 */ }
dialog.profile-setup-dialog::backdrop,
dialog.crop-dialog::backdrop {
  background: rgba(2, 6, 23, 0.72);
}
.profile-setup-inner,
.crop-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.profile-setup-inner .modal-header,
.crop-dialog-inner .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile-setup-inner .modal-body,
.crop-dialog-inner .modal-body {
  padding: 20px;
  overflow-y: auto;
}
.profile-setup-inner .modal-footer,
.crop-dialog-inner .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.profile-setup-inner input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #f1f5f9;
}
.profile-setup-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.profile-setup-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #1e293b;
  border: 2px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-setup-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#profileAvatarPickBtn,
#profileSetupSave,
#profileSetupSkip,
#profileSetupClose,
#cropApply,
#cropCancel {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* ===== Add Person native dialog v74 ===== */
dialog.add-person-dialog { /* repositioned in v76 */ }
dialog.add-person-dialog::backdrop {
  background: rgba(2, 6, 23, 0.72);
}
.add-person-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.add-person-inner .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-person-inner .modal-body {
  padding: 20px;
  overflow-y: auto;
}
.add-person-inner .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.add-person-inner input[type="text"],
.add-person-inner input[type="url"],
.add-person-inner textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #f1f5f9;
  pointer-events: auto !important;
}
.add-person-inner button {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.add-person-inner .form-row {
  margin-bottom: 14px;
}

/* ===== Dialog CENTER v77 (final) — card in middle of viewport ===== */
dialog.add-person-dialog,
dialog.profile-setup-dialog,
dialog.crop-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  width: min(480px, calc(100vw - 32px)) !important;
  max-width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(88vh, calc(100dvh - 32px)) !important;
  height: auto !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  overflow: auto !important;
}
dialog.add-person-dialog::backdrop,
dialog.profile-setup-dialog::backdrop,
dialog.crop-dialog::backdrop {
  background: rgba(2, 6, 23, 0.72) !important;
}
.add-person-inner,
.profile-setup-inner,
.crop-dialog-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.add-person-inner .modal-body,
.profile-setup-inner .modal-body,
.crop-dialog-inner .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: min(60vh, 520px) !important;
}
@media (max-width: 640px) {
  dialog.add-person-dialog,
  dialog.profile-setup-dialog,
  dialog.crop-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* ===== PWA / mobile chrome v78 ===== */

/* Community admin buttons — never show unless admin script reveals them */
#sideCommEnableBtn.hidden,
#sideCommDisableBtn.hidden,
#commEnableBtn.hidden,
#commDisableBtn.hidden,
#sideCommEnableBtn[hidden],
#sideCommDisableBtn[hidden],
body:not(.bsb-admin) #sideCommEnableBtn,
body:not(.bsb-admin) #sideCommDisableBtn,
body:not(.bsb-admin) #commEnableBtn,
body:not(.bsb-admin) #commDisableBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

@media (max-width: 640px) {
  /* Logged-out / mobile top banner: horizontal scroll, no scramble */
  #toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    min-height: 52px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }
  #toolbar .toolbar-center {
    position: static !important;
    transform: none !important;
    left: auto !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
  }
  #toolbar .toolbar-end {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  #toolbar #downloadAppBtn,
  #toolbar #installAppBtn,
  #toolbar #loginBtn {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #toolbar #authBadge {
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
  }
  #toolbar #userMenuBtn,
  #toolbar .user-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
  }
  #toolbar .user-menu-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
  }
  /* Account dropdown always on-screen on PWA */
  #userMenuDropdown,
  #toolbar .user-menu-dropdown {
    position: fixed !important;
    z-index: 20000 !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* Add Person / profile dialogs — full usable width, centered */
  dialog.add-person-dialog,
  dialog.profile-setup-dialog,
  dialog.crop-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
}

/* ===== Add Person classic centered modal v79 ===== */
#addModal.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(2, 6, 23, 0.72) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
#addModal.modal-overlay.visible {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#addModal .add-person-modal,
#addModal .modal {
  position: relative !important;
  margin: auto !important;
  width: min(480px, calc(100vw - 32px)) !important;
  max-width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(88vh, calc(100dvh - 32px)) !important;
  overflow: auto !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  pointer-events: auto !important;
}
#addModal.visible input,
#addModal.visible textarea,
#addModal.visible button {
  pointer-events: auto !important;
}
@media (max-width: 640px) {
  #addModal .add-person-modal,
  #addModal .modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* ===== Update Board button v81 ===== */
#updateBoardBtn.nav-update-board {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100% - 12px) !important;
  margin: 6px 6px 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(217, 119, 6, 0.85) !important;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.28), rgba(217, 119, 6, 0.1)) !important;
  color: #fbbf24 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease !important;
}
#updateBoardBtn.nav-update-board.hidden {
  display: none !important;
}
#updateBoardBtn.nav-update-board.update-ready {
  opacity: 1 !important;
  cursor: pointer !important;
  color: #fbbf24 !important;
  border-color: rgba(217, 119, 6, 0.85) !important;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.28), rgba(217, 119, 6, 0.1)) !important;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 0 14px rgba(217, 119, 6, 0.55),
    0 0 28px rgba(217, 119, 6, 0.25) !important;
  animation: bsbUpdateGlow 2s ease-in-out infinite !important;
}
#updateBoardBtn.nav-update-board.update-ready:hover {
  filter: brightness(1.08);
}
@keyframes bsbUpdateGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.35),
      0 0 12px rgba(217, 119, 6, 0.45),
      0 0 22px rgba(217, 119, 6, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, 0.55),
      0 0 18px rgba(217, 119, 6, 0.7),
      0 0 36px rgba(251, 191, 36, 0.3);
  }
}

/* ===== Account menu desktop reliability v82 ===== */
#userMenuWrap:not(.hidden) {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 600 !important;
}
#userMenuBtn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 601 !important;
}
#userMenuDropdown:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 30000 !important;
}
#toolbar .toolbar-end {
  pointer-events: auto !important;
}
#toolbar .toolbar-end #userMenuWrap,
#toolbar .toolbar-end #userMenuBtn {
  pointer-events: auto !important;
}

/* ===== Account button v83 — cannot be blocked ===== */
#loginBtn.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
#userMenuWrap:not(.hidden),
#toolbar #userMenuWrap:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 800 !important;
}
#userMenuBtn,
#toolbar #userMenuBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #d97706 !important;
  background: #1e293b !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 801 !important;
}
#userMenuDropdown:not(.hidden),
body > #userMenuDropdown:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  z-index: 40000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Account menu MUST be visible v86 ===== */
#userMenuDropdown,
body > #userMenuDropdown {
  /* defaults when closed handled by JS */
}
#userMenuDropdown[data-open="1"],
body > #userMenuDropdown[data-open="1"] {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  z-index: 2147483647 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #0f172a !important;
  border: 1px solid #d97706 !important;
  border-radius: 14px !important;
  min-width: 240px !important;
  min-height: 160px !important;
}

/* Get Full Access prompt heading */
.trial-offer-heading,
h4.trial-offer-price.trial-offer-heading {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #f1f5f9 !important;
  margin: 0 0 12px 0 !important;
}

/* ===== Shared boards v90 ===== */
.share-board-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.share-board-controls.hidden { display: none !important; }
.share-board-btn {
  width: 100%;
  font-size: 0.8rem !important;
  padding: 8px 10px !important;
}
.shared-boards-list {
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
}
.shared-boards-list.hidden { display: none !important; }
.shared-boards-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 6px;
}
.shared-board-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.shared-board-row:last-child { margin-bottom: 0; }
.shared-board-title {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-board-dl {
  flex-shrink: 0;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}
#bsbAccountMenu .bsb-admin-share {
  border-top: 1px solid #334155;
  padding: 10px 12px 12px;
}
#bsbAccountMenu .bsb-admin-share h4 {
  margin: 0 0 8px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}
#bsbAccountMenu .bsb-grant-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: #e2e8f0;
}
#bsbAccountMenu .bsb-grant-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bsbAccountMenu .bsb-grant-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
#bsbAccountMenu .bsb-grant-add input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.8rem;
}

/* ===== Crop modal centered overlay v91 ===== */
#cropModal.modal-overlay,
#cropModal.crop-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 13000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(2, 6, 23, 0.78) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
#cropModal.modal-overlay.visible,
#cropModal.crop-overlay.visible {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#cropModal .crop-modal-card,
#cropModal .modal {
  position: relative !important;
  margin: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  max-height: min(90vh, calc(100dvh - 24px)) !important;
  overflow: auto !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  pointer-events: auto !important;
}
#cropModal.visible input,
#cropModal.visible button,
#cropModal.visible #cropCanvas {
  pointer-events: auto !important;
}

/* ===== Delete board + count v94 ===== */
.delete-board-btn {
  width: 100%;
  margin-top: 8px;
  font-size: 0.8rem !important;
  padding: 8px 10px !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}
.delete-board-btn:hover {
  background: rgba(248, 113, 113, 0.12) !important;
}
.board-count-hint {
  margin-top: 6px;
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: right;
}
.board-count-hint.at-cap {
  color: #fbbf24;
  font-weight: 600;
}

/* Shared boards list must stay visible for paid/admin */
#sharedBoardsList:not(.hidden),
.shared-boards-list:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 10px 0 12px !important;
  padding: 10px !important;
  border: 1px solid #d97706 !important;
  border-radius: 10px !important;
  background: #0f172a !important;
}
.shared-boards-label {
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

/* Share success status under Share this board */
.share-board-status {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #94a3b8;
}
.share-board-status.is-sharing {
  color: #fbbf24;
  font-weight: 600;
}

/* ===== Network interaction fix v101 ===== */
#network {
  pointer-events: auto !important;
  z-index: 5 !important;
}
#network canvas,
#network .vis-network {
  pointer-events: auto !important;
}
#emptyState.hidden {
  display: none !important;
  pointer-events: none !important;
}
#mainBg {
  pointer-events: none !important;
}
#panel.open {
  pointer-events: auto !important;
  z-index: 50 !important;
  display: flex !important;
  visibility: visible !important;
}

.shared-board-empty {
  font-size: 0.8rem;
  color: #94a3b8;
  padding: 4px 0;
}

/* ===== PWA v116 — person panel full screen + dialogs/account menu fixed ===== */
@media (max-width: 900px) {
  /* Person profile panel: full viewport under toolbar */
  #panel,
  #panel.open {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    transform: translateX(100%) !important;
    z-index: 250 !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #panel.open {
    transform: translateX(0) !important;
  }
  #panel-body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Hide network chrome under full-screen panel */
  body.panel-open #netNavControls,
  body.panel-open #nodeVideoBar {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Native dialog centering that works on Android Chrome / PWA */
dialog.profile-setup-dialog,
dialog.add-person-dialog,
dialog.crop-dialog {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  transform: none !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  max-height: min(90dvh, calc(100vh - 24px)) !important;
  height: fit-content !important;
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  overflow: auto !important;
  z-index: 2147483646 !important;
}
dialog.profile-setup-dialog::backdrop,
dialog.add-person-dialog::backdrop,
dialog.crop-dialog::backdrop {
  background: rgba(2, 6, 23, 0.75) !important;
}

/* Account menu always top-right under avatar on phones */
#bsbAccountMenu {
  position: fixed !important;
  z-index: 2147483647 !important;
  max-width: calc(100vw - 16px) !important;
}

/* Map must receive wheel / touch for zoom */
#locMap,
#locMap .leaflet-container {
  pointer-events: auto !important;
  touch-action: none !important;
}
#locMap .leaflet-control {
  pointer-events: auto !important;
}

/* Crop always above everything when visible (profile dialog is closed during crop) */
#cropModal.modal-overlay.visible {
  z-index: 2147483647 !important;
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(2, 6, 23, 0.8) !important;
}
#cropModal.modal-overlay.visible .crop-modal-card,
#cropModal.modal-overlay.visible .modal {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  margin: auto !important;
}
dialog.profile-setup-dialog.profile-cropping {
  display: none !important;
}

/* Contact Us / Disclaimer footer links */
#contactUsBtn,
#disclaimerBtn {
  text-align: center;
}
#contactUsModal .modal,
#disclaimerModal .modal {
  width: min(480px, calc(100vw - 32px));
  max-height: min(88vh, calc(100dvh - 32px));
  overflow: auto;
}
#contactUsModal textarea,
#disclaimerModal .disclaimer-body {
  width: 100%;
  box-sizing: border-box;
}
.disclaimer-body {
  color: #cbd5e1;
  line-height: 1.55;
  font-size: 0.92rem;
}

/* ===== PWA v127 — pin account icon top-right, never collide with Download ===== */
@media (max-width: 900px) {
  #toolbar {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding-right: calc(52px + env(safe-area-inset-right, 8px)) !important;
    overflow: hidden !important;
  }
  #toolbar .toolbar-end {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }
  #toolbar #copyPublishedBtn,
  #toolbar #downloadAppBtn,
  #toolbar #installAppBtn {
    max-width: 46vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
  }
  /* Account avatar: fixed to the right edge, same size as hamburger */
  #toolbar .user-menu-wrap {
    position: absolute !important;
    right: max(8px, env(safe-area-inset-right, 8px)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    z-index: 540 !important;
    overflow: visible !important;
    flex: none !important;
  }
  #toolbar #userMenuBtn,
  #toolbar .user-menu-btn {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #d97706 !important;
    background: #0b1220 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #toolbar #userMenuAvatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
  }
}

/* v128 — calendar / add-person / map must receive clicks */
#calendarView:not(.hidden) {
  pointer-events: auto !important;
  z-index: 90 !important;
}
#chronoToolbar,
#chronoHistory,
#chronoSchedule,
#chronoEraBand,
#chronoEventForm,
#chronoEventList,
.chrono-era-oia,
.chrono-mode-toggle,
.chrono-mode-toggle button,
#chronoAddEventBtn,
#chronoEvSave,
#chronoEvCancel,
#chronoEvTitle,
#chronoEvWhen,
#chronoEvKind,
#chronoEvPassage,
#chronoEvNotes,
#chronoOiaObs,
#chronoOiaInt,
#chronoOiaApp {
  pointer-events: auto !important;
}
#calendarHeader,
#calPrev,
#calNext,
#calendarGrid,
.cal-day-row,
#dayDetail:not(.hidden) {
  pointer-events: auto !important;
}
#addModal.modal-overlay.visible {
  z-index: 20000 !important;
  pointer-events: auto !important;
}
#addModal.modal-overlay.visible .modal,
#addModal.modal-overlay.visible input,
#addModal.modal-overlay.visible textarea,
#addModal.modal-overlay.visible button {
  pointer-events: auto !important;
}
#locMap,
#locMap .leaflet-container {
  pointer-events: auto !important;
}

.doc-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.doc-item .doc-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.doc-remove-btn {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
  background: transparent !important;
}
.doc-remove-btn:hover {
  background: rgba(127, 29, 29, 0.25) !important;
}

/* v130 Locations map must receive mouse drag / wheel / click */
#locationsView:not(.hidden) {
  pointer-events: auto !important;
  z-index: 80 !important;
}
#locationsView:not(.hidden) #locMap,
#locationsView:not(.hidden) #locMap .leaflet-container,
#locationsView:not(.hidden) #locMap .leaflet-pane,
#locationsView:not(.hidden) #locMap .leaflet-control-container {
  pointer-events: auto !important;
}
#locationsView:not(.hidden) #locMap .leaflet-container {
  cursor: grab !important;
}
#locationsView:not(.hidden) #locMap .leaflet-container.leaflet-drag-target,
#locationsView:not(.hidden) #locMap .leaflet-container:active {
  cursor: grabbing !important;
}

/* v136 Contact Us / Disclaimer must receive clicks */
#contactUsModal.modal-overlay.visible,
#disclaimerModal.modal-overlay.visible {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#contactUsModal.modal-overlay.visible .modal,
#disclaimerModal.modal-overlay.visible .modal,
#contactUsModal.modal-overlay.visible input,
#contactUsModal.modal-overlay.visible textarea,
#contactUsModal.modal-overlay.visible button,
#disclaimerModal.modal-overlay.visible button {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* v137 light mode + Update Board glow */
#deleteBoardBtn {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
body:not(.dark) #deleteBoardBtn {
  color: #b91c1c !important;
  background: #fff !important;
  border-color: rgba(185, 28, 28, 0.4) !important;
}
body:not(.dark) #sharedBoardsList:not(.hidden),
body:not(.dark) .shared-boards-list:not(.hidden) {
  background: #fff !important;
  border-color: #d97706 !important;
  color: #0f172a !important;
}
body:not(.dark) .shared-boards-label {
  color: #b45309 !important;
}
body:not(.dark) #sharedBoardsList button {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
}
body:not(.dark) #searchInput,
body:not(.dark) #tagFilter,
body:not(.dark) .side-filter-block #searchInput,
body:not(.dark) .side-filter-block #tagFilter {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
}
body:not(.dark) .side-filter-label {
  color: #64748b !important;
}
body:not(.dark) #updateBoardBtn.nav-update-board.update-ready {
  color: #b45309 !important;
}
#updateBoardBtn.nav-update-board:not(.update-ready) {
  opacity: 0.85 !important;
  cursor: pointer !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
  background: #1e293b !important;
  box-shadow: none !important;
  animation: none !important;
}
body:not(.dark) #updateBoardBtn.nav-update-board:not(.update-ready) {
  color: #334155 !important;
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* v139 — entire calendar day row is the hit target */
#calendarGrid.cal-list,
#calendarGrid {
  width: 100% !important;
  max-width: none !important;
}
#calendarGrid.cal-list .cal-day-row,
.cal-day-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.cal-day-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.cal-day-row > * {
  position: relative;
  z-index: 3;
  pointer-events: none !important;
}

/* =====================================================================
   v140 PWA drawer + toolbar (phones / PWA only)
   ===================================================================== */
@media (max-width: 900px) {
  #toolbar {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 8px 10px !important;
    overflow: visible !important;
  }
  #toolbar .toolbar-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;
  }
  #toolbar .toolbar-center .section-label {
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #toolbar .toolbar-end {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  #toolbar .user-menu-wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    overflow: visible !important;
  }
  #toolbar #userMenuBtn,
  #toolbar .user-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #d97706 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #toolbar #userMenuAvatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  #toolbar #copyPublishedBtn {
    display: none !important;
  }

  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 92vw) !important;
    max-width: 92vw !important;
    height: 100dvh !important;
    z-index: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #sidebar .board-title-block,
  #sidebar .sidebar-brand,
  #sidebar .sidebar-footer {
    flex: 0 0 auto !important;
  }
  #sidebar #sideNav {
    position: relative !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    width: 100% !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }
  #sideNav .nav-network-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 0 4px 0 !important;
  }
  #sideNav .nav-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 2 !important;
  }
  #sideNav .nav-item .nav-icon,
  #sideNav .nav-item .nav-label {
    pointer-events: none !important;
  }
  #sideNav .nav-item::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: auto !important;
  }
  #sideNav .nav-network-block > .nav-item {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  #sideNav #addBtn,
  #sideNav #addBtn.nav-add-person {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    z-index: 4 !important;
    pointer-events: auto !important;
  }
  #sideNav #addBtn::after {
    content: none !important;
  }
  body.mobile-nav-open #locationsView,
  body.mobile-nav-open #communityView,
  body.mobile-nav-open #calendarView,
  body.mobile-nav-open #network,
  body.mobile-nav-open #documentsView,
  body.mobile-nav-open #notesView,
  body.mobile-nav-open #evidenceView,
  body.mobile-nav-open #charactersView {
    pointer-events: none !important;
  }
}

/* ---- Template picker (Investigation vs Bible Study) ---- */
.template-badge {
  margin: 8px 0 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #cbd5e1;
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.25);
}
.template-badge.is-bible {
  color: #fde68a;
  background: rgba(217,119,6,0.18);
  border-color: rgba(217,119,6,0.45);
}
.tmpl-card { cursor: pointer; }
.nav-templates-btn {
  margin-top: 8px;
  border: 1px solid rgba(217,119,6,0.35) !important;
  color: #fbbf24 !important;
}
.nav-templates-btn:hover {
  background: rgba(217,119,6,0.12) !important;
}
body.bsb-template-bible .nav-templates-btn {
  background: rgba(217,119,6,0.16) !important;
}
#templatePickerModal {
  z-index: 2200;
}
#templatePickerModal.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}
#templatePickerModal.visible,
#templatePickerModal.is-open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.template-picker-modal {
  width: min(860px, 94vw);
  max-width: 860px;
  max-height: 92vh;
}
.tmpl-picker-body {
  padding: 8px 16px 16px;
  overflow: auto;
}
.tmpl-lead {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.tmpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tmpl-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--input-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tmpl-card h4 {
  margin: 0;
  font-size: 1.05rem;
}
.tmpl-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.tmpl-card-bible {
  border-color: rgba(217,119,6,0.45);
}
.tmpl-board-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  max-height: 160px;
  overflow: auto;
}
.tmpl-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tmpl-board-row {
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.tmpl-board-row:hover {
  border-color: rgba(217,119,6,0.6);
}
.tmpl-board-row.is-current {
  border-color: #d97706;
  color: #fbbf24;
}
.tmpl-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
@media (max-width: 700px) {
  .tmpl-grid {
    grid-template-columns: 1fr;
  }
}

#evidenceView.scripture-reader-only .page-toolbar,
#evidenceView.scripture-reader-only #evFolderBar,
#evidenceView.scripture-reader-only #evidenceGrid,
#evidenceView.scripture-reader-only #biblePassageAdd {
  display: none !important;
}
#evidenceView.scripture-reader-only .bible-passage-bar {
  border-bottom: 0;
  background: transparent;
}
.bible-passage-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  background: #0f172a;
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
}
.bible-passage-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.bible-passage-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fbbf24;
  margin: 0;
  flex: 0 0 auto;
  min-width: 72px;
}
#bibleCorpusSearch {
  flex: 1 1 auto;
  min-width: 0;
}
.scripture-search-body {
  padding: 8px 16px 24px;
}
.scripture-search-note {
  margin: 0 0 10px;
  color: #94a3b8;
  font-size: 0.85rem;
}
.scripture-search-hit {
  border: 1px solid rgba(217, 164, 65, 0.45);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: #0b1220;
}
.scripture-search-hit-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.scripture-search-tag {
  display: inline-block;
  min-width: 3.2em;
  margin-right: 6px;
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.scripture-search-snip {
  margin: 0;
  color: #e2e8f0;
  line-height: 1.45;
  font-family: "Noto Sans", sans-serif;
}
.scripture-search-mark {
  background: #fbbf24;
  color: #1c1403;
  border-radius: 2px;
  padding: 0 1px;
}
.scripture-search-open {
  background: none;
  border: 0;
  padding: 0;
  color: #93c5fd;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.scripture-search-open:hover { color: #bfdbfe; }
.scripture-search-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
body.bsb-phone .bible-corpus-row,
body.bsb-pwa .bible-corpus-row,
body.bsb-phone .writings-toolbar,
body.bsb-pwa .writings-toolbar {
  flex-wrap: wrap;
}
body.bsb-phone .scripture-search-hit-h,
body.bsb-pwa .scripture-search-hit-h {
  flex-wrap: wrap;
}
body.bsb-phone .scripture-search-body,
body.bsb-pwa .scripture-search-body {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body:not(.bsb-template-bible) #biblePassageBar {
  display: none !important;
}
body.bsb-template-bible #biblePassageBar {
  display: flex !important;
}
#biblePassageBook {
  width: 148px;
  flex: 0 0 148px;
  max-width: 42vw;
}
#biblePassageRef {
  flex: 1 1 auto;
  min-width: 0;
}
#bibleStrongsRef {
  flex: 0 1 180px;
  width: 180px;
  max-width: 220px;
}
#biblePassageTrans {
  width: 76px;
  flex: 0 0 76px;
}
#biblePassageLookup,
#biblePassageAdd,
#bibleStrongsLookup {
  flex: 0 0 auto;
  white-space: nowrap;
}
.bible-passage-status {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ev-tile-passage {
  text-align: left;
  background: #111827;
  border: 1px solid rgba(217,119,6,0.35);
}
.ev-passage-preview {
  padding: 10px;
  height: 100%;
  min-height: 120px;
}
.ev-passage-ref {
  font-weight: 700;
  color: #fbbf24;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.ev-passage-snip {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #cbd5e1;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
#evViewerPassage {
  width: 100%;
  max-height: 55vh;
  overflow: auto;
  padding: 12px 16px;
  color: var(--text);
  line-height: 1.55;
}
.ev-passage-head {
  font-weight: 700;
  margin-bottom: 10px;
  color: #d97706;
}
.ev-passage-line {
  margin: 0 0 8px;
}
.ev-passage-line sup {
  color: #d97706;
  font-weight: 700;
  padding-right: 4px;
}
.ev-passage-src {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

#addVolumeBtn.nav-add-volume,
#addBookBtn.nav-add-book {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(217,119,6,0.45);
  background: rgba(15,23,42,0.9);
  color: #fde68a;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.network-submenu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 8px 12px;
}
.network-submenu.hidden { display: none !important; }
#navNetwork .nav-caret {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.7;
}
#navNetwork[aria-expanded="false"] .nav-caret { transform: rotate(-90deg); display: inline-block; }
#sideNav .nav-network-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
#sideNav .network-submenu #addBtn,
#sideNav .network-submenu #addBookBtn,
#sideNav .network-submenu #addVolumeBtn {
  width: 100% !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
body:not(.bsb-template-bible) #addBookBtn {
  display: none !important;
}
.panel-book-hint {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fde68a;
  background: rgba(217,119,6,0.12);
  border: 1px solid rgba(217,119,6,0.35);
  border-radius: 8px;
}
body.bsb-panel-book #panel-body .panel-section:nth-of-type(n+3) {
  display: none;
}

.chrono-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
body:not(.bsb-template-bible) #chronoToolbar,
body:not(.bsb-template-bible) #chronoHistory {
  display: none !important;
}
.chrono-mode-toggle {
  display: inline-flex;
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 9px;
  overflow: hidden;
}
.chrono-mode-toggle button {
  background: transparent;
  color: #cbd5e1;
  border: 0;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.chrono-mode-toggle button.active {
  background: rgba(217,119,6,0.28);
  color: #fde68a;
}
.chrono-toolbar-hint {
  font-size: 0.78rem;
  color: #94a3b8;
}
.chrono-history {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.chrono-era-band {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  flex: 0 0 auto;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
.chrono-era-band::-webkit-scrollbar { height: 6px; }
.chrono-era-band::-webkit-scrollbar-track { background: transparent; }
.chrono-era-band::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 99px;
}
.chrono-era-chip {
  flex: 0 0 auto;
  min-width: 108px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #1e293b;
  background: #0f172a;
  color: #e2e8f0;
  cursor: pointer;
}
.chrono-era-chip strong { display: block; font-size: 0.8rem; color: #fde68a; }
.chrono-era-chip span { display: block; font-size: 0.68rem; color: #94a3b8; margin-top: 2px; }
.chrono-era-chip.active {
  border-color: #d97706;
  background: rgba(217,119,6,0.16);
}
.chrono-history-body { min-width: 0; }
.chrono-era-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 2px 0 12px;
}
.chrono-era-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f8fafc;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}
#chronoAddEventBtn {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(217,119,6,0.6);
  background: #d97706;
  color: #0b1220;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.chrono-event-form,
.chrono-era-oia {
  border: 1px solid #1e293b;
  background: #0f172a;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}
.chrono-event-form label,
.chrono-era-oia label {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 8px;
}
.chrono-event-form input,
.chrono-event-form select,
.chrono-event-form textarea,
.chrono-era-oia textarea {
  width: 100%;
  margin-top: 4px;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 6px 8px;
}
#chronoEvNotes {
  min-height: 160px;
  resize: vertical;
}
.chrono-date-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
}
.chrono-fig-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chrono-fig-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #1e293b;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #e2e8f0;
}
.chrono-fig-pick img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.chrono-event-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0b1220;
}
.chrono-event-card h3 { margin: 0 0 4px; font-size: 0.95rem; color: #f8fafc; }
.chrono-when, .chrono-pass, .chrono-ev-notes { margin: 0 0 4px; font-size: 0.8rem; color: #94a3b8; }
.chrono-kind {
  display: inline-block;
  margin-right: 6px;
  color: #fbbf24;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chrono-fig-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chrono-fig-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: #e2e8f0;
}
.chrono-fig-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.chrono-empty { color: #94a3b8; font-size: 0.88rem; }
.chrono-era-oia h3 { margin: 0 0 10px; font-size: 0.85rem; color: #fde68a; }
.chrono-form-actions { display: flex; gap: 8px; }
@media (max-width: 700px) {
  .chrono-date-row { grid-template-columns: 1fr; }
  .chrono-event-card { flex-direction: column; }
  .chrono-era-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #chronoAddEventBtn { margin-left: auto; }
}

.notify-bell-btn {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 1px solid rgba(251,191,36,0.35);
  background: rgba(15,23,42,0.9);
  color: #fde68a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 520;
}
.notify-bell-btn.hidden { display: none !important; }
.notify-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
}
.notify-badge.hidden { display: none !important; }
.notify-panel {
  position: fixed;
  top: 56px;
  right: max(10px, env(safe-area-inset-right, 0px));
  left: auto;
  width: min(360px, calc(100vw - 20px - env(safe-area-inset-right, 0px)));
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  z-index: 24000;
  overflow: hidden;
}
.notify-panel.hidden { display: none !important; }
.notify-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,0.2);
  color: #fde68a;
}
.notify-panel-actions { display: flex; gap: 6px; }
.notify-enable-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.notify-enable-status { font-size: 0.75rem; color: #94a3b8; }
.notify-list { overflow-y: auto; overflow-x: hidden; padding: 8px; }
.notify-empty { color: #94a3b8; font-size: 0.85rem; padding: 16px 8px; }
.notify-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  color: #e2e8f0;
  cursor: pointer;
  overflow: hidden;
}
.notify-item.unread { border-color: rgba(251,191,36,0.45); background: rgba(217,119,6,0.12); }
.notify-item-title { font-weight: 650; font-size: 0.88rem; }
.notify-item-body { font-size: 0.8rem; color: #cbd5e1; margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; }
.notify-item-meta { font-size: 0.7rem; color: #94a3b8; margin-top: 6px; overflow-wrap: anywhere; word-break: break-word; }
.notify-update-btn {
  display: inline-block;
  margin-top: 8px;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 650;
}
#toolbar .toolbar-end > #notifyBellBtn { flex-shrink: 0; }

.bible-reader {
  position: fixed;
  inset: 0;
  z-index: 26000;
  background: rgba(2, 6, 23, 0.72);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.bible-reader.hidden { display: none !important; }
.overlay-site-name {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fbbf24;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(251,191,36,0.18);
}
.bible-reader-card {
  width: 100%;
  max-width: none;
  background: #0f172a;
  border: 0;
  border-bottom: 1px solid rgba(251,191,36,0.35);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.bible-reader-card > .overlay-site-name,
.bible-reader-card > .bible-reader-head,
.bible-reader-card > .bible-reader-tools {
  flex: 0 0 auto !important;
}
.bible-reader-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  min-height: 34px;
  border-bottom: 1px solid rgba(148,163,184,0.2);
}
.bible-reader-head button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}
.bible-reader-titlewrap { flex: 1; min-width: 0; }
.bible-reader-titlewrap h3 { margin: 0; color: #fde68a; font-size: 0.92rem; }
.bible-reader-ref-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.bible-reader-ref-edit { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bible-reader-ref-edit #bibleReaderBook {
  flex: 0 0 210px;
  max-width: 42%;
  height: 28px;
  background: #0b1220;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 6px;
}
.bible-reader-ref-edit input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 420px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fde68a;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0 4px;
  line-height: 1.2;
}
.bible-reader-ref-edit input:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(15, 23, 42, 0.6);
}
.bible-reader-ref-edit input.is-locked { cursor: default; }
.bible-reader-hint { margin: 4px 0 0; color: #94a3b8; font-size: 0.75rem; }
.bible-reader-src-picks,
#bibleReaderHint { display: none !important; }
.bible-src-chip {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
}
.bible-src-chip.is-on {
  border-color: #fbbf24;
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
}
.bible-src-chip.is-off,
.bible-src-chip:disabled {
  opacity: 0.4;
  cursor: default;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.scripture-cite {
  color: #60a5fa;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.scripture-cite:hover { color: #93c5fd; }
.scripture-cite-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 0;
}
.scripture-cite-bar.hidden { display: none; }
.loc-item-notes {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-top: 4px;
  white-space: pre-wrap;
}
.bible-reader-tools {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  overflow: visible !important;
  min-height: 48px;
  height: auto !important;
  max-height: none !important;
}
.bible-reader-tools-row,
.bible-m-modes,
.bible-m-trans,
.bible-m-actions { display: contents; }
.bible-reader-tabs { display: flex; flex: 0 0 auto; gap: 4px; }
.bible-reader-toggles {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.72rem;
  flex: 0 1 auto;
}
.bible-reader-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
}
.bible-reader-addlabel { display: none !important; }
#bibleReaderAddTrans { display: none !important; }
#bibleReaderAddBtn {
  height: 30px;
  padding: 0 12px;
  margin: 0 4px 0 0;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1;
  flex: 0 0 auto;
  border-radius: 8px;
}
.bible-reader-findgroup {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  min-width: 0;
}
.bible-reader-remove {
  margin: 0;
  height: 32px;
  font-size: 0.8rem;
  padding: 0 10px;
  line-height: 1;
  white-space: nowrap;
}
.bible-reader-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px 16px; }
.bible-reader-tablewrap { overflow-x: auto; }
.bible-reader-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.bible-reader-table th, .bible-reader-table td {
  border-bottom: 1px solid rgba(148,163,184,0.14);
  padding: 8px 10px;
  vertical-align: top;
  font-size: 0.92rem;
  color: #e2e8f0;
  line-height: 1.45;
}
.bible-reader-table th { color: #fde68a; text-align: left; position: sticky; top: 0; background: #0f172a; }
.bible-reader-table .th-sub { display: block; font-weight: 500; color: #94a3b8; font-size: 0.7rem; }
.bible-reader-table .vr { width: 36px; color: #fbbf24; font-weight: 700; }
.bible-vr-btn {
  background: transparent;
  border: 0;
  color: #fbbf24;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  min-width: 1.6rem;
}
.bible-vr-btn:hover { background: rgba(251,191,36,0.16); color: #fde68a; }
.bible-verse-iso-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #cbd5e1;
  padding: 6px 2px 10px;
}
.bible-verse-iso-clear {
  background: #1e293b;
  border: 1px solid rgba(251,191,36,0.4);
  color: #fde68a;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
#bibleReaderPinBtn.hidden { display: none !important; }
#bibleReaderPinBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.bible-pin-btn,
.bible-pin-save {
  background: #1d4ed8;
  border: 1px solid #3b82f6;
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
.bible-pin-btn[disabled] { opacity: 0.55; cursor: default; }
.bible-pin-save { background: #0f766e; border-color: #14b8a6; }
.bible-pin-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 12px;
}
.bible-pin-tray-h { font-size: 0.78rem; color: #94a3b8; margin-right: 4px; }
.bible-pin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 3px 8px 3px 10px;
  font-size: 0.78rem;
  color: #e2e8f0;
}
.bible-pin-x {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.bible-trans-tag { display: none; }
.bible-reader-src, .bible-reader-empty { color: #94a3b8; font-size: 0.78rem; }
#biblePassageLookup {
  background: linear-gradient(90deg, rgba(217,119,6,0.35), rgba(217,119,6,0.12));
  border: 1px solid rgba(217,119,6,0.5);
  color: #fde68a;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 650;
  cursor: pointer;
}
@media (max-width: 700px) {
  .bible-reader-table { min-width: 0; }
  .bible-reader-table thead { display: none; }
  .bible-reader-table tr { display: block; margin: 0 0 14px; border: 1px solid rgba(148,163,184,0.16); border-radius: 8px; padding: 8px; }
  .bible-reader-table td { display: block; border: 0; padding: 8px 0 10px; }
  .bible-reader-table td.vr { padding-bottom: 4px; font-size: 1rem; }
  .bible-trans-tag {
    display: block;
    color: #fde68a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
  }
}

.strongs-reader-card { width: min(720px, 100%); }
.strongs-lemma { font-size: 1.4rem; color: #fde68a; margin: 8px 0 4px; }
.strongs-meta { color: #94a3b8; font-size: 0.9rem; margin: 0 0 12px; }
.strongs-def { color: #e2e8f0; line-height: 1.55; white-space: pre-wrap; }
#bibleStrongsLookup {
  background: linear-gradient(90deg, rgba(217,119,6,0.35), rgba(217,119,6,0.12));
  border: 1px solid rgba(217,119,6,0.5);
  color: #fde68a;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 650;
  cursor: pointer;
}

.strongs-layer { color:#fbbf24; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; margin:16px 0 6px; }

.bible-reader-tabs { display:flex; gap:6px; }
.bible-tab { border:1px solid rgba(217,119,6,0.4); background:transparent; color:#fde68a; border-radius:8px; padding:5px 10px; cursor:pointer; font-weight:650; font-size:0.74rem; height:28px; line-height:1.1; white-space:nowrap; }
.bible-tab.active { background:rgba(217,119,6,0.28); }
.lexicon-table { width:100%; border-collapse:collapse; min-width:640px; }
.lexicon-table th, .lexicon-table td { border-bottom:1px solid rgba(148,163,184,0.16); padding:8px 10px; text-align:left; vertical-align:top; color:#e2e8f0; font-size:0.9rem; }
.lexicon-table th { color:#fde68a; position:sticky; top:0; background:#0f172a; }
.lex-orig { font-size:1.15rem; }
.lex-xlit, .lex-gloss { color:#94a3b8; font-size:0.78rem; margin-top:3px; }
.lex-strongs { background:none; border:0; color:#60a5fa; font-weight:700; cursor:pointer; padding:0; }

#strongsReader { z-index: 28000; }

.comm-comments { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(148,163,184,0.16); }
.comm-comments-head { color:#94a3b8; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; margin: 0 0 4px; }
.comm-comment { padding:8px 0 8px 0; }
.comm-comment-reply { margin-left:18px; padding-left:10px; border-left:2px solid rgba(217,119,6,0.35); }
.comm-comment-meta {
  color:#94a3b8;
  font-size:0.78rem;
  margin-bottom:4px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.comm-comment-menu { margin-left: auto; }
.comm-comment-body { color:#e2e8f0; font-size:0.92rem; white-space:pre-wrap; font-family: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; font-style: normal; }
.comm-comment-reacts { display:flex; gap:6px; margin-top:6px; }
.comm-comment-react { transform:scale(0.92); }
.comm-comment-replybtn { background:none; border:0; color:#fbbf24; font-size:0.78rem; padding:4px 0; cursor:pointer; }
.comm-comment-compose, .comm-reply-box {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-top: 8px;
  position: relative;
}
.comm-comment-compose textarea, .comm-reply-box textarea {
  flex:1; min-height:52px; resize:vertical; border-radius:8px; border:1px solid rgba(148,163,184,0.25);
  background:#0f172a; color:#e2e8f0; padding:8px;
}
.comm-comment-send {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  background: transparent;
  border: 0;
  color: #fbbf24;
  border-radius: 8px;
  cursor: pointer;
}
.comm-comment-send:hover { color: #fde68a; background: rgba(217,119,6,0.16); }
.comm-comment-send svg { display: block; }
.comm-comment-locked { color:#64748b; font-size:0.82rem; margin-top:6px; }

#disclaimerModal { z-index: 40000 !important; }
#disclaimerModal.visible { pointer-events: auto !important; opacity: 1 !important; }
#disclaimerModal .modal, #disclaimerModal button { pointer-events: auto !important; }

.bible-reader-searchlabel { display:flex; align-items:center; gap:6px; color:#cbd5e1; font-size:0.82rem; }
#bibleReaderSearch {
  width: min(220px, 36vw); border-radius:8px; border:1px solid rgba(148,163,184,0.28);
  background:#0f172a; color:#e2e8f0; padding:6px 8px;
}
.bible-reader-searchcount { color:#94a3b8; font-size:0.78rem; min-width:0; white-space:nowrap; }
.bible-reader-searchcount:empty { display: none; }
mark.pass-hit { background:#fbbf24; color:#111827; padding:0 2px; border-radius:3px; }

/* ===== PWA / phone alignment for Bible + Investigation chrome ===== */
html.bsb-pwa, body.bsb-pwa {
  padding-top: env(safe-area-inset-top, 0px);
}
body.bsb-pwa #toolbar,
body.bsb-phone #toolbar {
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}
body.bsb-pwa #notifyPanel,
body.bsb-phone #notifyPanel {
  top: calc(52px + env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  width: min(360px, calc(100vw - 16px - env(safe-area-inset-right, 0px)));
  max-width: calc(100vw - 16px);
  max-height: min(72vh, calc(100dvh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}
body.bsb-phone .bible-reader,
body.bsb-pwa .bible-reader,
body.bsb-phone #strongsReader,
body.bsb-pwa #strongsReader {
  padding: env(safe-area-inset-top, 0px) 0 0;
  align-items: stretch;
}
body.bsb-phone .bible-reader-card,
body.bsb-pwa .bible-reader-card,
body.bsb-phone .strongs-reader-card {
  width: 100%;
  height: calc(100dvh - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px));
  border-radius: 0;
  max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  border-radius: 12px;
}
body.bsb-phone .bible-reader-tools,
body.bsb-pwa .bible-reader-tools {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: 44px;
}
body.bsb-phone #bibleReaderSearch,
body.bsb-pwa #bibleReaderSearch {
  width: min(220px, 52vw);
  min-width: 120px;
}
body.bsb-phone .bible-reader-searchlabel,
body.bsb-pwa .bible-reader-searchlabel,
body.bsb-phone .bible-reader-findgroup,
body.bsb-pwa .bible-reader-findgroup {
  width: auto;
  margin-left: 0;
}
body.bsb-phone .bible-passage-bar,
body.bsb-pwa .bible-passage-bar {
  padding: 8px 10px;
}
body.bsb-phone .bible-passage-bar input,
body.bsb-phone .bible-passage-bar select,
body.bsb-pwa .bible-passage-bar input,
body.bsb-pwa .bible-passage-bar select {
  min-width: 0;
}
body.bsb-phone #biblePassageRef,
body.bsb-pwa #biblePassageRef {
  flex: 1 1 auto;
}
body.bsb-phone .bible-passage-row,
body.bsb-pwa .bible-passage-row {
  flex-wrap: wrap;
}
body.bsb-phone .chrono-era-band,
body.bsb-pwa .chrono-era-band {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
body.bsb-phone .chrono-era-chip,
body.bsb-pwa .chrono-era-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 132px;
}
body.bsb-phone .chrono-history-body,
body.bsb-pwa .chrono-history-body {
  padding-bottom: calc(24px + var(--bottom-bar-h, 14px) + env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .comm-comment-compose,
body.bsb-phone .comm-reply-box,
body.bsb-pwa .comm-comment-compose,
body.bsb-pwa .comm-reply-box {
  flex-direction: row;
  align-items: flex-end;
}
body.bsb-phone .comm-comment-send,
body.bsb-pwa .comm-comment-send {
  width: 36px;
  align-self: flex-end;
}
body.bsb-phone .comm-comment-reply,
body.bsb-pwa .comm-comment-reply {
  margin-left: 10px;
}
body.bsb-phone .lexicon-table,
body.bsb-pwa .lexicon-table {
  min-width: 520px;
}
body.bsb-phone #sidebar .nav-item,
body.bsb-pwa #sidebar .nav-item {
  min-height: 44px;
}
body.bsb-phone #netSubmenu button,
body.bsb-pwa #netSubmenu button,
body.bsb-phone .net-sub-btn,
body.bsb-pwa .net-sub-btn {
  min-height: 40px;
}

.share-board-hint { margin: 6px 0 0; font-size: 0.72rem; color: #94a3b8; line-height: 1.35; }
#adminShareBoardBtn { white-space: nowrap; }

.library-tabs { display:flex; gap:6px; }
.library-cat-editor { padding:8px 14px 8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.library-cat-label { color:#94a3b8; font-size:0.75rem; width:100%; }
.library-index-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; width:100%; }
.library-cat-select-label { display:flex; align-items:center; gap:8px; color:#cbd5e1; font-size:0.82rem; font-weight:600; }
.library-cat-select {
  min-width: min(320px, 70vw);
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(251,191,36,0.45);
  background: #0f172a;
  color: #fde68a;
  padding: 7px 10px;
  font-size: 0.88rem;
}
.library-cat-row input { width:160px; border-radius:8px; border:1px solid rgba(148,163,184,0.25); background:#0f172a; color:#e2e8f0; padding:6px 8px; }
#libraryUploadModal label { display:block; margin:0 0 10px; color:#cbd5e1; font-size:0.85rem; }
#libraryUploadModal input, #libraryUploadModal select {
  width:100%; margin-top:4px; border-radius:8px; border:1px solid rgba(148,163,184,0.28);
  background:#0f172a; color:#e2e8f0; padding:8px;
}
.library-upload-progress {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(96,165,250,0.35);
  background: rgba(30,58,138,0.28);
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  gap: 6px 10px;
  align-items: center;
}
.library-upload-progress.hidden { display: none !important; }
.library-upload-spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(191,219,254,0.25);
  border-top-color: #93c5fd;
  animation: libraryUploadSpin 0.8s linear infinite;
}
.library-upload-progress-copy { min-width: 0; }
.library-upload-progress-copy strong {
  display: block; color: #dbeafe; font-size: 0.88rem;
}
.library-upload-progress-copy span {
  display: block; color: #93c5fd; font-size: 0.78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.library-upload-bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 99px;
  background: rgba(15,23,42,0.65);
  overflow: hidden;
}
.library-upload-bar span {
  display: block;
  height: 100%;
  width: 28%;
  border-radius: 99px;
  background: #60a5fa;
  animation: libraryUploadBar 1.2s ease-in-out infinite;
}
@keyframes libraryUploadSpin { to { transform: rotate(360deg); } }
@keyframes libraryUploadBar {
  0% { width: 18%; margin-left: 0; }
  50% { width: 55%; margin-left: 20%; }
  100% { width: 18%; margin-left: 72%; }
}
#libraryUploadModal.is-uploading .modal-footer button { opacity: 0.55; pointer-events: none; }
#libraryUploadModal.is-uploading #libraryUploadCategory,
#libraryUploadModal.is-uploading #libraryUploadTitleInput { pointer-events: none; opacity: 0.7; }

.library-index { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.library-index-btn {
  border:1px solid rgba(148,163,184,0.28); background:#0f172a; color:#e2e8f0;
  border-radius:999px; padding:6px 10px; cursor:pointer; font-size:0.8rem;
}
.library-index-btn.active { background:rgba(217,119,6,0.28); border-color:rgba(251,191,36,0.5); color:#fde68a; }
.library-section {
  margin: 8px 12px;
  border: 1px solid rgba(251,191,36,0.28);
  border-radius: 12px;
  background: rgba(15,23,42,0.55);
  overflow: hidden;
}
.library-section-head {
  display:flex;
  align-items:center;
  gap:10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.library-section-head:hover { background: rgba(251,191,36,0.06); }
.library-section-caret {
  color: #fbbf24;
  font-size: 0.85rem;
  width: 1em;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.library-section.is-open .library-section-caret { transform: rotate(90deg); }
.library-section-title, .library-section-title-static {
  flex:1; min-width:0; font-size:1rem; font-weight:700; color:#fde68a;
  background:transparent; border:0;
  padding:4px 0;
  margin: 0;
  pointer-events: none;
}
.library-section-rename { margin-left: auto; }
.library-section-count { color:#94a3b8; font-size:0.75rem; }
.library-section-body { display: none; padding: 0 10px 10px; }
.library-section.is-open .library-section-body { display: block; }

.ev-tile-wrap { position:relative; min-width:0; }
.ev-tile-wrap .ev-tile { width:100%; }
.ev-tile-remove {
  position:absolute; top:6px; right:6px; z-index:2;
  font-size:0.68rem; padding:3px 7px; border-radius:6px;
  border:1px solid rgba(248,113,113,0.45); background:rgba(15,23,42,0.92);
  color:#fca5a5; cursor:pointer;
}
.ev-tile-remove:hover { background:#7f1d1d; color:#fff; }
.ev-folder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.ev-folder-back, .ev-folder-rename, .ev-folder-del {
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ev-folder-back {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}
.ev-folder-open-name {
  font-weight: 700;
  color: #f8fafc;
  margin-right: 6px;
}
.ev-folder-wrap { min-width: 0; }
.ev-folder-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px dashed #334155;
  background: #0b1220;
  color: #e2e8f0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
}
.ev-folder-tile:hover { border-color: #d97706; }
.ev-folder-icon { font-size: 2rem; line-height: 1; }
.ev-folder-name {
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-folder-count { font-size: 0.72rem; color: #94a3b8; }
.ev-folder-wrap.ev-folder-drop .ev-folder-tile,
.ev-folder-back.ev-folder-drop {
  border-color: #fbbf24;
  background: rgba(217, 119, 6, 0.18);
}
.ev-tile-wrap.is-dragging { opacity: 0.45; }
@media (max-width: 640px) {
  .ev-folder-tile { aspect-ratio: 4 / 3; }
}

.fellowship-panel {
  position: fixed;
  inset: 0;
  z-index: 240000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(2,6,23,0.72);
  overflow: auto;
}
.fellowship-panel.hidden { display: none !important; }
body:not(.bsb-section-community) #fellowshipPanel,
body:not(.bsb-section-community) #businessPanel { display: none !important; }
.business-soon {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fbbf24;
  padding: 48px 16px 56px;
  margin: 0;
}
.fellowship-card {
  width: min(920px, 100%);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 14px;
  color: #e2e8f0;
  margin-top: 8px;
}
.fellowship-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0f172a;
  padding-bottom: 8px;
}
#fellowshipClose, #businessClose { min-width: 40px; min-height: 40px; }
.fellowship-head h3 { margin: 0; font-size: 1.05rem; }
.fellowship-hint { margin: 0 0 8px; font-size: 0.8rem; color: #94a3b8; }
.fellowship-map {
  height: 360px;
  border-radius: 10px;
  border: 1px solid #1e293b;
  margin-bottom: 10px;
}
.fellowship-notes {
  max-height: 140px;
  overflow: auto;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fellowship-note {
  background: #111827;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 0.82rem;
}
.fellowship-note { cursor: pointer; }
.fellowship-note.is-on { border-color: #fbbf24; }
.fellowship-note time { display: block; color: #94a3b8; font-size: 0.7rem; margin-bottom: 2px; }
.fellowship-note-edit {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  margin: 4px 0;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.82rem;
}
.fellowship-note-actions { display: flex; gap: 6px; }

.fellowship-editor textarea {
  width: 100%;
  resize: vertical;
  margin-bottom: 8px;
}
.fellowship-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fellowship-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.fellowship-kind-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
.fellowship-kind-btn:disabled { opacity: 0.45; cursor: default; }
#fellowshipSabbathBtn { background: #ea580c; border-color: #c2410c; color: #fff; }
#fellowshipFestivalBtn { background: #16a34a; border-color: #15803d; color: #fff; }
#fellowshipSundayBtn { background: #7cfc00; border-color: #4ade80; color: #14532d; }
#fellowshipMidweekBtn { background: #7dd3fc; border-color: #38bdf8; color: #0c4a6e; }
#fellowshipYouthBtn { background: #facc15; border-color: #eab308; color: #422006; }
#fellowshipMensBtn { background: #7f1d1d; border-color: #991b1b; color: #fff; }
#fellowshipWomensBtn { background: #ec4899; border-color: #db2777; color: #fff; }
#fellowshipConferenceBtn { background: #4338ca; border-color: #3730a3; color: #fff; }
#fellowshipSabbathBtn.is-on { box-shadow: 0 0 0 2px #fdba74; }
#fellowshipFestivalBtn.is-on { box-shadow: 0 0 0 2px #86efac; }
#fellowshipSundayBtn.is-on { box-shadow: 0 0 0 2px #d9f99d; }
#fellowshipMidweekBtn.is-on { box-shadow: 0 0 0 2px #e0f2fe; }
#fellowshipYouthBtn.is-on { box-shadow: 0 0 0 2px #fde68a; }
#fellowshipMensBtn.is-on { box-shadow: 0 0 0 2px #fca5a5; }
#fellowshipWomensBtn.is-on { box-shadow: 0 0 0 2px #fbcfe8; }
#fellowshipConferenceBtn.is-on { box-shadow: 0 0 0 2px #c7d2fe; }
.fellowship-status { min-height: 1.1em; font-size: 0.78rem; color: #94a3b8; margin: 8px 0 0; }

.comm-mention { color:#fbbf24; font-weight:700; }
.comm-mention-suggest {
  display:flex; flex-direction:column; gap:2px;
  margin:4px 0; max-height:140px; overflow:auto;
  border:1px solid #334155; border-radius:8px; background:#0b1220;
}
.comm-mention-suggest.hidden { display:none !important; }
.comm-mention-opt {
  text-align:left; background:transparent; border:0; color:#e2e8f0;
  padding:6px 8px; cursor:pointer; font-size:0.82rem;
}
.comm-mention-opt:hover { background:#1e293b; color:#fde68a; }

#calendarGrid.cal-weeks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 132px;
  gap: 6px;
  padding: 8px 10px 16px;
}
.cal-week-lab {
  text-align: center;
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
  padding: 4px 0;
}
.cal-week-cell {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  border: 1px solid #334155;
  border-radius: 10px;
  background: rgba(15,23,42,0.72);
  padding: 7px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.cal-week-cell > * { pointer-events: none; }
.cal-week-cell.is-pad { background: transparent; border-color: transparent; cursor: default; }
.cal-week-cell.today { border-color: #fbbf24; }
.cal-week-cell.selected { box-shadow: 0 0 0 2px #fbbf24; }
.cal-week-cell.has-media { background: rgba(30,41,59,0.95); }
.cal-week-num { font-weight: 700; color: #e2e8f0; font-size: 0.92rem; flex: 0 0 auto; }
.cal-week-desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
  max-height: 6.4em;
  font-size: 0.72rem;
  line-height: 1.25;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1 1 auto;
  pointer-events: none;
}
.cal-week-mark { font-size: 0.68rem; color: #fbbf24; margin-top: auto; }
.cal-week-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fbbf24; margin-top: auto; align-self: center;
}
.media-cal-peek {
  margin: 0 10px 18px;
  padding: 14px 14px 16px;
  border: 1px solid #334155;
  border-radius: 12px;
  background: #0f172a;
}
.media-cal-peek.hidden { display: none !important; }
.media-cal-peek-date { color: #fbbf24; font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.media-cal-peek-note { color: #e2e8f0; font-size: 0.9rem; line-height: 1.45; margin: 0 0 8px; white-space: pre-wrap; }
.media-cal-peek-empty { color: #94a3b8; font-size: 0.85rem; margin: 0; }
.media-cal-peek-vid {
  color: #cbd5e1; font-size: 0.85rem; padding: 6px 0;
  border-top: 1px solid #1e293b;
}
.cal-week-note { display: none; }
.media-day-actions {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 12px;
}
#mediaDaySaveBtn {
  min-height: 40px;
  padding: 0 16px;
}
body.bsb-phone #mediaDaySaveBtn,
body.bsb-pwa #mediaDaySaveBtn {
  width: 100%;
  min-height: 44px;
}
.media-day-editor { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 16px; }
.media-day-editor.hidden { display: none !important; }
.media-day-editor textarea { width: 100%; }
.media-video-add { display: flex; gap: 8px; align-items: center; }
.media-video-add input { flex: 1; min-width: 0; width: auto; }
.media-video-add button { flex: 0 0 auto; white-space: nowrap; }
.media-kind-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px; height: 36px; padding: 0 10px; border-radius: 6px;
  background: #1e3a5f; color: #bfdbfe; font-size: 0.75rem; font-weight: 700;
}
.media-kind-zoom .media-kind-badge { background: #0e4d62; color: #7dd3fc; }
.media-kind-rumble .media-kind-badge { background: #3f2a0a; color: #fbbf24; }
.media-video-url { color: #94a3b8; font-size: 0.75rem; word-break: break-all; }
.media-video-list { display: flex; flex-direction: column; gap: 8px; }

.media-shop-toolbar { justify-content: space-between; gap: 10px; }
.media-product-form {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 16px 12px; padding: 14px; border: 1px solid #334155; border-radius: 10px;
  background: #0f172a;
}
.media-product-form.hidden { display: none !important; }
.media-product-form label { display: flex; flex-direction: column; gap: 4px; color: #cbd5e1; font-size: 0.85rem; }
.media-product-form input, .media-product-form textarea { width: 100%; }
.media-product-links { display: flex; flex-direction: column; gap: 8px; }
.media-link-other { display: flex; gap: 8px; }
.media-link-other input { flex: 1; min-width: 0; }
.media-product-list { display: flex; flex-direction: column; gap: 14px; padding: 8px 16px 24px; }
.media-product-card {
  display: flex; gap: 16px; padding: 14px; border: 1px solid #334155;
  border-radius: 12px; background: #0f172a;
}
.media-product-cover {
  width: 92px; min-width: 92px; height: 120px; border-radius: 8px;
  background: #1e293b; display: flex; align-items: center; justify-content: center;
  color: #64748b; overflow: hidden;
}
.media-product-cover img { width: 100%; height: 100%; object-fit: cover; }
.media-product-body { min-width: 0; flex: 1; }
.media-product-body h3 { margin: 0 0 4px; color: #f8fafc; font-size: 1.05rem; }
.media-product-author { margin: 0 0 6px; color: #fbbf24; font-size: 0.85rem; }
.media-product-price { margin: 0 0 8px; color: #86efac; font-size: 0.95rem; font-weight: 700; }
.media-product-blurb { margin: 0 0 10px; color: #94a3b8; font-size: 0.9rem; }
.media-product-buy { display: flex; flex-wrap: wrap; gap: 8px; }
.media-buy-btn {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px;
  background: #1d4ed8; color: #fff !important; text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.media-buy-btn:hover { background: #2563eb; }
.media-product-admin { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 639px) {
  .media-product-card { flex-direction: column; }
  .media-product-cover { width: 100%; height: 160px; }
}
.media-video-card { display: flex; gap: 10px; align-items: center; border: 1px solid #334155; border-radius: 8px; padding: 8px; }
.media-video-card img { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; }
.media-video-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.media-video-meta a { color: #93c5fd; word-break: break-all; }

/* ---- PWA / standalone + phone UX (keep aligned each build) ---- */
html.bsb-pwa, body.bsb-pwa {
  min-height: 100dvh;
}
body.bsb-pwa #app,
body.bsb-pwa #main {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.bsb-pwa #sidebar {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
#bsbAccountMenu {
  max-height: calc(100vh - 72px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
body.bsb-phone .nav-item,
body.bsb-pwa .nav-item {
  min-height: 44px;
}
body.bsb-phone #commBody,
body.bsb-pwa #commBody {
  min-height: 140px;
  font-size: 16px;
}
body.bsb-phone input,
body.bsb-phone textarea,
body.bsb-phone select,
body.bsb-pwa input,
body.bsb-pwa textarea,
body.bsb-pwa select {
  font-size: 16px;
}
@media (max-width: 640px) {
  #calendarGrid.cal-weeks { grid-auto-rows: 72px; }
  .cal-week-cell {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }
  .cal-week-desc {
    -webkit-line-clamp: 3;
    font-size: 0.66rem;
  }
  #calendarGrid.cal-weeks {
    gap: 4px;
    padding: 6px 6px 12px;
  }
}
body.bsb-pwa #bibleReader,
body.bsb-pwa #strongsReader,
body.bsb-pwa #trialPrompt,
body.bsb-pwa .modal-overlay {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Welcome / template home (root domain only) */
body.welcome-open #app { visibility: hidden; }
.bsb-welcome {
  position: fixed; inset: 0; z-index: 200000;
  background: #0b1220;
  overflow: auto;
  padding: 28px 16px 48px;
}
.bsb-welcome.hidden { display: none !important; }
.welcome-inner { max-width: 1320px; margin: 0 auto; text-align: center; color: #e2e8f0; }
.welcome-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  text-align: left;
}
.welcome-layout.has-follows {
  grid-template-columns: minmax(220px, 280px) 1fr;
  align-items: start;
}
.welcome-follows {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 16px;
}
.welcome-follows h2 { margin: 0 0 12px; color: #fbbf24; font-size: 1.05rem; }
.welcome-my-board { margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid #1e293b; }
.welcome-my-board.hidden { display: none !important; }
#welcomeFollowsList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#welcomeFollowsList li { margin: 0; }
#welcomeFollowsList button {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: linear-gradient(90deg, rgba(217,119,6,0.2), transparent);
  color: #fbbf24;
  border: 1px solid rgba(217,119,6,0.35);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 42px;
  font-weight: 650;
  cursor: pointer;
}
#welcomeFollowsList button:hover {
  background: linear-gradient(90deg, rgba(217,119,6,0.32), transparent);
  border-color: rgba(251,191,36,0.55);
}
.welcome-card.welcome-soon { opacity: 0.78; }
.welcome-card.welcome-soon .welcome-enter:disabled,
.welcome-board-list button:disabled {
  cursor: default;
  opacity: 0.7;
  background: #1e293b;
  color: #94a3b8;
}
.welcome-logo { margin: 8px auto 10px; }
.welcome-inner h1 { font-size: 1.8rem; margin: 0 0 8px; }
.welcome-lead { color: #94a3b8; margin: 0 0 16px; }
.welcome-auth-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
}
.welcome-auth-bar.hidden { display: none !important; }
.welcome-auth-signup,
.welcome-auth-login {
  min-width: 120px;
  height: 40px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
}
.welcome-auth-signup { background: #d97706; color: #111; }
.welcome-auth-login { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
.welcome-follow-empty { color: #94a3b8; font-size: 0.85rem; padding: 6px 2px; }
.welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; text-align: left; align-items: stretch; }
.welcome-card {
  display: grid;
  grid-template-rows: 56px 48px 44px 24px 44px;
  gap: 10px;
  box-sizing: border-box;
  background: #0f172a; border: 1px solid #334155; border-radius: 16px;
  padding: 20px 20px 18px;
  min-height: 268px;
}
.welcome-card h2 {
  margin: 0; color: #fbbf24; font-size: 1.62rem; line-height: 1.15;
  display: flex; align-items: flex-end;
}
.welcome-card p { color: #94a3b8; margin: 0; font-size: 0.88rem; line-height: 1.35; }
.welcome-enter {
  width: 100%; max-width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: #d97706; border: 0; color: #111; font-weight: 700;
  border-radius: 10px; padding: 0 14px; height: 44px; min-height: 44px;
  line-height: 1; white-space: nowrap; cursor: pointer; margin: 0;
}
.welcome-card h3 { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; margin: 0; display: flex; align-items: center; }
.welcome-board-list { list-style: none; margin: 0; padding: 0; min-height: 44px; }
.welcome-board-list li { margin: 0; }
.welcome-pop-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; }
.welcome-pop-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
  border-radius: 8px; padding: 8px 12px; font-size: 0.82rem;
}
.welcome-pop-follow {
  flex: 0 0 86px; width: 86px; background: #d97706; border: 0; color: #111; font-weight: 700;
  border-radius: 8px; padding: 8px 0; min-height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.welcome-pop-follow:disabled { cursor: default; opacity: 0.55; background: #334155; color: #94a3b8; }

/* ===== PWA / mobile UX v252 ===== */
body.bsb-phone,
body.bsb-pwa,
body.bsb-touch {
  -webkit-tap-highlight-color: rgba(251, 191, 36, 0.18);
}
body.bsb-phone input,
body.bsb-phone textarea,
body.bsb-phone select,
body.bsb-pwa input,
body.bsb-pwa textarea,
body.bsb-pwa select,
body.bsb-touch input,
body.bsb-touch textarea,
body.bsb-touch select {
  font-size: 16px !important;
}
body.bsb-phone #kicDownloadPrompt,
body.bsb-pwa #kicDownloadPrompt,
body.bsb-phone #personalBoardPick,
body.bsb-pwa #personalBoardPick,
body.bsb-phone #trialPrompt,
body.bsb-pwa #trialPrompt {
  padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  align-items: center;
  justify-content: center;
}
body.bsb-phone #kicDownloadPrompt .modal,
body.bsb-pwa #kicDownloadPrompt .modal,
body.bsb-phone #personalBoardPick .modal,
body.bsb-pwa #personalBoardPick .modal {
  width: min(440px, calc(100vw - 20px));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
}
body.bsb-phone #kicDownloadBtn,
body.bsb-pwa #kicDownloadBtn,
body.bsb-phone .trial-start-btn,
body.bsb-pwa .trial-start-btn {
  width: 100%;
  min-height: 44px;
}
body.bsb-phone .bsb-welcome,
body.bsb-pwa .bsb-welcome {
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(24px, env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .welcome-cards,
body.bsb-pwa .welcome-cards {
  grid-template-columns: 1fr;
}
body.bsb-phone .welcome-layout.has-follows,
body.bsb-pwa .welcome-layout.has-follows {
  grid-template-columns: 1fr;
}
body.bsb-phone .welcome-follows,
body.bsb-pwa .welcome-follows {
  order: -1;
}
body.bsb-phone .scripture-cite,
body.bsb-pwa .scripture-cite,
body.bsb-touch .scripture-cite {
  padding: 2px 3px;
  line-height: 1.6;
}
body.bsb-phone .scripture-cite-bar,
body.bsb-pwa .scripture-cite-bar {
  gap: 8px;
}
body.bsb-phone .scripture-cite-bar .scripture-cite,
body.bsb-pwa .scripture-cite-bar .scripture-cite {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 8px;
  text-decoration: none;
}
body.bsb-phone #bsbAccountMenu,
body.bsb-pwa #bsbAccountMenu {
  right: max(8px, env(safe-area-inset-right, 0px));
  top: calc(52px + env(safe-area-inset-top, 0px));
  max-width: calc(100vw - 16px);
  max-height: min(70vh, calc(100dvh - 64px - env(safe-area-inset-top, 0px)));
  overflow: auto;
}
body.bsb-phone #fellowshipMap,
body.bsb-pwa #fellowshipMap,
body.bsb-phone .fellowship-map,
body.bsb-pwa .fellowship-map {
  min-height: 42vh;
  height: 42vh;
}
body.bsb-phone #chronoEraBand,
body.bsb-pwa #chronoEraBand {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding-bottom: 8px;
}
body.bsb-phone .chrono-era-chip,
body.bsb-pwa .chrono-era-chip {
  flex: 0 0 auto;
  min-height: 44px;
}
body.bsb-phone .chrono-event-card,
body.bsb-pwa .chrono-event-card {
  flex-direction: column;
}
body.bsb-phone .char-card,
body.bsb-pwa .char-card {
  padding: 10px;
}
body.bsb-phone .char-notes-panel textarea,
body.bsb-pwa .char-notes-panel textarea {
  min-height: 96px;
}
body.bsb-phone #libraryView,
body.bsb-pwa #libraryView {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .doc-item,
body.bsb-pwa .doc-item {
  min-height: 48px;
}
body.bsb-phone .comm-comment-body,
body.bsb-pwa .comm-comment-body,
body.bsb-phone .comm-text,
body.bsb-pwa .comm-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.bsb-phone #app,
body.bsb-pwa #app {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
body.bsb-phone #calendarGrid.cal-weeks,
body.bsb-pwa #calendarGrid.cal-weeks {
  gap: 4px;
  padding: 8px 8px 12px;
  grid-auto-rows: 64px;
}
body.bsb-phone .cal-week-lab,
body.bsb-pwa .cal-week-lab {
  font-size: 0.68rem;
}
body.bsb-phone .cal-week-cell,
body.bsb-pwa .cal-week-cell {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 4px 2px 6px;
  align-items: center;
  border-radius: 10px;
}
body.bsb-phone .cal-week-num,
body.bsb-pwa .cal-week-num {
  font-size: 0.88rem;
}
body.bsb-phone .cal-week-desc,
body.bsb-phone .cal-week-mark,
body.bsb-pwa .cal-week-desc,
body.bsb-pwa .cal-week-mark {
  display: none !important;
}
@media (max-width: 639px) {
  .bible-passage-row {
    flex-wrap: wrap;
  }
  .bible-passage-row input,
  .bible-passage-row select {
    flex: 1 1 140px;
  }
  .bible-passage-row button {
    min-height: 40px;
  }
}

/* v270 sidebar chrome */
.board-title-block,
#boardSelect,
#deleteBoardBtn,
#boardCountHint,
#templatesBtn,
#createBoardBtn,
#emptyState {
  display: none !important;
}

/* ===== PWA / phone v280 — welcome, home, follow, comm ===== */
body.bsb-phone .welcome-card,
body.bsb-pwa .welcome-card {
  grid-template-rows: auto auto 44px 22px 44px;
  min-height: 0;
  padding: 16px;
}
body.bsb-phone .welcome-card h2,
body.bsb-pwa .welcome-card h2 {
  font-size: 1.28rem;
  line-height: 1.2;
  align-items: flex-start;
}
body.bsb-phone .welcome-auth-signup,
body.bsb-phone .welcome-auth-login,
body.bsb-pwa .welcome-auth-signup,
body.bsb-pwa .welcome-auth-login {
  min-height: 44px;
  min-width: 132px;
}
body.bsb-phone .welcome-follows,
body.bsb-pwa .welcome-follows {
  width: 100%;
  box-sizing: border-box;
}
body.bsb-phone #welcomeFollowsList button,
body.bsb-pwa #welcomeFollowsList button {
  width: 100%;
  min-height: 44px;
}
body.bsb-phone .welcome-enter,
body.bsb-pwa .welcome-enter,
body.bsb-phone .welcome-pop-follow,
body.bsb-pwa .welcome-pop-follow {
  min-height: 44px;
}
body.bsb-phone .sidebar-brand,
body.bsb-pwa .sidebar-brand {
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 16px;
}
body.bsb-phone .comm-toolbar,
body.bsb-pwa .comm-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}
body.bsb-phone #commBusinessBtn,
body.bsb-pwa #commBusinessBtn,
body.bsb-phone #commFellowshipBtn,
body.bsb-pwa #commFellowshipBtn {
  min-height: 40px;
}
body.bsb-phone .business-card,
body.bsb-pwa .business-card {
  width: min(520px, 100%);
}
body.bsb-phone #notifyPanel,
body.bsb-pwa #notifyPanel {
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  width: auto;
  max-width: none;
}

body.bsb-phone .library-cat-editor,
body.bsb-pwa .library-cat-editor {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 6px 12px 8px;
}
body.bsb-phone .library-cat-label,
body.bsb-pwa .library-cat-label {
  display: none;
}
body.bsb-phone .library-index,
body.bsb-pwa .library-index {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  gap: 8px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.bsb-phone .library-index-btn,
body.bsb-pwa .library-index-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 36px;
}
body.bsb-phone #libraryCategoryEditor > .secondary,
body.bsb-pwa #libraryCategoryEditor > .secondary {
  align-self: flex-start;
  min-height: 36px;
}

.bible-hl-bar { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; flex:0 0 auto; }
.bible-hl-label { color:#94a3b8; font-size:0.68rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-right: 2px; }
.bible-hl-swatch {
  min-width: 28px; min-height: 28px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid #334155;
  cursor: pointer; font-size: 0.7rem; font-weight: 700; color:#111; padding: 0;
}
.bible-hl-swatch[data-hl="yellow"] { background:#fde047; }
.bible-hl-swatch[data-hl="green"] { background:#86efac; }
.bible-hl-swatch[data-hl="orange"] { background:#fdba74; }
.bible-hl-swatch[data-hl="blue"] { background:#93c5fd; }
.bible-hl-swatch.bible-hl-erase {
  width: auto; min-width: 56px; padding: 0 10px;
  background:#1e293b; color:#e2e8f0; margin-left: 4px;
}
.bible-hl-swatch.is-on { box-shadow:0 0 0 2px #fbbf24; }
.bible-hl-clear {
  background:transparent; border:1px solid #334155; color:#cbd5e1;
  border-radius:8px; padding:0 10px; height: 28px; min-width: 56px;
  cursor:pointer; font-size:0.72rem; line-height: 28px; margin-left: 2px;
  white-space: nowrap;
}
td.bible-td-trans.hl-yellow { background: rgba(253,224,71,0.28); }
td.bible-td-trans.hl-green { background: rgba(134,239,172,0.28); }
td.bible-td-trans.hl-orange { background: rgba(253,186,116,0.28); }
td.bible-td-trans.hl-blue { background: rgba(147,197,253,0.28); }
td.bible-td-trans[data-verse] { cursor: text; }
body.hl-paint td.bible-td-trans[data-verse] { cursor: pointer; }
body.bsb-phone .bible-hl-bar,
body.bsb-pwa .bible-hl-bar { width:100%; }

body.bsb-phone .fellowship-panel,
body.bsb-pwa .fellowship-panel {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  align-items: flex-start;
}
body.bsb-phone .fellowship-card,
body.bsb-pwa .fellowship-card {
  max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
body.bsb-phone #fellowshipClose,
body.bsb-pwa #fellowshipClose,
body.bsb-phone #businessClose,
body.bsb-pwa #businessClose {
  min-width: 44px;
  min-height: 44px;
}

.library-index-chip { display:inline-flex; align-items:center; gap:0; }
.library-index-chip .library-index-btn { border-top-right-radius:0; border-bottom-right-radius:0; }
.library-index-remove {
  min-width:28px; min-height:28px; margin-left:-1px;
  border:1px solid #334155; border-left:none; border-radius:0 999px 999px 0;
  background:#0f172a; color:#f87171; cursor:pointer; font-size:1rem; line-height:1;
}
.library-index-remove:hover { background:#7f1d1d; color:#fecaca; }
.library-section-head { display:flex; align-items:center; gap:8px; }
.library-section-remove { margin-left:auto; color:#f87171; border-color:#7f1d1d; }
body.bsb-phone .library-index-remove,
body.bsb-pwa .library-index-remove { min-width:32px; min-height:32px; }


/* Followed / public boards — view only for non-authors */
body.follow-view-only .media-video-add,
body.follow-view-only #mediaVideoAddBtn,
body.follow-view-only #mediaRumbleAddBtn,
body.follow-view-only #mediaZoomAddBtn,
body.follow-view-only #mediaVideoUrl,
body.follow-view-only #mediaRumbleUrl,
body.follow-view-only #mediaZoomUrl,
body.follow-view-only .media-video-del,
body.follow-view-only #locAddBtn,
body.follow-view-only #locSaveBtn,
body.follow-view-only #locDeleteBtn,
body.follow-view-only #chronoAddEventBtn,
body.follow-view-only #chronoEvSave,
body.follow-view-only #bibleReaderAddBtn,
body.follow-view-only #bibleReaderRemoveBtn,
body.follow-view-only #evFolderBtn,
body.follow-view-only .ev-folder-rename,
body.follow-view-only .ev-folder-del,
body.follow-view-only .ev-tile-remove,
body.follow-view-only .doc-remove-btn,
body.follow-view-only .library-index-remove,
body.follow-view-only .library-section-remove,
body.follow-view-only #newNoteBtn,
body.follow-view-only .note-actions {
  display: none !important;
}
body.follow-view-only #mediaDayText,
body.follow-view-only #mediaVideoUrl,
body.follow-view-only #mediaRumbleUrl,
body.follow-view-only #mediaZoomUrl,
body.follow-view-only #locName,
body.follow-view-only #locNotes {
  pointer-events: none;
  opacity: 0.85;
}

body.follow-view-only .chrono-edit,
body.follow-view-only .chrono-del,
body.follow-view-only #noteCreateBtn,
body.follow-view-only #evUploadBtn,
body.follow-view-only #chronoAddEventBtn {
  display: none !important;
}

body.follow-view-only #docUploadBtn { display:none !important; }

body.follow-view-only #evUploadBtn,
body.follow-view-only #evFileInput,
body.follow-view-only #chronoAddEventBtn,
body.follow-view-only #chronoEventForm,
body.follow-view-only .chrono-event-actions,
body.follow-view-only .chrono-edit,
body.follow-view-only .chrono-del {
  display: none !important;
}

#updateBoardBtn { display: none !important; }

.comm-att-video-wrap { width: min(100%, 560px); margin: 8px 0 4px; }
.comm-att-video { width: 100%; max-height: 320px; border-radius: 10px; background: #000; display: block; }
.comm-att-video-expand { margin-top: 6px; font-size: 12px; }
.comm-native-video { width: 100%; max-height: 70vh; background: #000; }
.video-player-frame .comm-native-video.hidden { display: none; }
.video-player-frame iframe.hidden { display: none; }

#toolbar #publishBoardBtn,
#toolbar #adminShareBoardBtn,
#toolbar #copyPublishedBtn { display: none !important; }

/* ===== PWA / mobile UX v347 — keep current with desktop ===== */
@media (max-width: 639px) {
  .welcome-layout.has-follows {
    grid-template-columns: 1fr !important;
  }
  .welcome-follows { order: -1; }
  .welcome-cards {
    grid-template-columns: 1fr !important;
  }
  .welcome-card {
    min-height: 0;
    grid-template-rows: auto auto 44px 22px 44px;
  }
  .welcome-card h2 { font-size: 1.35rem; }
  .bsb-welcome { padding: 16px 12px calc(28px + env(safe-area-inset-bottom, 0px)); }
}
body.bsb-phone #biblePassageBook,
body.bsb-pwa #biblePassageBook {
  flex: 1 1 140px;
  width: auto;
  max-width: none;
  min-width: 120px;
}
body.bsb-phone #biblePassageTrans,
body.bsb-pwa #biblePassageTrans {
  width: 72px;
  flex: 0 0 72px;
}
body.bsb-phone .chrono-era-head,
body.bsb-pwa .chrono-era-head {
  flex-wrap: wrap;
  align-items: flex-start;
}
body.bsb-phone #chronoAddEventBtn,
body.bsb-pwa #chronoAddEventBtn {
  margin-left: auto;
}
body.bsb-phone .comm-toolbar,
body.bsb-pwa .comm-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #0b1220;
  padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
}
body.bsb-phone .comm-side-col,
body.bsb-pwa .comm-side-col {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.bsb-phone .comm-trending-panel,
body.bsb-pwa .comm-trending-panel {
  flex: 0 0 34%;
  max-height: 36%;
}
body.bsb-phone .media-product-form,
body.bsb-pwa .media-product-form,
body.bsb-phone .media-shop-grid,
body.bsb-pwa .media-shop-grid {
  padding-left: 10px;
  padding-right: 10px;
}
body.bsb-phone .fellowship-pin-actions,
body.bsb-pwa .fellowship-pin-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.bsb-phone .bible-reader-card,
body.bsb-pwa .bible-reader-card {
  max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
body.bsb-phone #bsbAccountMenu,
body.bsb-pwa #bsbAccountMenu {
  max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .library-index-row,
body.bsb-pwa .library-index-row {
  flex-wrap: wrap;
}
body.bsb-phone .library-cat-select-label,
body.bsb-pwa .library-cat-select-label {
  width: 100%;
}
body.bsb-phone .library-cat-select,
body.bsb-pwa .library-cat-select {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.bible-th-note,
.bible-td-note {
  width: 36px;
  min-width: 36px;
  padding: 4px 2px !important;
  vertical-align: middle;
  background: transparent !important;
  border: 0 !important;
}
.bible-hl-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 8px;
  background: #0f172a;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.bible-hl-note:hover { border-color: #fbbf24; background: #1e293b; }
.bible-hl-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 280000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2,6,23,0.72);
}
.bible-hl-note-overlay.hidden { display: none !important; }
.bible-hl-note-card {
  width: min(520px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 16px 16px 14px;
  color: #e2e8f0;
}
.bible-hl-note-card h3 { margin: 0 0 8px; color: #fbbf24; font-size: 1.05rem; }
.bible-hl-note-ref { margin: 0 0 8px; color: #fde68a; font-weight: 700; }
.bible-hl-note-snap {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #0b1220;
  border-left: 3px solid #d97706;
  color: #cbd5e1;
  font-size: 0.86rem;
  white-space: pre-wrap;
  max-height: 180px;
  overflow: auto;
}
.bible-hl-note-card label {
  display: block;
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: #94a3b8;
}
.bible-hl-note-card input,
.bible-hl-note-card textarea {
  width: 100%;
  margin-top: 4px;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
}
.bible-hl-note-actions { display: flex; gap: 8px; margin-top: 8px; }

.note-cat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}
.note-cat-bar .library-cat-select {
  min-width: min(240px, 55vw);
}
.note-cat-chip {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #cbd5e1;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.note-cat-chip.is-on {
  border-color: #d97706;
  background: rgba(217,119,6,0.18);
  color: #fde68a;
}
.note-cat-chip.note-cat-add { border-style: dashed; color: #fbbf24; }
.note-cat-chip.note-cat-del { border-color: #7f1d1d; color: #fca5a5; }
.note-cat-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.note-cat-wrap .note-cat-chip {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.note-cat-x {
  height: 30px;
  min-width: 26px;
  padding: 0 7px;
  border-radius: 0 999px 999px 0;
  border: 1px solid #7f1d1d;
  border-left: 0;
  background: #1a0b0b;
  color: #fca5a5;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.note-cat-x:hover {
  background: #7f1d1d;
  color: #fff;
}
.note-cat-wrap .note-cat-chip.is-on + .note-cat-x {
  border-color: #d97706;
}
.note-cat-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(217,119,6,0.16);
  color: #fde68a;
  font-size: 0.68rem;
  font-weight: 700;
}
.note-cat-input {
  margin-left: 8px;
  height: 28px;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 0 8px;
}
#bibleHlNoteCat {
  width: 100%;
  margin-top: 4px;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
}
.notes-toolbar { flex-wrap: wrap; gap: 8px; }

.note-lib-newcat {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.note-lib-newcat input {
  flex: 1 1 auto;
  min-width: 0;
}
.note-lib-newcat button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.il-wrap { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 16px; min-width: 0; }
.il-verse {
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 10px;
  padding: 10px 12px 12px;
  background: rgba(15,23,42,0.4);
  min-width: 0;
}
.il-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.il-numv { color: #fbbf24; font-weight: 800; min-width: 1.4rem; }
button.il-numv {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #fbbf24;
}
.il-eng { color: #cbd5e1; font-size: 0.88rem; line-height: 1.4; }
.il-words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.il-words.is-he { direction: rtl; }
.il-words.is-he .il-col { direction: ltr; }
.il-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 132px;
  padding: 8px 8px 10px;
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  overflow: hidden;
  box-sizing: border-box;
}
.il-col:hover { border-color: #d97706; }
.il-engw,
.il-orig,
.il-xlit,
.il-gloss,
.il-strong {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.il-engw {
  min-height: 2.1em;
  font-size: 0.72rem;
  line-height: 1.25;
  color: #e2e8f0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.il-orig { font-size: 1.12rem; color: #f8fafc; line-height: 1.3; margin-top: 2px; }
.il-words.is-he .il-orig { font-size: 1.22rem; }
.il-xlit { font-size: 0.66rem; color: #94a3b8; line-height: 1.25; }
.il-gloss {
  font-size: 0.66rem;
  color: #fde68a;
  line-height: 1.3;
  max-height: 3.9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.il-strong { font-size: 0.66rem; color: #60a5fa; font-weight: 700; flex: 0 0 auto; margin-top: auto; }

#noteLibModal.modal-overlay {
  z-index: 400000 !important;
}
#noteLibModal.modal-overlay.visible,
#noteLibModal.modal-overlay.visible .modal,
#noteLibModal.modal-overlay.visible .modal * {
  pointer-events: auto !important;
}

.il-verse {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.il-head { margin-bottom: 0; padding-top: 6px; }
@media (max-width: 720px) {
  .il-words {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 6px;
  }
  .il-col { min-height: 124px; padding: 7px 6px 8px; }
  .il-orig { font-size: 1.02rem; }
  .il-engw { font-size: 0.68rem; }
  .il-gloss { font-size: 0.62rem; max-height: 3.6em; }
}
body.bsb-phone .il-words,
body.bsb-pwa .il-words {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.bsb-phone .il-col,
body.bsb-pwa .il-col {
  min-height: 136px;
}

/* Retired Observation / Interpretation / Application + M.M.O. panels */
#notesView .mmo-stack,
.mmo-stack,
body.notes-pwa-split #notesView .mmo-stack,
body.notes-pwa-split.notes-show-mmo #notesView .mmo-stack,
body.notes-pwa-split.notes-show-mmo.bsb-page-notes #notesView .mmo-stack,
body.notes-pwa-split.notes-show-mmo.bsb-page-notes #notesView[data-premium-open="1"] .mmo-stack,
#notesView .mmo-stack[hidden] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
#notesMmoBtn,
body.notes-pwa-split #notesMmoBtn {
  display: none !important;
}
.notes-layout,
.notes-layout.notes-layout-list-only,
body.notes-pwa-split #notesView .notes-layout,
body.bsb-page-notes #notesView .notes-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}
#notesView .notes-layout #notesList {
  grid-column: 1 / -1 !important;
}

/* Articles page */
#articlesView { display:flex; flex-direction:column; min-height:0; }
.articles-layout {
  display:grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap:12px;
  min-height:0;
  flex:1;
  padding:8px 12px 16px;
}
.articles-list { min-height:0; overflow:auto; display:flex; flex-direction:column; gap:6px; min-width:0; }
.article-list-item {
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  text-align:left;
  background:rgba(15,23,42,.45);
  border:1px solid rgba(251,191,36,.25);
  color:#e2e8f0;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.3;
  font-size:0.88rem;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.article-list-item.active {
  border-color:#fbbf24;
  background:rgba(251,191,36,.12);
}
.article-editor { display:flex; flex-direction:column; gap:8px; min-height:0; }
#articleTitleInput {
  font-size:1.05rem;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.55);
  color:#f8fafc;
}
#articleBodyInput {
  flex:1;
  min-height:220px;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.55);
  color:#e2e8f0;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  line-height:1.5;
  resize:vertical;
}
.article-editor-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 720px) {
  .articles-layout { grid-template-columns: 1fr; }
  .articles-list { max-height:160px; }
}
.library-tab-rename {
  width: auto;
  min-width: 18ch;
  max-width: 50ch;
  font: inherit;
  color: inherit;
  background: rgba(15,23,42,.7);
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 2px 8px;
  box-sizing: content-box;
}

/* Hidden sidebar rows must not keep a 48px gap on phone */
#sideNav .nav-item.hidden,
#sideNav .nav-admin-comm.hidden,
#sideNav .nav-update-board.hidden,
#sideNav .nav-item[hidden] {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  #toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  #toolbar .toolbar-center {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 4px !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
  }
  #toolbar .toolbar-center .section-label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
  }
  #toolbar .toolbar-end {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }
  #toolbar #installAppBtn {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
    max-width: 88px !important;
  }
}
#libraryTabKic {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: min(36ch, 48vw);
  height: 28px;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#libraryTabKic .library-tab-rename {
  width: auto;
  min-width: 8ch;
  max-width: 36ch;
  height: 18px;
  padding: 0 4px;
}


.admin-dash-overlay {
  position: fixed; inset: 0; z-index: 24000;
  background: rgba(2,6,23,0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px 24px;
}
.admin-dash-overlay.hidden { display: none !important; }
.admin-dash {
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #0b1220;
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.admin-dash-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.admin-dash-head h3 { margin:0; color:#fde68a; font-size:1.05rem; }
.admin-dash-stats { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.admin-stat { background:#111827; border:1px solid #1e293b; border-radius:10px; padding:10px 8px; text-align:center; }
.admin-stat b { display:block; color:#f8fafc; font-size:1.15rem; }
.admin-stat span { color:#94a3b8; font-size:0.72rem; }
.admin-stat.paid b { color:#86efac; }
.admin-stat.unpaid b { color:#fca5a5; }
.admin-dash-tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.admin-dash-tools input, .admin-dash-tools select {
  background:#0f172a; color:#e2e8f0; border:1px solid #334155; border-radius:8px; padding:7px 10px;
}
.admin-dash-tools input { flex:1; min-width:180px; }
.admin-dash-table-wrap { overflow:auto; max-height: 52vh; border:1px solid #1e293b; border-radius:10px; }
.admin-dash-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.admin-dash-table th, .admin-dash-table td { text-align:left; padding:8px 10px; border-bottom:1px solid #1e293b; color:#e2e8f0; }
.admin-dash-table th { color:#fde68a; position:sticky; top:0; background:#0f172a; }
.admin-dash-acts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.admin-pill { font-size:0.72rem; padding:2px 8px; border-radius:999px; }
.admin-pill.paid { background:rgba(22,163,74,0.2); color:#86efac; }
.admin-pill.unpaid { background:rgba(185,28,28,0.2); color:#fca5a5; }
.admin-pill.removed { background:rgba(100,116,139,0.25); color:#cbd5e1; }
.admin-grant-btn { background:rgba(217,119,6,0.25); border:1px solid rgba(217,119,6,0.5); color:#fde68a; border-radius:8px; padding:4px 8px; cursor:pointer; font-size:0.75rem; }
.admin-dash-status { color:#94a3b8; font-size:0.8rem; margin:8px 0 0; }
@media (max-width: 800px) {
  .admin-dash-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .admin-dash-table th:nth-child(4), .admin-dash-table td:nth-child(4) { display:none; }
}

body.bsb-template-bible #notesView .mmo-stack,
body.bsb-template-bible #notesView .mmo-stack[hidden],
body.bsb-template-bible #notesMmoBtn {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}
body.bsb-template-bible #notesView .notes-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}


.bible-reader-layout { display:inline-flex; gap:4px; margin-left:6px; }
.bible-reader-prose-wrap { padding: 4px 8px 16px; }
.bible-reader-prose { max-width: 46rem; margin: 0 auto 1.4rem; }
.bible-prose-trans { color:#fde68a; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; margin:0 0 8px; }
.bible-prose-trans span { color:#94a3b8; font-weight:500; text-transform:none; letter-spacing:0; margin-left:6px; }
.bible-reader-prose p {
  color:#e2e8f0;
  font-size:1.05rem;
  line-height:1.7;
  margin: 0 0 1rem;
  text-align: justify;
}
.bible-vr-inline { margin: 0 2px 0 0; }
.bible-vr-inline .bible-vr-btn {
  display:inline;
  background:none;
  border:0;
  color:#60a5fa;
  font-size:0.72em;
  font-weight:700;
  vertical-align:super;
  padding:0 2px;
  cursor:pointer;
  line-height:1;
}
.bible-prose-verse { }
.bible-prose-verse.hl-yellow { background: rgba(250,204,21,0.28); }
.bible-prose-verse.hl-green { background: rgba(74,222,128,0.28); }
.bible-prose-verse.hl-orange { background: rgba(251,146,60,0.32); }
.bible-prose-verse.hl-blue { background: rgba(96,165,250,0.28); }
/* The reader overlay stays a dark surface in light mode.
   Global light-mode input/text rules were hiding the verses and whitening the book fields. */
body:not(.dark) .bible-reader-prose p,
body:not(.dark) .bible-prose-verse,
body:not(.dark) .bible-reader-table td,
body:not(.dark) .bible-reader-body,
body:not(.dark) .bible-reader-src,
body:not(.dark) .bible-reader-empty {
  color: #e2e8f0 !important;
}
body:not(.dark) .bible-reader select,
body:not(.dark) .bible-reader input,
body:not(.dark) .bible-reader textarea,
body:not(.dark) #bibleReaderBook,
body:not(.dark) #bibleReaderRefInput,
body:not(.dark) #bibleReaderSearch,
body:not(.dark) #writingsReaderAuthor,
body:not(.dark) #writingsReaderWork {
  background: #0b1220 !important;
  color: #fde68a !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  border-radius: 8px;
}
body:not(.dark) .bible-reader select option {
  background: #0b1220;
  color: #fde68a;
}


.comm-link-card {
  display: block;
  margin: 10px 0 4px;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: #0b1220;
  max-width: 560px;
}
.comm-link-card:hover { border-color: rgba(251,191,36,0.45); }
.comm-link-thumb {
  position: relative;
  background: #111827;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comm-link-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
}
.comm-link-live {
  position: absolute;
  left: 10px; top: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
}
.comm-link-badge {
  color: #fde68a;
  font-size: 0.85rem;
  font-weight: 700;
}
.comm-link-meta { padding: 10px 12px 12px; }
.comm-link-site {
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.comm-link-title {
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 650;
  margin-top: 3px;
  line-height: 1.35;
}
body:not(.dark) .comm-link-card { background: #fff; border-color: #e2e8f0; }
body:not(.dark) .comm-link-title { color: #0f172a; }

/* Phone Calendar day sheet: full height + scroll so links/thumbs are reachable */
@media (max-width: 640px) {
  #dayDetail:not(.hidden) {
    position: fixed !important;
    top: calc(var(--toolbar-h, 56px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100dvh - var(--toolbar-h, 56px) - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - var(--toolbar-h, 56px) - env(safe-area-inset-top, 0px)) !important;
    border-radius: 12px 12px 0 0 !important;
    z-index: 90 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--bg, #0b1220) !important;
  }
  #dayDetail .day-detail-header {
    flex: 0 0 auto !important;
  }
  #dayDetail #mediaDayEditor {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #dayDetail #hoursList {
    flex: 0 0 auto;
    max-height: 30%;
    overflow-y: auto;
  }
  #dayDetail .media-video-list {
    padding-bottom: 12px;
  }
}
body.bsb-phone #dayDetail:not(.hidden),
body.bsb-pwa #dayDetail:not(.hidden) {
  position: fixed !important;
  top: calc(var(--toolbar-h, 56px) + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100dvh - var(--toolbar-h, 56px) - env(safe-area-inset-top, 0px)) !important;
  max-height: calc(100dvh - var(--toolbar-h, 56px) - env(safe-area-inset-top, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 90 !important;
}
body.bsb-phone #dayDetail #mediaDayEditor,
body.bsb-pwa #dayDetail #mediaDayEditor {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ===== PWA / mobile align v495 — folders, calendar, media, reader, welcome ===== */
body.bsb-phone,
body.bsb-pwa,
html.bsb-phone,
html.bsb-pwa {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.bsb-phone #sideNav .nav-item,
body.bsb-pwa #sideNav .nav-item {
  min-height: 44px;
  padding: 10px 12px;
}
body.bsb-phone #sideNav .nav-label,
body.bsb-pwa #sideNav .nav-label {
  font-size: 0.95rem;
}
body.bsb-phone #evidenceView .page-toolbar,
body.bsb-pwa #evidenceView .page-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
body.bsb-phone .ev-folder-bar,
body.bsb-pwa .ev-folder-bar {
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: inherit;
  padding: 4px 0 8px;
}
body.bsb-phone .ev-folder-back,
body.bsb-phone .ev-folder-rename,
body.bsb-phone .ev-folder-del,
body.bsb-pwa .ev-folder-back,
body.bsb-pwa .ev-folder-rename,
body.bsb-pwa .ev-folder-del {
  min-height: 40px;
}
body.bsb-phone .bible-passage-row,
body.bsb-pwa .bible-passage-row {
  flex-wrap: wrap;
  gap: 6px;
}
body.bsb-phone #biblePassageBook,
body.bsb-pwa #biblePassageBook {
  flex: 0 0 auto;
  max-width: 42vw;
}
body.bsb-phone .evidence-grid,
body.bsb-pwa .evidence-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.bsb-phone #calendarView,
body.bsb-pwa #calendarView {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.bsb-phone .cal-weeks,
body.bsb-pwa .cal-weeks {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.bsb-phone .cal-week-cell,
body.bsb-pwa .cal-week-cell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}
body.bsb-phone #mediaView,
body.bsb-pwa #mediaView {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .media-product-card,
body.bsb-pwa .media-product-card {
  flex-direction: column;
}
body.bsb-phone .media-product-cover,
body.bsb-pwa .media-product-cover {
  width: 100%;
  height: 180px;
}
body.bsb-phone .welcome-layout.has-follows,
body.bsb-pwa .welcome-layout.has-follows {
  grid-template-columns: 1fr;
}
body.bsb-phone .welcome-follows,
body.bsb-pwa .welcome-follows {
  order: -1;
}
body.bsb-phone .bsb-welcome,
body.bsb-pwa .bsb-welcome {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
body.bsb-phone #bibleReader,
body.bsb-pwa #bibleReader,
body.bsb-phone #strongsReader,
body.bsb-pwa #strongsReader {
  top: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}
body.bsb-phone #sectionLabel,
body.bsb-pwa #sectionLabel {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.bsb-phone #installAppBtn,
body.bsb-pwa #installAppBtn {
  font-size: 0.72rem;
  padding: 6px 8px;
  white-space: nowrap;
}
body.bsb-phone #communityView,
body.bsb-pwa #communityView,
body.bsb-phone #articlesView,
body.bsb-pwa #articlesView,
body.bsb-phone #notesView,
body.bsb-pwa #notesView,
body.bsb-phone #documentsView,
body.bsb-pwa #documentsView {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Notes + Articles: Noto Sans site-wide */
#notesView,
#notesView input,
#notesView textarea,
#notesView button,
#notesList,
#notesList .note-card,
#notesList .note-title,
#notesList .note-body,
#noteCreateBtn,
#noteCatBar,
#articlesView,
#articlesView input,
#articlesView textarea,
#articlesView button,
#articlesList,
#articleEditor,
#articleTitleInput,
#articleBodyInput,
#mmoMotive,
#mmoMeans,
#mmoOpportunity,
.mmo-text,
.mmo-block,
#chronoEvNotes,
#chronoOiaObs,
#chronoOiaInt,
#chronoOiaApp,
.chrono-ev-notes,
#evNotesInput,
#panelNotes,
#locNotes,
#fellowshipNoteInput,
#fellowshipNotes,
.fellowship-notes,
#figureCatalogNotes,
.bible-hl-note-card,
.bible-hl-note-card textarea,
.bible-hl-note-card input,
#noteLibModal textarea,
#noteLibModal input {
  font-family: "Noto Sans", "Segoe UI", Roboto, sans-serif !important;
}
.bible-enoch-editions {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #cbd5e1;
  background: #0b1220;
  border: 1px solid rgba(217,119,6,0.35);
  border-radius: 8px;
}
.bible-enoch-editions strong { color: #fbbf24; }

/* Mobile / PWA header: menu + page title left, no overlap with Install */
@media (max-width: 900px) {
  #toolbar,
  body.bsb-phone #toolbar,
  body.bsb-pwa #toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 8px 0 8px !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #mobileMenuBtn,
  .toolbar-menu-btn,
  body.bsb-phone #mobileMenuBtn,
  body.bsb-pwa #mobileMenuBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    border: 2px solid #d97706 !important;
    line-height: 1 !important;
  }
  #toolbar .toolbar-center,
  body.bsb-phone #toolbar .toolbar-center,
  body.bsb-pwa #toolbar .toolbar-center {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
  }
  #toolbar .toolbar-center .section-label,
  #sectionLabel,
  body.bsb-phone #sectionLabel,
  body.bsb-pwa #sectionLabel {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #d97706 !important;
    pointer-events: none !important;
  }
  #toolbar .toolbar-end,
  body.bsb-phone #toolbar .toolbar-end,
  body.bsb-pwa #toolbar .toolbar-end {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }
  #toolbar #installAppBtn,
  body.bsb-phone #installAppBtn,
  body.bsb-pwa #installAppBtn {
    font-size: 0.68rem !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    max-width: none !important;
  }
}

.support-toolbar { justify-content: space-between; gap: 10px; flex-shrink: 0; }
#supportView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.support-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 32px;
}
.support-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 0 0 20px;
  max-width: 920px;
  border-bottom: 1px solid rgba(251,191,36,0.18);
  margin-bottom: 20px;
}
.support-form.hidden { display: none; }
.support-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #cbd5e1;
  font-size: 0.8rem;
}
.support-form input { width: 100%; box-sizing: border-box; }
.support-qr-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.support-qr-wrap img,
.support-qr-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #fff;
  border: 2px solid #d97706;
  border-radius: 10px;
  padding: 6px;
}
.support-public {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  padding: 0;
  max-width: 920px;
  overflow: visible;
}
.support-card,
a.support-card,
button.support-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 132px;
  aspect-ratio: auto;
  margin: 0;
  padding: 16px 10px;
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 14px;
  background: #0f172a;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  font: inherit;
}
.support-card:hover,
a.support-card:hover,
button.support-card:hover {
  border-color: #d97706;
  background: #111827;
}
.support-card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-card .support-logo,
.support-tile .support-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
}
.support-card-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.support-card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fbbf24;
  text-transform: uppercase;
}
.support-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  border-radius: 5px;
}
.support-card-value {
  flex: 1 1 auto;
  color: #e2e8f0;
  word-break: break-word;
}
.support-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b1220;
  background: #d97706;
  border: 0;
  border-radius: 8px;
  padding: 8px 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.support-card-qr {
  min-height: 132px;
}
.support-qr-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
}
.support-card-compact {
  flex-wrap: nowrap;
  justify-content: space-between;
}
.support-card-compact .support-logo {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

body.bsb-phone #whoweareView,
body.bsb-pwa #whoweareView,
body.bsb-phone #supportView,
body.bsb-pwa #supportView,
body.bsb-phone #mediaView,
body.bsb-pwa #mediaView,
body.bsb-phone #scheduleView,
body.bsb-pwa #scheduleView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.bsb-phone .support-body,
body.bsb-pwa .support-body {
  padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .support-form,
body.bsb-pwa .support-form {
  grid-template-columns: 1fr;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
body.bsb-phone .support-public,
body.bsb-pwa .support-public {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
}
body.bsb-phone .support-card,
body.bsb-pwa .support-card,
body.bsb-phone a.support-card,
body.bsb-pwa a.support-card,
body.bsb-phone button.support-card,
body.bsb-pwa button.support-card {
  width: 100%;
  max-width: none;
  min-height: 112px;
}
body.bsb-phone #sectionLabel,
body.bsb-pwa #sectionLabel {
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
}

#whoweareView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.who-toolbar { justify-content: space-between; gap: 10px; flex-shrink: 0; }
.who-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 32px;
}
.who-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  max-width: 920px;
  margin-bottom: 22px;
}
.who-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 14px;
  background: #0f172a;
  text-align: center;
}
.who-photo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(217,119,6,0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  flex: 0 0 96px;
}
.testimony-file,
.who-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.who-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.who-photo-empty {
  font-size: 0.72rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.testimony-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}
.testimony-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 16px;
  background: #0f172a;
}
.testimony-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.testimony-card .who-photo-wrap {
  width: 104px;
  height: 104px;
  flex-basis: 104px;
}
#testimonyAddBtn,
#testimonySaveBtn,
.testimony-photo-btn,
.testimony-remove {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 6;
}
body.bsb-public-visitor #testimonyAddBtn,
body.bsb-public-visitor #testimonySaveBtn {
  display: none !important;
}
.testimony-text,
.testimony-read {
  width: 100%;
  min-height: 120px;
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #e2e8f0;
  white-space: pre-wrap;
}
.testimony-read {
  min-height: 0;
  padding-top: 6px;
}
.testimony-read.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  max-height: calc(1.55em * 10);
}
.testimony-copy .comm-see-more {
  padding-top: 6px;
}
.testimony-text {
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid rgba(217,119,6,0.4);
  border-radius: 10px;
  background: #111827;
  padding: 12px 14px;
}
.testimony-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 5;
}
.testimony-remove {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}
body.bsb-phone .testimony-card,
body.bsb-pwa .testimony-card {
  grid-template-columns: 1fr;
  justify-items: center;
}
body.bsb-phone .testimony-text,
body.bsb-pwa .testimony-text,
body.bsb-phone .testimony-read,
body.bsb-pwa .testimony-read {
  width: 100%;
}
body.bsb-phone #testimoniesView,
body.bsb-pwa #testimoniesView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.bsb-phone .testimony-list,
body.bsb-pwa .testimony-list {
  max-width: none;
  width: 100%;
}
body.bsb-phone .testimony-copy,
body.bsb-pwa .testimony-copy {
  width: 100%;
  min-width: 0;
}
body.bsb-phone .testimony-copy .comm-see-more,
body.bsb-pwa .testimony-copy .comm-see-more {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0 12px;
}
body.bsb-phone .testimony-card .who-photo-wrap,
body.bsb-pwa .testimony-card .who-photo-wrap {
  width: 96px;
  height: 96px;
  flex-basis: 96px;
}
.who-name {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2e8f0;
}
.who-name-input {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.who-remove { width: 100%; }
.who-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}
.who-about-wrap {
  max-width: 920px;
}
.who-about-head {
  display: flex;
  justify-content: space-between;
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.who-about-edit,
.who-about-read {
  width: 100%;
  min-height: 180px;
  box-sizing: border-box;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 12px;
  padding: 12px 14px;
  white-space: pre-wrap;
}
.who-about-edit { resize: vertical; }
.who-count { color: #94a3b8; font-weight: 500; letter-spacing: 0; text-transform: none; }
body.bsb-phone #whoweareView,
body.bsb-pwa #whoweareView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.bsb-phone .who-body,
body.bsb-pwa .who-body {
  padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px));
}
body.bsb-phone .who-profiles,
body.bsb-pwa .who-profiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.bsb-phone .who-toolbar,
body.bsb-pwa .who-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
}
body.bsb-phone .who-toolbar .page-hint,
body.bsb-pwa .who-toolbar .page-hint {
  flex: 1 1 100%;
  font-size: 0.78rem;
}
body.bsb-phone .who-photo-wrap,
body.bsb-pwa .who-photo-wrap {
  width: 84px;
  height: 84px;
}
body.bsb-phone .who-about-edit,
body.bsb-pwa .who-about-edit,
body.bsb-phone .who-about-read,
body.bsb-pwa .who-about-read {
  min-height: 160px;
  font-size: 0.92rem;
}

@media (max-width: 639px) {
  #toolbar #installAppBtn,
  body.bsb-phone #installAppBtn,
  body.bsb-pwa #installAppBtn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 0.68rem !important;
  }
  #toolbar #notifyBellBtn,
  body.bsb-phone #notifyBellBtn,
  body.bsb-pwa #notifyBellBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #toolbar #userMenuWrap,
  #toolbar #userMenuBtn,
  body.bsb-phone #userMenuWrap,
  body.bsb-phone #userMenuBtn,
  body.bsb-pwa #userMenuWrap,
  body.bsb-pwa #userMenuBtn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }
}

.writings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.writings-find input {
  min-width: 180px;
  margin-left: 6px;
}
.writings-list {
  padding: 12px 16px 32px;
}
.writings-author {
  margin: 0 0 22px;
}
.writings-author-name {
  margin: 0 0 10px;
  color: #fde68a;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.writings-works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.writings-work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  min-width: 0;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  cursor: pointer;
  overflow: hidden;
  white-space: normal;
}
.writings-work-card:hover {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(30, 41, 59, 0.8);
}
.writings-work-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 650;
  color: #f8fafc;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.writings-work-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}
.writings-reader-picks {
  flex-wrap: wrap;
}
.writings-reader-picks select {
  max-width: 260px;
  min-width: 120px;
}
.writings-line-list,
.writings-para-flow {
  max-width: 920px;
  margin: 0 auto;
}
.writings-line {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.writings-line.is-isolated,
.writings-para.is-isolated {
  background: rgba(251, 191, 36, 0.08);
  border-radius: 8px;
  padding: 10px 8px;
}
.writings-para {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  margin: 0 0 14px;
  line-height: 1.55;
}
.writings-para-num {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fbbf24;
  font-weight: 700;
  cursor: pointer;
}
.writings-para-num:hover {
  background: rgba(251, 191, 36, 0.16);
}
.writings-line-text {
  color: #e2e8f0;
  line-height: 1.55;
}


/* ===== v549: sidebar hide/show tab lives OUTSIDE the scrolling sidebar ===== */
#sidebarToggle.sidebar-toggle,
button#sidebarToggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 300px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 8000 !important;
  width: 6px !important;
  min-width: 6px !important;
  max-width: 6px !important;
  height: 88px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  border: 1px solid #d97706 !important;
  border-left: none !important;
  background: #111827 !important;
  color: #fbbf24 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
}
body.sidebar-collapsed #sidebarToggle.sidebar-toggle,
body.sidebar-collapsed button#sidebarToggle {
  left: 0 !important;
}
@media (max-width: 639px) {
  button#sidebarToggle {
    left: 0 !important;
  }
  body.mobile-nav-open button#sidebarToggle {
    left: min(300px, 88vw) !important;
  }
}

/* Scripture reader on phone: stacked like a mobile Bible app.
   Book + passage on one row, translations and tools as scrolling chips, then the text. */
body.bsb-phone #bibleReader .overlay-site-name{
  padding: 6px 12px 4px;
  font-size: 0.72rem;
}
body.bsb-phone #bibleReader .bible-reader-head{
  display: grid !important;
  grid-template-columns: 34px minmax(0, 0.95fr) minmax(0, 1.25fr) 34px 34px;
  grid-template-areas: "prev book ref next close";
  gap: 6px;
  align-items: center;
  padding: 6px 8px 8px;
}
body.bsb-phone #bibleReader .bible-reader-titlewrap,
body.bsb-phone #bibleReader .bible-reader-ref-edit{
  display: contents;
}
body.bsb-phone #bibleReader .bible-reader-head .sr-only,
body.bsb-phone #bibleReader #bibleReaderHint{
  display: none !important;
}
body.bsb-phone #bibleReader #bibleReaderPrev{ grid-area: prev; }
body.bsb-phone #bibleReader #bibleReaderBook{
  grid-area: book;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  height: 34px !important;
  border-radius: 8px !important;
}
body.bsb-phone #bibleReader #bibleReaderRefInput{
  grid-area: ref;
  width: 100% !important;
  max-width: none !important;
  height: 34px !important;
  text-align: center;
  border-radius: 8px !important;
}
body.bsb-phone #bibleReader #bibleReaderNext{ grid-area: next; }
body.bsb-phone #bibleReader #bibleReaderClose{ grid-area: close; }
body.bsb-phone #bibleReader .bible-reader-tools{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 4px 10px 10px !important;
  overflow: hidden !important;
  min-height: 0 !important;
  max-height: 240px;
  opacity: 1;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease;
}
body.bsb-phone #bibleReader .bible-reader-card.tools-collapsed .bible-reader-tools{
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  pointer-events: none;
}
body.bsb-phone #bibleReader .bible-m-modes,
body.bsb-phone #bibleReader .bible-m-trans,
body.bsb-phone #bibleReader .bible-m-actions{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.bsb-phone #bibleReader .bible-m-modes::-webkit-scrollbar,
body.bsb-phone #bibleReader .bible-m-trans::-webkit-scrollbar,
body.bsb-phone #bibleReader .bible-m-actions::-webkit-scrollbar{ display: none; }
body.bsb-phone #bibleReader .bible-reader-tabs,
body.bsb-phone #bibleReader .bible-reader-layout,
body.bsb-phone #bibleReader .bible-reader-toggles,
body.bsb-phone #bibleReader .bible-hl-bar,
body.bsb-phone #bibleReader .bible-reader-findgroup{
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  width: auto !important;
}
body.bsb-phone #bibleReader .bible-tab{
  height: 32px;
  padding: 0 12px;
  font-size: 0.78rem;
  border-radius: 999px;
}
body.bsb-phone #bibleReader .bible-m-trans:has(#bibleReaderToggles[style*="display: none"]),
body.bsb-phone #bibleReader .bible-m-trans:has(#bibleReaderToggles:empty) {
  display: none !important;
}
body.bsb-phone #bibleReader .bible-reader-toggles label{
  position: relative;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  background: transparent;
}
body.bsb-phone #bibleReader .bible-reader-toggles label:has(input:checked){
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.7);
  color: #dbeafe;
}
body.bsb-phone #bibleReader .bible-reader-toggles input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
body.bsb-phone #bibleReader .bible-m-actions{
  padding-bottom: 2px;
}
body.bsb-phone #bibleReader #bibleReaderSearch{
  width: min(46vw, 180px) !important;
  min-width: 120px;
  height: 32px;
  border-radius: 999px !important;
}
body.bsb-phone #bibleReader .bible-reader-searchlabel{
  color: #94a3b8;
  font-size: 0.72rem;
}
body.bsb-phone #bibleReader .bible-reader-body{
  padding: 14px 16px 32px;
}
body.bsb-phone #bibleReader .bible-reader-prose{
  max-width: none;
  margin: 0;
}
body.bsb-phone #bibleReader .bible-reader-prose p{
  font-size: 1.12rem;
  line-height: 1.65;
  text-align: left;
  margin: 0 0 1.15rem;
}
body.bsb-phone #bibleReader .bible-vr-inline .bible-vr-btn{
  color: #60a5fa;
  font-size: 0.68em;
  font-weight: 750;
  margin-right: 1px;
}
body.bsb-phone #bibleReader .bible-reader-table tr{
  margin: 0 0 16px;
  padding: 4px 2px 10px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0;
}
body.bsb-phone #bibleReader .bible-reader-table td{
  font-size: 1.05rem;
  line-height: 1.55;
  padding: 2px 0 8px;
}

/* Calendar day overlay: header stays, the notes and links scroll. */
#dayDetail:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
#dayDetail:not(.hidden) .day-detail-header {
  flex: 0 0 auto !important;
  display: flex !important;
  position: relative !important;
  z-index: 3 !important;
  min-height: 52px !important;
  background: #0f172a !important;
}
#dayDetail:not(.hidden) #backToCal {
  display: inline-flex !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
}
#dayDetail:not(.hidden) #mediaDayEditor,
#dayDetail:not(.hidden) #hoursList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}