/* DCP Keys — page styling. Scoped to #dcp-keys-wrap. Mirrors the
   palette and section/card patterns of dcp_inspector.css so the two
   pages feel like siblings. Phase 1 covers the Identity section
   only; placeholder shells for DKDMs and Issue KDM appear in later
   phases. */

#dcp-keys-wrap {
  --bg: #0f0f10;
  --surface: #1a1a1a;
  --surface2: #1e1e1e;
  --surface3: #262626;
  --border: rgba(255,255,255,0.14);
  --border-light: rgba(255,255,255,0.2);
  --text: #e9e9e9;
  --text-muted: #aaaaaa;
  --text-dim: #888;
  --accent: #d8d8d8;
  --accent-dim: rgba(255,255,255,0.06);
  --ok:   #34d399;
  --warn: #facc15;
  --bad:  #f87171;
  --info: #60a5fa;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
#dcp-keys-wrap *, #dcp-keys-wrap *::before, #dcp-keys-wrap *::after { box-sizing: border-box; }
/* Page-wide rule: never render italics anywhere under /dcp_keys. Some
   of the site-level / Bootstrap base styles slip italic into otherwise-
   unstyled <em>, <i>, <cite>, etc., and at this body font size italics
   read as visual noise rather than emphasis. We use bold + colour for
   emphasis throughout the page instead. The single * selector is fine
   here — it's scoped to #dcp-keys-wrap so it doesn't bleed into other
   pages. */
#dcp-keys-wrap, #dcp-keys-wrap * { font-style: normal !important; }

/* Per-section drop highlight. The whole DKDMs / Recipients section
   gets an info-coloured border + tint while a file is being dragged
   over it, so it's obvious which kind of file the section accepts. */
#dcp-keys-wrap .dck-drop-section { transition: background-color 0.15s; }
#dcp-keys-wrap .dck-drop-section.dck-section-drag-active .chart-card {
  border-color: var(--info);
  background: rgba(96, 165, 250, 0.06);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}

/* Inline drop banner replacing the old big-square dropzone — small
   click-to-browse affordance + reminder that the whole section is a
   drop target. */
#dcp-keys-wrap .dck-section-drop-banner {
  border: 1px dashed var(--border-light);
  background: var(--surface2);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  /* baseline keeps the 13px label and the smaller link sitting on
     the same text baseline; align-items:center would line up their
     box centers and the link would float visually higher. */
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

#dcp-keys-wrap #dck-app {
  padding: 24px 28px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Header ────────────────────────────────────── */
#dcp-keys-wrap #dck-app-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
#dcp-keys-wrap #dck-app-header .title-group {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
#dcp-keys-wrap #dck-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
/* "How this works" button — small, low-key, sits next to the title. */
#dcp-keys-wrap .dck-how-btn {
  font-size: 11px;
  font-family: inherit;
  color: var(--info);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#dcp-keys-wrap .dck-how-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--info);
}

/* Modal overlay + card. position:fixed so it floats above sticky nav. */
#dcp-keys-wrap .dck-how-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 32px;
  background: rgba(0,0,0,0.65);
  overflow-y: auto;
  animation: dck-how-fade 0.18s ease-out;
}
@keyframes dck-how-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#dcp-keys-wrap .dck-how-modal {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: dck-how-pop 0.18s ease-out;
}
@keyframes dck-how-pop {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#dcp-keys-wrap .dck-how-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
#dcp-keys-wrap .dck-how-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
#dcp-keys-wrap .dck-how-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
#dcp-keys-wrap .dck-how-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}
#dcp-keys-wrap .dck-how-body {
  padding: 16px 18px 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
#dcp-keys-wrap .dck-how-intro {
  margin: 0 0 14px;
  color: var(--text-muted);
}

/* Three-actor legend pills at the top of the flowchart. */
#dcp-keys-wrap .dck-how-legend {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#dcp-keys-wrap .dck-actor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
#dcp-keys-wrap .dck-actor-you    { background: rgba(81, 162, 255, 0.18); color: var(--info); }
#dcp-keys-wrap .dck-actor-house  { background: rgba(255, 184, 76, 0.18); color: #ffb84c; }
#dcp-keys-wrap .dck-actor-cinema { background: rgba(108, 219, 130, 0.18); color: #6cdb82; }

