/* MIT License. Copyright (c) 2026 Decentralized Science Labs LLC. */
/* The deploy flow of /admin (the Deploy and Check tabs, admin.html): the vertical stepper, the transaction ledger, the
   progress summary and the check results. Windows follow genesisl1.com/gov.html: 14px radius,
   hairlines, no shadows. Every class is prefixed dp-; shared classes are never restyled here.
   Colours come from the shared tokens, with the version 1 names as fallbacks. */

:root {
  --dp-surface: var(--surface, var(--card, #ffffff));
  --dp-surface-2: var(--surface-2, var(--sunken, #fafbfc));
  --dp-bg-2: var(--bg-2, var(--sunken, #f8fafc));
  --dp-bg-3: var(--bg-3, var(--hover, #f1f5f9));
  --dp-ring: var(--ring, #e5e7eb);
  --dp-ring-2: var(--ring-2, var(--ring-strong, #cbd5e1));
  --dp-ink: var(--ink, #0f172a);
  --dp-ink-2: var(--ink-2, #334155);
  --dp-muted: var(--muted, #64748b);
  --dp-faint: var(--faint, #94a3b8);
  --dp-primary: var(--primary, #2563eb);
  --dp-primary-soft: var(--primary-soft, #eff6ff);
  --dp-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

  /* step and transaction states: the gov.html badge pairs (background / text / border) */
  --dp-pending-bg: #f8fafc; --dp-pending-ink: #475569; --dp-pending-line: #e2e8f0;
  --dp-sent-bg: #eef2ff; --dp-sent-ink: #3730a3; --dp-sent-line: #e0e7ff;
  --dp-confirmed-bg: #eff6ff; --dp-confirmed-ink: #1d4ed8; --dp-confirmed-line: #bfdbfe;
  --dp-verified-bg: #ecfdf5; --dp-verified-ink: #065f46; --dp-verified-line: #d1fae5;
  --dp-failed-bg: #fef2f2; --dp-failed-ink: #991b1b; --dp-failed-line: #fee2e2;
  --dp-warn-bg: #fef3c7; --dp-warn-ink: #92400e; --dp-warn-line: #fde68a;
}
:root[data-theme="dark"] {
  --dp-pending-bg: #141418; --dp-pending-ink: #a1a1aa; --dp-pending-line: #2e2e36;
  --dp-sent-bg: #17183a; --dp-sent-ink: #a5b4fc; --dp-sent-line: #2e3170;
  --dp-confirmed-bg: #151b33; --dp-confirmed-ink: #8aa2ff; --dp-confirmed-line: #2b3a74;
  --dp-verified-bg: #062a1f; --dp-verified-ink: #6ee7b7; --dp-verified-line: #0b4a37;
  --dp-failed-bg: #2a0e10; --dp-failed-ink: #fca5a5; --dp-failed-line: #5c1d22;
  --dp-warn-bg: #2a2005; --dp-warn-ink: #fcd34d; --dp-warn-line: #4a3a0a;
}

/* ------------------------------------------------------------------ page head (shared .page-head, then the facts strip) */
.dp-page { min-width: 0; }
.dp-hero-facts { list-style: none; margin: 20px 0 0; max-width: 1100px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--dp-ring); border-radius: 14px; background: var(--dp-surface); overflow: hidden; }
.dp-hero-facts li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--dp-ring); min-width: 0; }
.dp-hero-facts li:first-child { border-left: 0; }
.dp-hero-facts b { font-size: 14px; font-weight: 600; color: var(--dp-ink); }
.dp-hero-facts span { font-size: 13px; color: var(--dp-muted); }

/* ------------------------------------------------------------------ modes */
.dp-modes { display: flex; gap: 4px; margin: 22px 0 20px; border-bottom: 1px solid var(--dp-ring); overflow-x: auto; scrollbar-width: none; }
.dp-mode { flex: none; border: 0; background: transparent; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--dp-muted); cursor: pointer; border-radius: 10px 10px 0 0; }
.dp-mode:hover { color: var(--dp-ink); background: var(--dp-bg-2); }
.dp-mode[aria-selected="true"] { color: var(--dp-ink); border-bottom-color: var(--dp-primary); }
.dp-panel[hidden] { display: none; }

/* ------------------------------------------------------------------ layout: stepper beside the summary */
.dp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.dp-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar) + 64px); min-width: 0; }
.dp-check-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Inside the portal the widths that count are the admin panel's (admin.css names it ad-panel) and
   the main column's (dp-main: the stepper, or check mode's windows), not the viewport's. */
.dp-steps, .dp-check-main { container: dp-main / inline-size; }
@container ad-panel (max-width: 1000px) {
  .dp-layout { grid-template-columns: minmax(0, 1fr); }
  .dp-aside { position: static; order: -1; }
  .dp-aside .dp-release { display: none; }
}

/* ------------------------------------------------------------------ windows */
.dp-window { min-width: 0; }
.dp-window-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--dp-ring); }
.dp-window-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dp-window-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dp-loading { padding: 20px; }
.dp-lead { margin: 0; color: var(--dp-ink-2); font-size: 14px; max-width: 70ch; }

/* ------------------------------------------------------------------ stepper */
.dp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dp-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.dp-step::before { content: ""; position: absolute; left: 16px; top: 40px; bottom: -16px; width: 1px; background: var(--dp-ring); }
.dp-step:last-child::before { display: none; }
.dp-step[data-phase="done"]::before { background: color-mix(in srgb, var(--dp-primary) 45%, var(--dp-ring)); }
.dp-step-mark { position: relative; z-index: 1; width: 34px; height: 34px; margin-top: 12px; border-radius: 9999px; border: 1px solid var(--dp-ring-2); background: var(--dp-surface); display: grid; place-items: center; font-family: var(--dp-mono); font-size: 13px; font-weight: 600; color: var(--dp-muted); }
.dp-step-mark svg { width: 16px; height: 16px; }
.dp-step[data-phase="active"] .dp-step-mark { border-color: var(--dp-primary); color: var(--dp-primary); box-shadow: 0 0 0 4px var(--dp-primary-soft); }
.dp-step[data-phase="done"] .dp-step-mark { border-color: var(--dp-primary); background: var(--dp-primary); color: #fff; }
:root[data-theme="dark"] .dp-step[data-phase="done"] .dp-step-mark { color: #09090b; }
.dp-step[data-phase="blocked"] .dp-step-card { background: var(--dp-surface-2); }
.dp-step-card { min-width: 0; }
.dp-step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--dp-ring); flex-wrap: wrap; }
.dp-step-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dp-step-intro { margin: 0; padding: 14px 20px 0; font-size: 14px; color: var(--dp-muted); max-width: 76ch; }
.dp-step-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dp-step-body > :empty { display: none; }
.dp-step[data-phase="blocked"] .dp-step-intro { color: var(--dp-faint); }

.dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dp-actions-quiet { padding-top: 12px; border-top: 1px solid var(--dp-ring); }

/* ------------------------------------------------------------------ badges */
.dp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 9999px; border: 1px solid var(--dp-pending-line); background: var(--dp-pending-bg); color: var(--dp-pending-ink); font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.dp-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex: none; }
.dp-badge[data-status="sent"] { background: var(--dp-sent-bg); color: var(--dp-sent-ink); border-color: var(--dp-sent-line); }
.dp-badge[data-status="confirmed"] { background: var(--dp-confirmed-bg); color: var(--dp-confirmed-ink); border-color: var(--dp-confirmed-line); }
.dp-badge[data-status="verified"] { background: var(--dp-verified-bg); color: var(--dp-verified-ink); border-color: var(--dp-verified-line); }
.dp-badge[data-status="failed"] { background: var(--dp-failed-bg); color: var(--dp-failed-ink); border-color: var(--dp-failed-line); }
.dp-badge[data-status="warn"] { background: var(--dp-warn-bg); color: var(--dp-warn-ink); border-color: var(--dp-warn-line); }
@media (prefers-reduced-motion: no-preference) {
  .dp-badge[data-status="sent"] .dp-dot { animation: dp-pulse 1.2s ease-in-out infinite; }
}
@keyframes dp-pulse { 50% { opacity: .35; } }

/* ------------------------------------------------------------------ facts and stats */
.dp-facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--dp-ring); border-radius: 12px; overflow: hidden; background: var(--dp-surface); }
.dp-fact { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 9px 14px; border-top: 1px solid var(--dp-ring); align-items: center; min-width: 0; }
.dp-fact:first-child { border-top: 0; }
.dp-fact dt { font-size: 13px; color: var(--dp-muted); }
.dp-fact dd { margin: 0; font-size: 14px; color: var(--dp-ink); min-width: 0; overflow-wrap: anywhere; }
.dp-fact .addr { max-width: 100%; flex-wrap: wrap; word-break: break-all; }
.dp-side .dp-fact { grid-template-columns: 112px minmax(0, 1fr); padding: 8px 12px; }

.dp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--dp-ring); border-radius: 12px; overflow: hidden; background: var(--dp-surface); }
/* hairlines between cells in any column count: drawn outside each cell, clipped by the container */
.dp-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 0; box-shadow: -1px 0 0 var(--dp-ring), 0 -1px 0 var(--dp-ring); }
.dp-stat-v { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--dp-ink); font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: normal; }
.dp-stat-l { font-size: 12px; font-weight: 600; color: var(--dp-muted); }
.dp-stat-s { font-size: 12px; color: var(--dp-faint); }

