/* ==========================================================================
   DPD Notification Center — 2026-08-31 redesign
   --------------------------------------------------------------------------
   Loads last, after dpd-v2-portal.css, dpd-frontend-audit.css and
   dpd-master-list.css, all of which carry !important rules aimed at this
   drawer. Everything here is scoped to #dpd-v2-updates-drawer so the
   dashboard's "latest updates" block, which reuses the old item classes,
   keeps the styling it already had.

   The id is written twice in every selector on purpose. dpd-frontend-audit.css
   reaches these rows at html body.dpd-member-surface #id .class.class, which
   outweighs a single-id selector however the rest of it is written. Two ids
   settles it once, for the whole file, instead of tuning each rule against
   whichever patch happens to load last.

   The rule this sheet is built on: yellow means "this one is not like the
   others". It appears on the unread dot and on the composer, which is the
   only thing in the drawer you write rather than read. Every other control
   is quiet, so the loud things stay readable.
   ========================================================================== */

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc {
  --nc-ink: #0d1117;
  --nc-ink-soft: #3d4855;
  --nc-slate: #6b7885;
  --nc-slate-light: #8d98a4;
  --nc-line: rgba(13, 17, 23, 0.09);
  --nc-line-strong: rgba(13, 17, 23, 0.16);
  --nc-paper: #ffffff;
  --nc-sunk: #f4f6f8;
  --nc-volt: #ffe400;
  --nc-volt-wash: #fff9db;
  --nc-alarm: #c0342b;
  --nc-pad: 18px;

  background: transparent !important;
  max-width: calc(100vw - 24px) !important;
  width: min(420px, calc(100vw - 24px)) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-v2-updates-drawer__inner {
  background: var(--nc-paper) !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(9, 13, 18, 0.18), 0 2px 6px rgba(9, 13, 18, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------- header -- */

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head {
  background: var(--nc-paper) !important;
  border-bottom: 1px solid var(--nc-line) !important;
  display: block !important;
  flex: 0 0 auto !important;
  padding: 17px var(--nc-pad) 13px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__title-row {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__titling {
  align-items: baseline !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  min-width: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__title {
  color: var(--nc-ink) !important;
  font-family: 'acumin-pro-condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

/* Set on the title's baseline as a kicker, not a status sentence: the number
   is what matters, and the Unread filter under it repeats the rest. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__count {
  color: var(--nc-slate) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-close {
  align-items: center !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--nc-slate-light) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  height: 32px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
  width: 32px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-close:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-close:focus-visible {
  background: var(--nc-sunk) !important;
  color: var(--nc-ink) !important;
}

/* --------------------------------------------------- filters + bulk act -- */

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__controls {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  margin-top: 13px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter {
  background: var(--nc-sunk) !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  gap: 2px !important;
  padding: 2px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter__btn {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--nc-slate) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  gap: 6px !important;
  letter-spacing: 0.11em !important;
  line-height: 1 !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  text-transform: uppercase !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter__btn:hover {
  color: var(--nc-ink) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter__btn.is-active {
  background: var(--nc-paper) !important;
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.12) !important;
  color: var(--nc-ink) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter__count {
  background: var(--nc-ink) !important;
  border-radius: 999px !important;
  color: var(--nc-paper) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  min-width: 16px !important;
  padding: 3px 5px !important;
  text-align: center !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter__count[hidden] {
  display: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-textbtn {
  background: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--nc-ink-soft) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  min-height: 28px !important;
  padding: 0 4px !important;
  text-decoration: underline !important;
  text-decoration-color: var(--nc-line-strong) !important;
  text-underline-offset: 4px !important;
  transition: color 0.16s ease, text-decoration-color 0.16s ease !important;
  white-space: nowrap !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-textbtn:hover:not(:disabled) {
  color: var(--nc-ink) !important;
  text-decoration-color: currentColor !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-textbtn:disabled {
  color: var(--nc-slate-light) !important;
  cursor: default !important;
  text-decoration: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-textbtn[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------- feed body -- */

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-body {
  background: var(--nc-paper) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-body::-webkit-scrollbar {
  width: 8px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-body::-webkit-scrollbar-thumb {
  background: rgba(13, 17, 23, 0.16) !important;
  border: 2px solid var(--nc-paper) !important;
  border-radius: 999px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-v2-updates-drawer__panel {
  display: block !important;
  gap: 0 !important;
}

/* Rows in one continuous list, not a stack of floating cards. Seven cards with
   their own borders, radii and shadows is seven competing frames; seven rows
   divided by a hairline is one list you can read down. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-list {
  display: block !important;
  gap: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-list[hidden] {
  display: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item {
  background: var(--nc-paper) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nc-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 14px var(--nc-pad) 13px !important;
  position: relative !important;
  transition: background-color 0.16s ease, opacity 0.2s ease !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item:last-child {
  border-bottom: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-unread,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-read {
  background: var(--nc-paper) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nc-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-unread:last-child,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-read:last-child {
  border-bottom: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-unread:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-read:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-unread:focus-within,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-read:focus-within {
  background: var(--nc-sunk) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item:focus-within {
  background: var(--nc-sunk) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-updating {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-list.is-filtered-unread .dpd-nc-item.is-read {
  display: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__head {
  align-items: baseline !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
}

/* Sentence case, not uppercase. Condensed capitals at 18px in a 400px column
   were the single biggest reason this panel read as shouting: they wrap more,
   scan slower, and made every headline compete with the panel title. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__title {
  color: var(--nc-ink) !important;
  font-family: var(--dpd-font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.32 !important;
  margin: 0 !important;
  min-width: 0 !important;
  text-transform: none !important;
}

/* The one yellow mark in a resting list. Read a row and it goes; the colour
   literally drains out of the panel as the queue empties. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__dot {
  background: var(--nc-volt) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.14) !important;
  display: inline-block !important;
  height: 7px !important;
  margin-right: 8px !important;
  vertical-align: 0.08em !important;
  width: 7px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__date {
  color: var(--nc-slate-light) !important;
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__text {
  -webkit-box-orient: vertical !important;
  color: var(--nc-slate) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  font-size: 12.75px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin: 5px 0 0 !important;
  overflow: hidden !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__image {
  border: 1px solid var(--nc-line) !important;
  border-radius: 10px !important;
  display: block !important;
  margin: 10px 0 0 !important;
  max-height: 150px !important;
  object-fit: cover !important;
  width: 100% !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__foot {
  align-items: center !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
  margin-top: 9px !important;
  min-height: 26px !important;
}

/* Read rows keep their place in the list but stop asking for attention. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-read .dpd-nc-item__title {
  color: var(--nc-ink-soft) !important;
  font-weight: 600 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item.is-read .dpd-nc-item__text {
  color: var(--nc-slate-light) !important;
}

/* ------------------------------------------------------- row-level acts -- */

/* The destination is the reason the notification exists, so it is the only
   thing in the row shaped like a link and it sits where the eye leaves the
   sentence — not as a full-width slab that outweighs the message above it. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta {
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--nc-ink) !important;
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 6px !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta__label {
  overflow: hidden !important;
  text-decoration: underline !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-decoration-color: var(--nc-line-strong) !important;
  text-underline-offset: 4px !important;
  transition: text-decoration-color 0.16s ease !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta:hover .dpd-nc-cta__label,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta:focus-visible .dpd-nc-cta__label {
  text-decoration-color: currentColor !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__spacer {
  flex: 1 1 auto !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta__arrow {
  display: inline-block !important;
  transition: transform 0.16s ease !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta:hover .dpd-nc-cta__arrow {
  transform: translateX(3px) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__audience {
  color: var(--nc-slate-light) !important;
  /* The action row has a priority order when it runs short. A shrink factor
     this far above the link's means the authoring tag absorbs the whole
     shortfall and disappears before the destination is ever truncated. */
  flex: 0 200 auto !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  line-height: 1 !important;
  margin-right: 4px !important;
  min-width: 0 !important;
  opacity: 0.85 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__tools {
  align-items: center !important;
  display: flex !important;
  /* Shrinks far more readily than the destination link beside it. The icon
     buttons inside never give, so what actually gives is the authoring tag. */
  flex: 0 200 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
  margin-left: auto !important;
  opacity: 0.45 !important;
  transition: opacity 0.16s ease !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item:hover .dpd-nc-item__tools,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item:focus-within .dpd-nc-item__tools {
  opacity: 1 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--nc-slate) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 11.5px !important;
  height: 28px !important;
  justify-content: center !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
  width: 28px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon:focus-visible {
  background: rgba(13, 17, 23, 0.07) !important;
  color: var(--nc-ink) !important;
}

/* Deleting removes a notice for every dealer who can see it, so it is the one
   control allowed to change colour — and only once you are on it. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon--danger:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon--danger:focus-visible {
  background: rgba(192, 52, 43, 0.1) !important;
  color: var(--nc-alarm) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon .fa {
  font-size: inherit !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* The same yellow dot the unread rows carry, pinned to the bell: the control
   is named by the state it puts the row back into. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon__dot {
  background: var(--nc-volt) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1.5px var(--nc-paper) !important;
  height: 6px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 5px !important;
  top: 5px !important;
  width: 6px !important;
}

/* On hover the button's ground goes grey, so the dot's ring follows it. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon:hover .dpd-nc-icon__dot,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon:focus-visible .dpd-nc-icon__dot {
  box-shadow: 0 0 0 1.5px #eceff2 !important;
}

/* ------------------------------------------------------------- tooltips -- */

/* Drawn rather than native: the browser's own tooltip takes about a second to
   appear, which is longer than it takes to just click the button and find out.
   Anchored above, because the controls sit at the foot of a row and the feed
   clips anything that leaves it. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip] {
  position: relative !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]::after {
  background: var(--nc-ink) !important;
  border-radius: 6px !important;
  bottom: calc(100% + 7px) !important;
  color: #ffffff !important;
  content: attr(data-dpd-tip) !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  left: 50% !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  opacity: 0 !important;
  padding: 5px 8px !important;
  pointer-events: none !important;
  position: absolute !important;
  text-transform: none !important;
  transform: translateX(-50%) translateY(3px) !important;
  transition: opacity 0.12s ease 0.25s, transform 0.12s ease 0.25s !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]::before {
  border: 4px solid transparent !important;
  border-top-color: var(--nc-ink) !important;
  bottom: calc(100% - 1px) !important;
  content: '' !important;
  left: 50% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  transform: translateX(-50%) translateY(3px) !important;
  transition: opacity 0.12s ease 0.25s, transform 0.12s ease 0.25s !important;
  z-index: 3 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]:hover::after,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]:hover::before,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]:focus-visible::after,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]:focus-visible::before {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* The rightmost control would push its bubble past the panel edge, where the
   panel's own overflow would cut it in half. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__tools > [data-dpd-tip]:last-child::after {
  left: auto !important;
  right: -4px !important;
  transform: translateX(0) translateY(3px) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__tools > [data-dpd-tip]:last-child:hover::after,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__tools > [data-dpd-tip]:last-child:focus-visible::after {
  transform: translateX(0) translateY(0) !important;
}

/* A tooltip that cannot be hovered away is a tooltip stuck to the screen. */
@media (hover: none) {
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]::after,
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc [data-dpd-tip]::before {
    content: none !important;
  }
}

/* -------------------------------------------------------- empty states -- */

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-empty {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  padding: 40px var(--nc-pad) 44px !important;
  text-align: center !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-empty[hidden] {
  display: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-empty h4 {
  color: var(--nc-ink) !important;
  font-family: var(--dpd-font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0 0 5px !important;
  text-transform: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-empty p {
  color: var(--nc-slate) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 30ch !important;
}

/* ----------------------------------------------------------- composer --- */

/* The composer is a tool, not a notification, and it has to say so at a
   glance — an admin opening the drawer must never mistake the thing they
   write in for the thing they read.

   It used to say it by going black, which read as a second surface bolted
   under the header rather than as a card belonging to this one. It says it
   in yellow now, and as an inset card: margins on all four sides lift it off
   the feed, so the white rows below stay visibly the list and this stays
   visibly the form. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer {
  background: var(--nc-volt-wash) !important;
  border: 2px solid var(--nc-volt) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(9, 13, 18, 0.08) !important;
  display: grid !important;
  gap: 11px !important;
  grid-template-columns: 1fr !important;
  margin: var(--nc-pad) var(--nc-pad) 4px !important;
  padding: 15px 15px 17px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer[hidden] {
  display: none !important;
}

/* An upstream layer pins -webkit-text-fill-color to near-black across the
   portal, overriding `color` at paint time. Handing fill back to currentColor
   is what lets the colours declared below actually render — it mattered most
   when this card was dark, and it still holds the placeholder and the file
   input to what they are told here. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer * {
  -webkit-text-fill-color: currentColor !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer .dpd-v2-updates-composer__header h4 {
  color: var(--nc-ink) !important;
  font-family: var(--dpd-font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0 0 4px !important;
  text-transform: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer .dpd-v2-updates-composer__header p {
  color: var(--nc-ink-soft) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer label > span {
  color: var(--nc-ink-soft) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer label > span small {
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  opacity: 0.6 !important;
  text-transform: none !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer input,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer select,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer textarea {
  background: var(--nc-paper) !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 9px !important;
  color: var(--nc-ink) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 40px !important;
  padding: 10px 11px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer textarea {
  min-height: 96px !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer input[type="file"] {
  font-weight: 600 !important;
  padding: 7px 8px !important;
}

/* The file picker's own button is not the form's primary action, so it stays
   the quietest control on the card.

   Three ids, not the file's usual two: responsive-style-logout.css paints this
   button accent-yellow from a 2-id/4-class selector and, being a raw <link> in
   header.php, loads after every wp_enqueue'd sheet. A third id settles it in
   both directions rather than depending on load order. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer input[type="file"]::file-selector-button {
  background: var(--nc-sunk) !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 7px !important;
  color: var(--nc-ink) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin-right: 10px !important;
  padding: 6px 11px !important;
  -webkit-text-fill-color: var(--nc-ink) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer input[type="file"]::file-selector-button:hover {
  background: #e9ecef !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer input:focus,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer select:focus,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer textarea:focus {
  border-color: var(--nc-ink) !important;
  box-shadow: 0 0 0 3px rgba(13, 17, 23, 0.14) !important;
  outline: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer .dpd-v2-updates-composer__status {
  color: var(--nc-ink-soft) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-composer .dpd-v2-updates-composer__actions {
  display: flex !important;
  gap: 8px !important;
}

/* ------------------------------------------------------------- buttons -- */

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn {
  align-items: center !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 7px !important;
  justify-content: center !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  text-transform: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

/* Publish is the only button on the card, and it inverts rather than matching
   it: a yellow button on a yellow panel is a button you have to look for.
   Ink on the wash is the strongest contrast this palette has. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn--primary {
  background: var(--nc-ink) !important;
  border-color: var(--nc-ink) !important;
  color: #ffffff !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn--primary:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn--primary:focus-visible {
  background: #232c37 !important;
  border-color: #232c37 !important;
}

/* One ghost for both places it appears — the composer's Cancel and the
   footer's New notification — now that neither of them sits on a dark card. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn--ghost {
  background: transparent !important;
  border-color: var(--nc-line-strong) !important;
  color: var(--nc-ink-soft) !important;
}

html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn--ghost:hover,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn--ghost:focus-visible {
  background: var(--nc-sunk) !important;
  border-color: var(--nc-slate-light) !important;
  color: var(--nc-ink) !important;
}

/* --------------------------------------------------------------- footer -- */

/* Publishing is a rare administrative act, not something you do on every
   visit, so it lives at the foot of the panel instead of as an unlabelled
   yellow circle above the feed. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-foot {
  background: var(--nc-paper) !important;
  border-top: 1px solid var(--nc-line) !important;
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  padding: 11px var(--nc-pad) !important;
}

/* ----------------------------------------------------------- focus ring -- */

/* Three global focus rings compete on this surface, all of them !important.
   Rather than out-specify each, this states one ring for everything the panel
   owns, last in the cascade. */
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon:focus-visible,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-btn:focus-visible,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-close:focus-visible,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-cta:focus-visible,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-textbtn:focus-visible,
html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-filter__btn:focus-visible {
  outline: 2px solid var(--nc-ink) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------- small -- */

@media (max-width: 640px) {
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc {
    --nc-pad: 15px;
    width: calc(100vw - 16px) !important;
  }

  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__title {
    font-size: 23px !important;
  }

  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-head__controls {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-icon {
    height: 34px !important;
    width: 34px !important;
  }

  /* Authoring metadata is the first thing to go when the row runs short: the
     destination and the controls both have to survive, and this does not. */
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__audience {
    display: none !important;
  }

  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-foot .dpd-nc-btn {
    flex: 1 1 auto !important;
  }
}

/* Without hover there is no reveal, so the row controls stay legible at rest. */
@media (hover: none) {
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc .dpd-nc-item__tools {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc *,
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc *::before,
  html body #dpd-v2-updates-drawer#dpd-v2-updates-drawer.dpd-nc *::after {
    transition-duration: 0.001ms !important;
  }
}