/* The flow chart itself — a numbered vertical list. Each <li> shows the
   actor doing the work, an optional arrow to a recipient actor, and the
   step description. The CSS counter renders the step number in a
   circular badge on the left, and the <li> draws a vertical connecting
   line down to the next step. */
#dcp-keys-wrap .dck-how-steps {
  list-style: none;
  counter-reset: dck-step;
  padding: 0;
  margin: 0 0 14px;
}
#dcp-keys-wrap .dck-how-steps li {
  counter-increment: dck-step;
  position: relative;
  padding: 10px 0 10px 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
#dcp-keys-wrap .dck-how-steps li::before {
  content: counter(dck-step);
  position: absolute;
  left: 0;
  top: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
#dcp-keys-wrap .dck-how-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;        /* center of the 24-wide number badge */
  top: 34px;         /* bottom of badge */
  width: 1px;
  bottom: -4px;
  background: var(--border);
}
#dcp-keys-wrap .dck-how-steps .dck-step-arrow {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 2px;
}
#dcp-keys-wrap .dck-how-steps .dck-step-body {
  flex: 1 1 100%;
  margin-left: 0;
  margin-top: 2px;
  color: var(--text);
}
#dcp-keys-wrap .dck-how-steps li em {
  color: var(--info);
}
#dcp-keys-wrap .dck-how-footer {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}
#dcp-keys-wrap #dck-app-header .header-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}
/* Floating notification banner. `position: fixed` (not `sticky`) so it
   stays glued to the viewport regardless of scroll position — sticky
   only works inside the parent's scroll context, and would fall out of
   view once the user scrolled past long sections. The site-wide navbar
   is itself sticky at top:0, height ~55px, z-index 1030, so we park
   below it (top: 55px) and out-rank its z-index so any intermediate
   stacking context can't slip in front of us. */
#dcp-keys-wrap #dck-status {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 720px;
  z-index: 1040;
  font-size: 12px;
  padding: 10px 36px 10px 14px;   /* extra right padding for the × button */
  background: var(--surface3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  /* Soft fade/slide-in. The [hidden] attribute disables display
     entirely, so the animation only runs on the show path. */
  animation: dck-status-in 0.18s ease-out;
}
#dcp-keys-wrap #dck-status[data-tone="error"] {
  border-left-color: var(--bad);
}
#dcp-keys-wrap #dck-status .dck-status-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
#dcp-keys-wrap #dck-status .dck-status-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
@keyframes dck-status-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── Section heading + chart card (mirror inspector) ──── */
#dcp-keys-wrap .section-heading {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
#dcp-keys-wrap .section-heading h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}
#dcp-keys-wrap .section-heading .heading-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
#dcp-keys-wrap .dck-section { margin-bottom: 28px; }
#dcp-keys-wrap .chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  /* Asymmetric vertical padding — same rationale as the list-row
     padding: keep the top generous so headings and descriptions
     don't crowd the top border, but tighten the bottom so sections
     with little content (e.g. an unexpanded Recipients section)
     don't leave a deep gutter below their last child. */
  padding: 18px 20px 10px;
}
#dcp-keys-wrap .cat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ─── Banners ───────────────────────────────────── */
#dcp-keys-wrap .dck-banner {
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 14px;
  margin-bottom: 18px;
  border-left: 3px solid;
  background: var(--surface3);
}
#dcp-keys-wrap .dck-banner strong { color: var(--text); font-weight: 600; }
#dcp-keys-wrap .dck-banner-warn {
  border-left-color: var(--warn);
  background: rgba(250, 204, 21, 0.08);
}
#dcp-keys-wrap .dck-banner-warn strong { color: var(--warn); }
#dcp-keys-wrap .dck-banner ul { margin: 6px 0 0 18px; padding: 0; }
#dcp-keys-wrap .dck-banner li { margin-top: 2px; }

/* ─── Identity empty / form / details ───────────── */
#dcp-keys-wrap .dck-empty {
  margin-bottom: 18px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}
#dcp-keys-wrap .dck-empty-line { margin: 0 0 8px; }
#dcp-keys-wrap .dck-empty-line strong { color: var(--warn); }

#dcp-keys-wrap .dck-legacy-warning {
  border: 1px solid var(--bad, #c62828);
  background: rgba(198, 40, 40, 0.08);
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.55;
  border-radius: 3px;
  color: var(--text);
}
#dcp-keys-wrap .dck-legacy-warning strong { color: var(--bad, #c62828); display: block; margin-bottom: 4px; }