/* ------------------------------------------------------------------ external contracts */
.dp-ext-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dp-ext { border: 1px solid var(--dp-ring); border-radius: 12px; padding: 12px 14px; background: var(--dp-surface-2); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dp-ext .input { font-size: 13px; }
.dp-ext-src { color: var(--dp-faint); }
.dp-ext-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 22px; }
.dp-ext-detail { font-size: 12.5px; color: var(--dp-muted); overflow-wrap: anywhere; min-width: 0; }
@container dp-main (max-width: 600px) { .dp-ext-grid { grid-template-columns: minmax(0, 1fr); } }
/* integrations the factory lists: one card per GL1F collection or CIPNFT contract */
.dp-ix { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dp-ring); min-width: 0; }
.dp-ix-intro { display: flex; flex-direction: column; gap: 4px; }
.dp-ix-intro .dp-h3 { margin: 0; }
.dp-ix-intro p { margin: 0; max-width: 76ch; }
.dp-ix-src { margin: 0; color: var(--dp-faint); }
.dp-ix-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dp-ix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dp-ix-head h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--dp-ink); }
.dp-ix-count { font-size: 12.5px; color: var(--dp-muted); }
.dp-ix-about { margin: -4px 0 0; color: var(--dp-muted); max-width: 76ch; }
.dp-ix-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dp-ix-empty { margin: 0; }
.dp-ix-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.dp-ix-title { font-size: 13.5px; font-weight: 600; color: var(--dp-ink); overflow-wrap: anywhere; min-width: 0; }
.dp-ix-meta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 10px 12px; }
.dp-ix-addrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
@container dp-main (max-width: 600px) {
  .dp-ix-meta, .dp-ix-addrs { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ the transaction ledger */
.dp-ledger { list-style: none; margin: 0; padding: 0; border: 1px solid var(--dp-ring); border-radius: 12px; overflow: hidden; background: var(--dp-surface); }
.dp-tx { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px 200px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--dp-ring); min-width: 0; }
.dp-tx:first-child { border-top: 0; }
.dp-tx[aria-current="step"] { background: var(--dp-sent-bg); }
.dp-tx-n { width: 26px; height: 26px; border-radius: 9999px; border: 1px solid var(--dp-ring); background: var(--dp-bg-2); display: grid; place-items: center; font-family: var(--dp-mono); font-size: 11.5px; color: var(--dp-muted); }
.dp-tx[data-status="confirmed"] .dp-tx-n, .dp-tx[data-status="verified"] .dp-tx-n { border-color: var(--dp-confirmed-line); background: var(--dp-confirmed-bg); color: var(--dp-confirmed-ink); }
.dp-tx[data-status="verified"] .dp-tx-n { border-color: var(--dp-verified-line); background: var(--dp-verified-bg); color: var(--dp-verified-ink); }
.dp-tx[data-status="failed"] .dp-tx-n { border-color: var(--dp-failed-line); background: var(--dp-failed-bg); color: var(--dp-failed-ink); }
.dp-tx-main { min-width: 0; }
.dp-tx-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dp-tx-name b { font-size: 14px; font-weight: 600; color: var(--dp-ink); }
.dp-tx-contract { font-size: 12px; color: var(--dp-faint); }
.dp-tx-role { margin: 2px 0 0; font-size: 13px; color: var(--dp-muted); }
.dp-tx-err { margin: 4px 0 0; font-size: 12.5px; color: var(--dp-failed-ink); overflow-wrap: anywhere; }
.dp-tx-gas { font-family: var(--dp-mono); font-size: 12px; color: var(--dp-muted); text-align: right; font-variant-numeric: tabular-nums; }
.dp-tx-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.dp-tx-state .addr { font-size: 12px; }
@container dp-main (max-width: 820px) {
  .dp-tx { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n main state" "n gas state"; row-gap: 2px; }
  .dp-tx-n { grid-area: n; }
  .dp-tx-main { grid-area: main; }
  .dp-tx-gas { grid-area: gas; text-align: left; }
  .dp-tx-state { grid-area: state; }
}
@container dp-main (max-width: 520px) {
  .dp-tx { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "n main" "n gas" "n state"; row-gap: 4px; align-items: start; }
  .dp-tx-n { grid-area: n; }
  .dp-tx-main { grid-area: main; }
  .dp-tx-gas { grid-area: gas; text-align: left; }
  .dp-tx-state { grid-area: state; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ deploy and verify */
.dp-deploy-top { display: flex; flex-direction: column; gap: 12px; }
.dp-deploy-meter { display: flex; align-items: center; gap: 12px; }
.dp-deploy-meter .dp-meter { flex: 1 1 auto; }
.dp-deploy-count { font-family: var(--dp-mono); font-size: 13px; color: var(--dp-ink-2); white-space: nowrap; }
.dp-meter { height: 9px; border-radius: 9999px; background: var(--dp-bg-3); overflow: hidden; }
.dp-meter-fill { height: 100%; border-radius: 9999px; background: var(--dp-primary); }
@media (prefers-reduced-motion: no-preference) { .dp-meter-fill { transition: width .2s ease; } }
.dp-now { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--dp-ink-2); }
.dp-deploy-now:empty { display: none; }

/* ------------------------------------------------------------------ results */
.dp-results { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dp-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dp-results-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-summary { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dp-verified-line); background: var(--dp-verified-bg); color: var(--dp-verified-ink); margin-bottom: 8px; }
.dp-summary.fail { border-color: var(--dp-failed-line); background: var(--dp-failed-bg); color: var(--dp-failed-ink); }
.dp-summary svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.dp-summary p { margin: 0; }
.dp-summary-title { font-size: 15px; font-weight: 600; }
.dp-summary-sub { font-size: 13px; opacity: .9; }
.dp-group { border-top: 1px solid var(--dp-ring); padding: 2px 0; }
.dp-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.dp-group > summary::-webkit-details-marker { display: none; }
.dp-group > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--dp-muted); border-bottom: 1.5px solid var(--dp-muted); transform: rotate(45deg); margin: -4px 4px 0 0; flex: none; order: 3; }
.dp-group[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.dp-group-title { font-size: 15px; font-weight: 600; color: var(--dp-ink); margin-right: auto; }
.dp-group-about { margin: 0 0 6px; font-size: 12.5px; color: var(--dp-muted); }
.dp-checks { list-style: none; margin: 0 0 10px; padding: 0; }
.dp-check { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--dp-ring); min-width: 0; }
.dp-check:first-child { border-top: 0; }
.dp-check > svg { width: 16px; height: 16px; margin-top: 2px; }
.dp-check.pass > svg { color: var(--dp-verified-ink); }
.dp-check.fail > svg { color: var(--dp-failed-ink); }
.dp-check.note > svg { color: var(--dp-muted); }
.dp-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-check-title { font-size: 13.5px; color: var(--dp-ink); overflow-wrap: anywhere; }
.dp-check-detail { font-size: 12.5px; color: var(--dp-muted); overflow-wrap: anywhere; }
.dp-check-addr { font-size: 12px; color: var(--dp-faint); overflow-wrap: anywhere; word-break: break-all; }
.dp-notes h3 { font-size: 14px; font-weight: 600; margin: 10px 0 2px; }

/* ------------------------------------------------------------------ publish */
.dp-publish-form { display: flex; flex-direction: column; gap: 14px; }
.dp-publish-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container dp-main (max-width: 640px) { .dp-publish-pair { grid-template-columns: minmax(0, 1fr); } }
.dp-publish-out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dp-more { border: 1px solid var(--dp-ring); border-radius: 12px; padding: 0 14px; background: var(--dp-surface-2); }
.dp-more > summary { cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--dp-ink-2); width: fit-content; }
.dp-more[open] { padding-bottom: 14px; }
.dp-more[open] > summary { margin-bottom: 4px; }
.dp-more > .dp-publish-pair + .dp-publish-pair, .dp-more > .row { margin-top: 12px; }
.dp-csp code { font-size: 12px; }
.dp-h3 { font-size: 15px; font-weight: 600; margin: 6px 0 0; }
.dp-next { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--dp-ink-2); }
.dp-next li { padding-left: 4px; min-width: 0; }
.dp-next li::marker { font-family: var(--dp-mono); font-size: 12px; color: var(--dp-muted); }
.dp-next b { color: var(--dp-ink); font-weight: 600; }
.dp-code { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; min-width: 0; }
.dp-code code { flex: 1 1 auto; min-width: 0; font-family: var(--dp-mono); font-size: 12.5px; line-height: 1.5; color: var(--dp-ink-2); background: var(--dp-bg-2); border: 1px solid var(--dp-ring); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.dp-copy { flex: none; align-self: flex-start; }

/* ------------------------------------------------------------------ check mode */
.dp-source { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dp-file { font: inherit; font-size: 14px; color: var(--dp-ink-2); max-width: 100%; }
.dp-file::file-selector-button { font: inherit; font-size: 13px; font-weight: 500; margin-right: 10px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--dp-ring-2); background: var(--dp-surface); color: var(--dp-ink); cursor: pointer; }
.dp-file::file-selector-button:hover { background: var(--dp-bg-2); }
.dp-about { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--dp-ink-2); }
.dp-about b { color: var(--dp-ink); font-weight: 600; }

