#obnListenerDialog {
  color: var(--text, #edf2ed);
  background: var(--panel, #172020);
  border: 1px solid var(--line, #3a4c49);
  border-radius: 18px;
  padding: 0;
  position: fixed;
  inset: 16px;
  margin: auto;
  width: min(640px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  box-shadow: 0 24px 80px #07151399;
}
#obnListenerDialog::backdrop { background: #081110c9; }
#obnListenerDialog .obnListenerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line, #3a4c49);
}
#obnListenerDialog h2 { margin: 0; font-size: 23px; }
#obnListenerDialog button {
  color: inherit;
  background: transparent;
  border: 1px solid var(--line, #3a4c49);
  border-radius: 10px;
  min-height: var(--obnTouchTarget, 44px);
  padding: 10px 16px;
  cursor: pointer;
}
#obnListenerDialog button:hover { background: #8cab9b22; }
#obnListenerDialog button:focus-visible { outline: 2px solid #b8dcc8; outline-offset: 3px; }
#obnListenerDialog .obnListenerBody { padding: 24px; }
#obnListenerDialog .obnListenerEyebrow { color: #a1cab5; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
#obnListenerDialog .obnListenerNumber { display: block; font-size: 64px; line-height: 1.2; font-variant-numeric: tabular-nums; }
#obnListenerDialog p { line-height: 1.65; }
#obnListenerDialog .obnListenerMuted { color: var(--muted, #afbfba); font-size: 13px; }
#obnListenerDialog table { width: 100%; border-collapse: collapse; margin: 20px 0; }
#obnListenerDialog th, #obnListenerDialog td { padding: 12px 0; text-align: left; border-bottom: 1px solid var(--line, #3a4c49); }
#obnListenerDialog th:last-child, #obnListenerDialog td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#obnListenerDialog [hidden] { display: none !important; }
#obnListenerDialog .obnListenerFoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.obn-phone #obnListenerDialog { inset: 8px; width: calc(100% - 16px); max-height: calc(100% - 16px); }
html.obn-phone #obnListenerDialog .obnListenerHead, html.obn-phone #obnListenerDialog .obnListenerBody { padding: 16px; }

/* ------------------------------------------------------- where people are
 *
 * The area block. Its own card inside the dialog, because it is the one part
 * of this panel that asks something of the person rather than just reporting,
 * and that deserves a visible edge around it.
 */
#obnListenerDialog .obnAreaBox {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line, #3a4c49);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
:root[data-theme="light"] #obnListenerDialog .obnAreaBox { background: rgba(15, 23, 42, .03); }
#obnListenerDialog .obnAreaBox h3 { margin: 0 0 10px; font-size: 15px; }
#obnListenerDialog .obnAreaList { list-style: none; margin: 0 0 10px; padding: 0; }
#obnListenerDialog .obnAreaList li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, #3a4c49);
}
#obnListenerDialog .obnAreaList li:last-child { border-bottom: none; }
#obnListenerDialog .obnAreaList span { font-variant-numeric: tabular-nums; color: var(--muted, #afbfba); font-size: 13px; }
#obnListenerDialog .obnAreaShare {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  /* a label wrapping a checkbox is the whole hit area, so it gets a real one */
  min-height: var(--obnTouchTarget, 44px);
  cursor: pointer;
  line-height: 1.5;
}
#obnListenerDialog .obnAreaShare input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
#obnListenerDialog .obnAreaEntry { display: flex; gap: 8px; margin-top: 10px; }
#obnListenerDialog .obnAreaEntry input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  /* 16px or iOS zooms the page when the field takes focus */
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #3a4c49);
  background: var(--bg, #0d1320);
  color: var(--text, #e4edf5);
}
#obnListenerDialog .obnAreaEntry button { flex: none; }