#dcp-keys-wrap .dck-form { display: flex; flex-direction: column; gap: 12px; }
#dcp-keys-wrap .dck-form-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 8px 14px;
}
#dcp-keys-wrap .dck-form-row label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
}
#dcp-keys-wrap .dck-form-row input {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
}
#dcp-keys-wrap .dck-form-row input:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 1px var(--info);
}
#dcp-keys-wrap .dck-form-row .dck-hint {
  grid-column: 2;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: -2px;
}
/* Live normalization preview shown beneath the cert-chain identifier
   input when the typed value differs from what will be saved (e.g. the
   user typed spaces and they'll become dashes). Inherits font-size from
   .dck-hint above but uses the accent colour so it reads as a system
   message rather than static help text. */
#dcp-keys-wrap .dck-form-row .dck-preview {
  grid-column: 2;
  font-size: 10px;
  color: var(--info);
  margin-top: -2px;
}
#dcp-keys-wrap .dck-form-row .dck-preview code {
  font-family: 'Menlo','Consolas',monospace;
  font-size: 10px;
  color: var(--info);
  background: rgba(0, 0, 0, 0.15);
  padding: 0 4px;
  border-radius: 2px;
}

#dcp-keys-wrap .dck-primary-btn,
#dcp-keys-wrap .dck-danger-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#dcp-keys-wrap .dck-primary-btn:hover { border-color: var(--border-light); }
#dcp-keys-wrap .dck-primary-btn:disabled {
  color: var(--text-dim); cursor: default; opacity: 0.6;
}
#dcp-keys-wrap .dck-danger-btn { color: var(--bad); }
#dcp-keys-wrap .dck-danger-btn:hover {
  border-color: rgba(248,113,113,0.4);
  background: rgba(248,113,113,0.08);
}

#dcp-keys-wrap .dck-progress {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#dcp-keys-wrap .dck-progress-stage {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Menlo','Consolas',monospace;
}
#dcp-keys-wrap .dck-progress-bar {
  height: 4px;
  background: var(--surface3);
  border: 1px solid var(--border);
  overflow: hidden;
}
#dcp-keys-wrap .dck-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--info);
  transition: width 120ms linear;
}

/* ─── Identity — collapsed (compact) mode ──────── */
/* Single-row summary shown after every page load. Click anywhere on
   the row to expand to the full identity card. Visually low-key — a
   subtle hover highlight signals it's interactive without competing
   with the action buttons in other sections. */
#dcp-keys-wrap .dck-identity-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 12px;
}
#dcp-keys-wrap .dck-identity-collapsed:hover {
  background: var(--surface3);
  border-color: var(--info);
}
#dcp-keys-wrap .dck-collapsed-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
#dcp-keys-wrap .dck-collapsed-cn {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
#dcp-keys-wrap .dck-collapsed-thumb {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#dcp-keys-wrap .dck-collapsed-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#dcp-keys-wrap .dck-collapsed-expiry {
  font-size: 11px;
  color: var(--text-muted);
}
#dcp-keys-wrap .dck-collapsed-expiry.dck-expired {
  color: var(--bad);
  font-weight: 600;
}
#dcp-keys-wrap .dck-collapsed-chevron {
  font-size: 13px;
  color: var(--text-dim);
}

/* ─── Identity details ─────────────────────────── */
/* Wrapper around the expanded identity content. The Collapse button
   is pinned to the upper-right of this box via absolute positioning,
   keeping it out of the action-row that lives at the bottom. The
   wrapper also reserves a bit of right padding so long-running values
   in the grid (cert fingerprints) don't bump into the button. */
#dcp-keys-wrap .dck-identity-expanded-wrap {
  position: relative;
  padding-right: 100px;
}
#dcp-keys-wrap .dck-identity-collapse-btn {
  position: absolute;
  top: 0;
  right: 0;
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#dcp-keys-wrap .dck-identity-collapse-btn:hover {
  color: var(--info);
  border-color: var(--info);
  background: rgba(96, 165, 250, 0.06);
}
/* On narrow viewports the absolute button can crowd the grid — drop
   the reserved padding below a tight breakpoint and let the button
   float to the top of the panel above the content instead. */
@media (max-width: 560px) {
  #dcp-keys-wrap .dck-identity-expanded-wrap {
    padding-right: 0;
    padding-top: 36px;
  }
}

