/* ── #dash-src-btn: DS ghost pill ── */
#dash-src-btn {
  background: transparent !important;
  border: 1.5px solid var(--brand-deep) !important;
  border-radius: 999px !important;
  color: var(--brand-deep) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  padding: 4px 14px !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
  opacity: .75;
}

#dash-src-btn:hover {
  opacity: 1 !important;
  background: transparent !important
}

/* Placeholder for the sources editor (mirrors #w-editor's placeholder rules) */
#src-editor:focus {
  border-color: var(--mid) !important
}

#src-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--light);
  pointer-events: none;
  display: block;
  white-space: pre-wrap
}

#src-editor ul,
#src-editor ol {
  padding-left: 18px;
  margin: 3px 0
}

#src-editor li {
  margin: 1px 0
}

/* "Sources" trigger button in the geo-strip — same look as the dropzone */
#gs-sources-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: var(--mid);
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s
}

#gs-sources-btn:hover {
  border-color: var(--mid);
  color: var(--ink);
  background: var(--paper)
}

#gs-sources-btn.has-content {
  border-color: var(--blue);
  color: var(--blue)
}

#gs-sources-btn.has-content:hover {
  background: #f0f5fc
}

/* -- TYPOLOGY MODAL (card studio) -- */
#gs-typo-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: var(--mid);
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s
}

#gs-typo-btn:hover {
  border-color: var(--mid);
  color: var(--ink);
  background: var(--paper)
}

#gs-typo-btn.has-content {
  border-color: var(--purple);
  color: var(--purple)
}

#gs-typo-btn.has-content:hover {
  background: #f4f0fc
}

.te-icon-opt {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--bd);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  color: rgba(30, 30, 40, .55);
  flex-shrink: 0
}

.te-icon-opt:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: #fff
}

.te-icon-opt.sel {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff
}

.te-dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 0
}

.te-dim-lbl {
  font-size: 11px;
  color: var(--mid);
  font-weight: 500;
  min-width: 130px;
  flex-shrink: 0
}

.te-chip-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap
}

.te-chip {
  font-size: 10px;
  padding: 3px 9px;
  border: 1px solid var(--bd);
  border-radius: 3px;
  cursor: pointer;
  background: var(--paper);
  color: var(--light);
  font-family: var(--font-ui);
  transition: all .1s;
  user-select: none
}

.te-chip.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink)
}

.te-chip:hover:not(.on) {
  border-color: var(--mid);
  color: var(--ink)
}

.te-hid-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--paper);
  margin-bottom: 4px
}

.te-hid-col-sel {
  font-size: 12px;
  padding: 4px 7px;
  border: 1px solid var(--bd);
  border-radius: 5px;
  background: var(--card);
  font-family: var(--font-ui);
  color: var(--ink);
  min-width: 140px;
  flex-shrink: 0
}

.te-hid-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  align-content: flex-start
}

.te-list-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s;
  margin-bottom: 2px
}

.te-list-item:hover {
  background: rgba(30, 30, 40, .06)
}

.te-list-item.sel {
  background: rgba(30, 30, 40, .1)
}

.te-list-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(30, 30, 40, .55)
}

.te-list-lbl {
  font-size: 12px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink)
}

.te-list-lbl.empty {
  color: var(--light);
  font-weight: 400;
  font-style: italic
}

#typo-export-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a22;
  color: #fff;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  z-index: 2000
}

#typo-export-toast.vis {
  opacity: 1
}

/* ═══════════════════════════════════════════════════════════════
 *  NEW UPDATE V7: ARTICLE SLIDE-IN & DASHBOARD UI OVERRIDES
 * ══════════════════════════════════════════════════════════════ */
#dsearchWrap { display: none !important; }

#drp.dart-open { width: clamp(360px, 32vw, 480px); }
#drp.dart-open #dcolTab { display: flex; }

#drp #dart-hdr { display: none; flex-shrink: 0; background: var(--ui-dark) !important; padding: 16px 22px 18px; }
#drp.dart-open #dart-hdr { display: block; }
#drp #dart-hdr.dart-geo { background: var(--brand-deep) !important; }
#drp #dart-t { font-family: var(--font-display); font-size: 22px; color: #fff; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; text-align: left; }
#drp #dart-s { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 300; font-family: var(--font-ui); }
#drp #dart-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
#drp.file-mode-on #dart-body { padding: 0 !important; overflow: auto !important; flex: 1; display: block; }
#dart-file-frame { width: 100%; border: none; display: block; min-height: 100px; height: auto; flex-shrink: 0; }

#drp #dart-zoom-ctrl { position: absolute; top: 10px; right: 12px; z-index: 20; display: none; flex-direction: row; gap: 5px; }
#drp.dart-open.file-mode-on #dart-zoom-ctrl { display: flex; }
#drp #dart-zoom-ctrl button { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, transform .1s; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 300; line-height: 1; user-select: none; }
#drp #dart-zoom-ctrl button:hover { background: rgba(255,255,255,.35); color: #fff; transform: scale(1.08); }
#drp #dart-zoom-ctrl button:active { transform: scale(.94); }

#drp #dart-close { position: absolute; top: 8px; right: 10px; z-index: 20; background: none; border: none; color: rgba(255,255,255,.5); font-size: 26px; cursor: pointer; line-height: 1; padding: 0 4px; display: none; }
#drp.dart-open #dart-close { display: block; }
#drp #dart-close:hover { color: #fff; }

/* When header is hidden in #drp */
#drp.hdr-hidden #dart-hdr { display: none !important; }
#drp.hdr-hidden #dart-zoom-ctrl button { background: rgba(26,26,34,.1); color: rgba(26,26,34,.5); }
#drp.hdr-hidden #dart-zoom-ctrl button:hover { background: rgba(26,26,34,.2); color: #1a1a22; }
#drp.hdr-hidden #dart-close { color: rgba(26,26,34,.35); }
#drp.hdr-hidden #dart-close:hover { color: #1a1a22; }