/* ------------------------------------------------------------------ the progress summary */
.dp-side { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dp-side h2 { font-size: 15px; font-weight: 600; }
.dp-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dp-side-count { font-family: var(--dp-mono); font-size: 15px; font-weight: 600; color: var(--dp-ink); }
.dp-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; }
.dp-legend li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-legend li > .num { font-family: var(--dp-mono); font-size: 13px; color: var(--dp-ink-2); }
.dp-digest { overflow-wrap: anywhere; }
.dp-side p { margin: 0; }
.dp-side .btn.block { width: 100%; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 640px) {
  .dp-hero-facts { grid-template-columns: minmax(0, 1fr); }
  .dp-hero-facts li { border-left: 0; border-top: 1px solid var(--dp-ring); }
  .dp-hero-facts li:first-child { border-top: 0; }
  .dp-step { grid-template-columns: minmax(0, 1fr); }
  .dp-step::before { display: none; }
  .dp-step-mark { position: absolute; top: 12px; left: 14px; width: 26px; height: 26px; margin: 0; font-size: 12px; }
  .dp-step-head { padding: 12px 14px 12px 50px; }
  .dp-step-intro { padding: 12px 14px 0; }
  .dp-step-body, .dp-window-body { padding: 12px 14px 16px; }
  .dp-window-head { padding: 12px 14px; }
  .dp-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dp-side .dp-fact { grid-template-columns: minmax(0, 1fr); }
  .dp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-actions > .btn { flex: 1 1 auto; }
  .dp-mode { padding: 10px 10px; font-size: 14px; }
}
@media (max-width: 400px) {
  .dp-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ publish to this site (admin) */
.dp-live { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dp-live:empty { display: none; }
.dp-pub { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border: 1px solid var(--dp-ring); border-radius: 12px; background: var(--dp-surface-2); min-width: 0; }
.dp-pub-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.dp-pub-head p { margin: 4px 0 0; max-width: 72ch; }
.dp-pub-head .dp-h3 { margin: 0; }
.dp-pub-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--primary-line, #bfdbfe); background: var(--dp-primary-soft); color: var(--dp-primary); }
.dp-pub-mark svg { width: 18px; height: 18px; }
.dp-hand { border: 1px solid var(--dp-ring); border-radius: 12px; background: var(--dp-surface); min-width: 0; }
.dp-hand > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.dp-hand > summary::-webkit-details-marker { display: none; }
.dp-hand > summary::after { content: ""; width: 8px; height: 8px; margin: 0 2px 0 auto; align-self: center; border-right: 1.5px solid var(--dp-muted); border-bottom: 1.5px solid var(--dp-muted); transform: rotate(45deg); }
.dp-hand[open] > summary::after { transform: rotate(-135deg); }
.dp-hand-title { font-size: 14.5px; font-weight: 600; color: var(--dp-ink); }
.dp-hand-sub { font-size: 13px; color: var(--dp-muted); }
.dp-hand-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; border-top: 1px solid var(--dp-ring); min-width: 0; }
.dp-hand-body > p:first-child { margin: 12px 0 0; }
@media (max-width: 640px) {
  .dp-pub { padding: 14px; }
  .dp-pub-head { grid-template-columns: minmax(0, 1fr); }
  .dp-pub-mark { display: none; }
  .dp-hand > summary { padding: 12px 14px; }
  .dp-hand-body { padding: 4px 14px 14px; }
}