#dcp-keys-wrap .dck-identity-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 12px;
  margin-bottom: 16px;
}
#dcp-keys-wrap .dck-lbl {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.7px;
  align-self: center;
}
#dcp-keys-wrap .dck-val { color: var(--text); word-break: break-all; }
#dcp-keys-wrap .dck-val.mono { font-family: 'Menlo','Consolas',monospace; }
#dcp-keys-wrap .dck-val.dck-expired { color: var(--bad); font-weight: 600; }
#dcp-keys-wrap .dck-thumbprint {
  background: var(--surface2);
  padding: 3px 6px;
  border: 1px solid var(--border);
  font-size: 11px;
}

#dcp-keys-wrap .dck-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#dcp-keys-wrap .dck-details {
  margin-top: 8px;
  border: 1px solid var(--border);
}
#dcp-keys-wrap .dck-details summary {
  cursor: pointer;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  list-style: none;
  background: var(--surface2);
}
#dcp-keys-wrap .dck-details summary::-webkit-details-marker { display: none; }
#dcp-keys-wrap .dck-details summary::before { content: '▸ '; color: var(--text-dim); }
#dcp-keys-wrap .dck-details[open] summary::before { content: '▾ '; }
#dcp-keys-wrap .dck-pem {
  margin: 0;
  padding: 10px 12px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── Placeholder cards for Phase 2/5 sections ─── */
#dcp-keys-wrap .dck-placeholder {
  font-size: 11px;
  color: var(--text-dim);
  padding: 16px 0;
}

/* ─── DKDM section ─────────────────────────────── */
#dcp-keys-wrap .dck-dropzone {
  border: 1.5px dashed var(--border-light);
  background: var(--surface2);
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#dcp-keys-wrap .dck-dropzone:hover,
#dcp-keys-wrap .dck-dropzone.dck-dropzone-active {
  border-color: var(--info);
  background: rgba(96, 165, 250, 0.05);
}
#dcp-keys-wrap .dck-dropzone-label {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
#dcp-keys-wrap .dck-dropzone-hint {
  font-size: 11px;
  color: var(--text-muted);
}
#dcp-keys-wrap .dck-link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#dcp-keys-wrap .dck-dkdm-card {
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 12px 14px;
  margin-top: 10px;
}
#dcp-keys-wrap .dck-dkdm-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
#dcp-keys-wrap .dck-dkdm-card-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
#dcp-keys-wrap .dck-card-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 2px 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
#dcp-keys-wrap .dck-card-remove:hover {
  color: var(--bad);
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}
#dcp-keys-wrap .dck-dkdm-card-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;          /* roomier than the previous 4×12 */
  font-size: 11px;
  font-style: normal;     /* defeat any inherited italics from site.css / Bootstrap */
  margin-top: 12px;       /* breathing room between summary row and detail grid */
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
/* Values inside the detail grid must render upright even if a parent
   container slipped into italic somewhere (the previous screenshot
   showed slanted CPL IDs and dates — this kills that). */
#dcp-keys-wrap .dck-dkdm-card-grid .dck-val,
#dcp-keys-wrap .dck-dkdm-card-grid .dck-lbl {
  font-style: normal;
}
#dcp-keys-wrap .dck-validity-ok   { color: var(--text); }
#dcp-keys-wrap .dck-validity-warn { color: var(--warn); }
#dcp-keys-wrap .dck-validity-bad  { color: var(--bad); }
#dcp-keys-wrap .dck-validity-note {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-left: 6px;
}
#dcp-keys-wrap .dck-keytype-badge {
  display: inline-block;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 10px;
  padding: 1px 5px;
  background: var(--surface3);
  border: 1px solid var(--border);
  margin-left: 4px;
}

/* ─── Recipients section (Phase 5) ────────────── */
/* Scrollable container around the recipient cards. Caps the section
   height so the page stays compact once the user has accumulated
   many recipients; cards beyond the cap scroll within. */
#dcp-keys-wrap .dck-recipient-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--bg);
}
#dcp-keys-wrap .dck-recipient-card {
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
#dcp-keys-wrap .dck-recipient-card:last-child { border-bottom: none; }
#dcp-keys-wrap .dck-recipient-card-collapsed { padding: 6px 12px; }
#dcp-keys-wrap .dck-recipient-card-expanded  { padding: 6px 12px 12px; }
#dcp-keys-wrap .dck-recipient-card-editing {
  border-color: var(--info);
  background: rgba(96, 165, 250, 0.04);
  padding: 12px 14px;
}

/* Organization groups in the Recipients section. Whole group is a
   collapsible folder so a chain with many screens reads as one row
   in the default view. Inside, member recipient cards render as
   normal (their own per-card chevron still works). */
#dcp-keys-wrap .dck-recipient-groups {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Outer border around the whole groups list so collapsed groups
     read as rows inside a single bordered list, instead of stacked
     mini-cards. The per-group border only kicks in when the group
     is expanded (see .dck-recipient-group-expanded below). */
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 4px;
}
#dcp-keys-wrap .dck-recipient-group {
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
#dcp-keys-wrap .dck-recipient-group-expanded {
  background: var(--bg);
  border: 1px solid var(--border);
}
#dcp-keys-wrap .dck-recipient-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  /* Explicit tight line-height — without this the header inherits
     the wrapper's 1.5 line-height, which makes the row substantially
     taller than its content needs (the 12px text gets an 18px line
     box, so the box appears half-empty when collapsed). */
  line-height: 1.2;
  transition: background 0.12s;
}
#dcp-keys-wrap .dck-recipient-group-header:hover {
  background: var(--surface3);
}
#dcp-keys-wrap .dck-recipient-group .dck-group-name {
  font-weight: 600;
  color: var(--text);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dcp-keys-wrap .dck-recipient-group .dck-group-count {
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface3);
  border-radius: 10px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
#dcp-keys-wrap .dck-recipient-group .dck-group-expired {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bad);
  border: 1px solid rgba(248, 113, 113, 0.4);
  padding: 1px 6px;
  border-radius: 3px;
  flex: 0 0 auto;
}
/* Indent member cards so the hierarchy reads. */
#dcp-keys-wrap .dck-recipient-group-expanded .dck-recipient-list {
  padding: 4px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Single-line summary row: friendly name · notes · pem-name + actions
   on the right. Long values truncate so the row stays one line tall.
   Shared with `.dck-dkdm-summary` — same flex layout, same chevron,
   different inner content. */
#dcp-keys-wrap .dck-recipient-summary,
#dcp-keys-wrap .dck-dkdm-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-height: 28px;
}
/* The DKDM summary is whole-row clickable (the recipient one isn't —
   it has edit-able sub-elements). Hover hint helps signal that. */
#dcp-keys-wrap .dck-dkdm-summary {
  cursor: pointer;
  border-radius: 3px;
  margin: -4px -6px;
  padding: 4px 6px;
  transition: background 0.12s;
  font-style: normal;       /* defeat any inherited italics */
}
#dcp-keys-wrap .dck-dkdm-summary:hover { background: rgba(255,255,255,0.04); }
/* DKDM titles are usually longer than recipient names — let them
   take up more of the row before truncating. Recipient summaries
   keep their tighter 30% cap so the notes/file columns get airtime.
   Force upright text — earlier renders showed slanted titles on
   some font fallbacks; this guarantees a normal weight rendering. */
#dcp-keys-wrap .dck-dkdm-summary .dck-summary-name {
  max-width: 55%;
  font-style: normal;
}
#dcp-keys-wrap .dck-dkdm-summary .dck-summary-days,
#dcp-keys-wrap .dck-dkdm-summary .dck-status-pill {
  font-style: normal;
}

/* Status pill — coloured "VALID" / "EXPIRED" / "NOT YET" badge that
   sits next to the title in DKDM and (future) other lists. Mirrors
   the actor-pill vocabulary in the "How this works" modal so the
   page uses one consistent colour code for state. */
#dcp-keys-wrap .dck-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 10px;
  flex: 0 0 auto;
}
#dcp-keys-wrap .dck-status-pill-ok      { background: rgba(108, 219, 130, 0.18); color: #6cdb82; }
#dcp-keys-wrap .dck-status-pill-warn    { background: rgba(255, 184, 76, 0.18); color: #ffb84c; }
#dcp-keys-wrap .dck-status-pill-bad     { background: rgba(248, 113, 113, 0.18); color: var(--bad); }
#dcp-keys-wrap .dck-status-pill-unknown { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* "12 days left" / "expired 3 days ago" — sits next to the status pill,
   takes the remaining horizontal space, dims out so the pill is the
   loud element. */
#dcp-keys-wrap .dck-summary-days {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dcp-keys-wrap .dck-summary-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30%;
}
#dcp-keys-wrap .dck-summary-sep {
  color: var(--text-dim);
  flex: 0 0 auto;
}
#dcp-keys-wrap .dck-summary-notes {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
#dcp-keys-wrap .dck-summary-file {
  color: var(--text-dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 25%;
}
#dcp-keys-wrap .dck-summary-empty { opacity: 0.6; }
#dcp-keys-wrap .dck-summary-expired {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bad);
  border: 1px solid rgba(248, 113, 113, 0.4);
  padding: 1px 5px;
  flex: 0 0 auto;
}
#dcp-keys-wrap .dck-summary-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;          /* anchor to the right edge of the row */
  padding-left: 16px;         /* visual separation from content cluster */
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* Expand/collapse triangle — sized down to feel like an inline glyph
   rather than a button. No padding, no hover background, just colour
   tint on hover. */
#dcp-keys-wrap .dck-card-toggle {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 9px;
  font-family: inherit;
  padding: 0;
  width: 12px;
  height: 12px;
  line-height: 12px;
  flex: 0 0 12px;
  text-align: center;
  opacity: 0.7;
}
#dcp-keys-wrap .dck-card-toggle:hover { color: var(--info); opacity: 1; }

/* Detail grid (rendered only when expanded) — slightly indented and
   visually separated from the summary row. */
#dcp-keys-wrap .dck-recipient-detail {
  margin-top: 10px;
  padding-top: 8px;
  padding-left: 22px;
  border-top: 1px dashed var(--border);
}

/* Edit button — same shape / size as remove button, sits next to it */
#dcp-keys-wrap .dck-card-edit {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 2px 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
#dcp-keys-wrap .dck-card-edit:hover {
  color: var(--info);
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.08);
}
/* Inline edit form layout */
#dcp-keys-wrap .dck-recipient-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#dcp-keys-wrap .dck-recipient-edit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#dcp-keys-wrap .dck-add-recipient {
  margin-top: 6px;
  border: 1px dashed var(--border-light);
  background: var(--surface2);
  padding: 0;
}
#dcp-keys-wrap .dck-add-recipient summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  list-style: none;
}
#dcp-keys-wrap .dck-add-recipient summary::-webkit-details-marker { display: none; }
#dcp-keys-wrap .dck-add-recipient summary::before { content: '▸ '; color: var(--text-dim); }
#dcp-keys-wrap .dck-add-recipient[open] summary::before { content: '▾ '; }
#dcp-keys-wrap .dck-add-recipient-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px;
}
#dcp-keys-wrap .dck-add-recipient-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Form bits used by Recipients + Issue KDM */
#dcp-keys-wrap .dck-form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#dcp-keys-wrap .dck-form-label > input,
#dcp-keys-wrap .dck-form-label > select,
#dcp-keys-wrap .dck-form-label > textarea {
  font-family: 'Menlo','Consolas',monospace;
  font-size: 12px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
#dcp-keys-wrap .dck-form-label > input:focus,
#dcp-keys-wrap .dck-form-label > select:focus,
#dcp-keys-wrap .dck-form-label > textarea:focus {
  outline: none;
  border-color: var(--info);
}
#dcp-keys-wrap .dck-form-label > textarea { resize: vertical; min-height: 96px; }
#dcp-keys-wrap .dck-form-hint {
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dim);
  font-size: 10px;
}
#dcp-keys-wrap .dck-btn {
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
}
#dcp-keys-wrap .dck-btn:hover { border-color: var(--border-light); }
#dcp-keys-wrap .dck-btn-primary {
  background: var(--info);
  color: var(--bg);
  border-color: var(--info);
}
#dcp-keys-wrap .dck-btn-primary:hover { background: var(--info); opacity: 0.9; }
/* Disabled state: greyed out, no hover lift, not-allowed cursor.
   Applies to any .dck-btn — primary or otherwise. */
#dcp-keys-wrap .dck-btn:disabled,
#dcp-keys-wrap .dck-btn-primary:disabled {
  background: var(--surface2);
  color: var(--text-dim);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.6;
}
#dcp-keys-wrap .dck-btn:disabled:hover,
#dcp-keys-wrap .dck-btn-primary:disabled:hover {
  background: var(--surface2);
  border-color: var(--border);
  opacity: 0.6;
}
/* Hint text shown next to the Generate button switches to a warn
   tint when surfacing a blocker reason instead of the default copy. */
#dcp-keys-wrap .dck-form-hint-warn {
  color: var(--warn);
  font-style: normal;
}

/* ─── Issue KDM form ──────────────────────────── */
#dcp-keys-wrap .dck-issue-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* When a form-label wraps one of the bordered list boxes (CPL picker
   or recipient checklist), give the box a bit of breathing room from
   the label text above. Symmetric with the 14px gap between sections
   below so the box reads as a self-contained card with balanced
   margins, not as a tight extension of the label text. */
#dcp-keys-wrap .dck-form-label > .dck-cpl-picker,
#dcp-keys-wrap .dck-form-label > .dck-recipient-checklist {
  margin-top: 8px;
}
/* Multi-select recipient checklist for batch KDM issuance. The
   container is height-capped + scrolls when the list grows. */
#dcp-keys-wrap .dck-recipient-checklist {
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
#dcp-keys-wrap .dck-checklist-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
#dcp-keys-wrap .dck-checklist-btn {
  font-family: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}
#dcp-keys-wrap .dck-checklist-btn:hover { color: var(--text); border-color: var(--border-light); }
#dcp-keys-wrap .dck-checklist-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Menlo','Consolas',monospace;
}
#dcp-keys-wrap .dck-checklist-items {
  max-height: 320px;
  overflow-y: auto;
}
/* Search row sits above the Select-all controls. Live filter; ×
   button clears the field. */
#dcp-keys-wrap .dck-checklist-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
#dcp-keys-wrap .dck-checklist-search input {
  flex: 1 1 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  border-radius: 2px;
}
#dcp-keys-wrap .dck-checklist-search input:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 1px var(--info);
}
/* Organization grouping inside the checklist. Each org gets a
   header row with its own checkbox (toggles every member in the
   group) and a tinted background so groups read as folders. */
#dcp-keys-wrap .dck-issue-group {
  border-bottom: 1px solid var(--border);
}
#dcp-keys-wrap .dck-issue-group:last-child { border-bottom: none; }
#dcp-keys-wrap .dck-issue-group-header {
  background: var(--surface2);
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
}
#dcp-keys-wrap .dck-issue-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
}
#dcp-keys-wrap .dck-issue-group-toggle .dck-group-name {
  font-weight: 600;
  color: var(--text);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dcp-keys-wrap .dck-issue-group-toggle .dck-group-count {
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface3);
  border-radius: 10px;
  padding: 1px 7px;
}
/* Recipient rows inside a group indent slightly so the hierarchy
   reads at a glance. */
#dcp-keys-wrap .dck-issue-group-body .dck-recipient-checkbox-row {
  padding-left: 28px;
}

/* CPL picker — same outer chrome as the recipient checklist (border,
   stacked search → controls → list), but rows are radio-selectable
   single-select instead of multi-select checkboxes. */
#dcp-keys-wrap .dck-cpl-picker {
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
#dcp-keys-wrap .dck-cpl-items {
  max-height: 260px;
  overflow-y: auto;
}
#dcp-keys-wrap .dck-cpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Asymmetric vertical padding: generous top so the title doesn't
     read as crammed against the row's top edge, zero bottom so the
     last row sits flush against the picker's bottom border. */
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  transition: background 0.12s;
}
#dcp-keys-wrap .dck-cpl-row:last-child { border-bottom: none; }
#dcp-keys-wrap .dck-cpl-row:hover { background: var(--surface2); }
#dcp-keys-wrap .dck-cpl-row-selected {
  background: rgba(81, 162, 255, 0.10);
  border-left: 2px solid var(--info);
  padding-left: 10px;        /* compensate the 2px border so row text doesn't shift */
}
#dcp-keys-wrap .dck-cpl-row-selected:hover {
  background: rgba(81, 162, 255, 0.15);
}
#dcp-keys-wrap .dck-cpl-row-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#dcp-keys-wrap .dck-cpl-title {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
/* CPL UUID + meta row sits under the title. The UUID is shown in
   full so a user can copy/paste it; it's allowed to wrap on narrow
   viewports rather than truncating with an ellipsis, since you
   genuinely need the whole string to match it against an external
   reference. Title above still ellipsises if too long. */
#dcp-keys-wrap .dck-cpl-meta {
  color: var(--text-dim);
  font-size: 11px;
  word-break: break-all;
  line-height: 1.3;
}
#dcp-keys-wrap .dck-cpl-meta .mono {
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text-muted);
}

/* Shown in place of the "Loading…" placeholder when JS bootstrap
   fails. The status banner at the top of the page carries the full
   error; this is the inline equivalent so the empty section panels
   don't read as "perpetually loading". */
#dcp-keys-wrap .dck-bootstrap-error {
  padding: 14px 16px;
  border-left: 3px solid var(--bad);
  background: rgba(248, 113, 113, 0.06);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}
#dcp-keys-wrap .dck-bootstrap-error-detail {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

/* Drop-import review modal. Reuses the .dck-how-overlay / .dck-how-modal
   chrome from the How-this-works modal — same backdrop, animation, and
   close-button. Inside, a cert preview block (read-only) sits above the
   editable form, with action buttons pinned at the bottom. */
#dcp-keys-wrap .dck-import-modal {
  max-width: 560px;
}
#dcp-keys-wrap .dck-import-progress {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 6px 10px;
  background: var(--surface3);
  border-left: 2px solid var(--info);
  border-radius: 2px;
}
#dcp-keys-wrap .dck-import-progress[hidden] { display: none; }
#dcp-keys-wrap .dck-import-cert-preview {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
}
#dcp-keys-wrap .dck-import-cert-row {
  display: contents;     /* let the spans land directly in the grid */
}
#dcp-keys-wrap .dck-import-cert-preview .dck-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  align-self: center;
}
#dcp-keys-wrap .dck-import-cert-preview .dck-val {
  color: var(--text);
  font-style: normal;
  word-break: break-all;
}
#dcp-keys-wrap .dck-import-cert-preview .dck-val.mono {
  font-family: 'Menlo','Consolas',monospace;
}
#dcp-keys-wrap .dck-import-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
#dcp-keys-wrap .dck-recipient-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* See dck-cpl-row — same asymmetric padding rationale. */
  padding: 9px 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
}
#dcp-keys-wrap .dck-recipient-checkbox-row:last-child { border-bottom: none; }
#dcp-keys-wrap .dck-recipient-checkbox-row:hover { background: var(--surface2); }
#dcp-keys-wrap .dck-recipient-checkbox-name {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
#dcp-keys-wrap .dck-recipient-checkbox-meta {
  color: var(--text-dim);
  font-size: 10px;
  flex: 0 0 auto;
}
#dcp-keys-wrap .dck-recipient-checkbox-flag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bad);
  border: 1px solid rgba(248, 113, 113, 0.4);
  padding: 1px 5px;
  flex: 0 0 auto;
}
#dcp-keys-wrap .dck-recipient-checkbox-expired .dck-recipient-checkbox-name { color: var(--text-dim); }
#dcp-keys-wrap .dck-issue-tz {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
#dcp-keys-wrap .dck-tz-status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
}
#dcp-keys-wrap .dck-tz-current {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text);
}
/* Live wall-clock at the selected venue. Slightly louder than the
   surrounding muted text so the eye lands on it — this is the thing
   the user actually wants to see when picking a timezone for KDM
   delivery. */
#dcp-keys-wrap .dck-tz-clock {
  color: var(--text);
  font-weight: 600;
}
#dcp-keys-wrap .dck-tz-offset {
  color: var(--info);
  font-weight: 600;
}
#dcp-keys-wrap .dck-tz-revert {
  color: var(--text-dim);
}
#dcp-keys-wrap .dck-tz-revert .dck-link {
  color: var(--info);
  font-family: inherit;
}
#dcp-keys-wrap .dck-issue-validity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  #dcp-keys-wrap .dck-issue-validity { grid-template-columns: 1fr; }
}
/* FM-flags box — was a <fieldset> originally, but those have browser
   defaults (margin-block-end, min-block-size: min-content, weird
   legend baseline alignment in Safari) that rendered extra empty
   space at the bottom. Plain div with a heading row is cleaner. */
#dcp-keys-wrap .dck-fm-flags {
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
#dcp-keys-wrap .dck-fm-flags-legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
#dcp-keys-wrap .dck-fm-flags label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
}
#dcp-keys-wrap .dck-issue-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}