/* Deploy: the launch console. Layout, the record pane, and the kit look for
   the vendored markup this page hosts (the launch panel, the Auth Kit widget,
   the scoped-authorization dialog). Color, type and components come from
   vendor/defxn/defxn-product.css (flux/defxn-product-kit, synced, never
   edited here); every paint reads a kit token as hsl(var(--token)). Product
   rules are scoped under [data-dx-product="deploy"]. Type leans mono + sans;
   there is no display serif on this page. This origin's CSP allows fonts from
   'self' only, so the kit's font stacks fall back to system faces by design. */

[data-dx-product="deploy"] .dp-console {
  width: 100%; max-width: var(--dx-max); margin: 0 auto;
  padding: 24px var(--dx-gutter) 40px; display: grid; gap: 16px;
}
[data-dx-product="deploy"] .dp-pane__label {
  font: 500 11px/1.2 var(--dx-font-mono); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--text-muted));
}
[data-dx-product="deploy"] .dp-pane__title { font: 600 16px/1.3 var(--dx-font-sans); letter-spacing: -.01em; color: hsl(var(--text-strong)); margin: 4px 0 0; }

/* Head: one tight headline, and the launch sequence as a schematic. ------ */
[data-dx-product="deploy"] .dp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: end; }
[data-dx-product="deploy"] .dp-head__text { display: grid; gap: 12px; align-content: end; }
[data-dx-product="deploy"] .dp-head__eyebrow { gap: 8px; }
[data-dx-product="deploy"] .dp-head__eyebrow::before { display: none; }
[data-dx-product="deploy"] .dp-head__glyph { display: inline-grid; color: hsl(var(--primary)); }
[data-dx-product="deploy"] .dp-head__lede { font-size: 15px; line-height: 1.55; color: hsl(var(--text-muted)); max-width: 52ch; }
[data-dx-product="deploy"] .dp-seqframe { margin: 0; }
[data-dx-product="deploy"] .dp-seqframe .dx-frame__state { color: hsl(var(--text-strong)); }
[data-dx-product="deploy"] .dp-seqfig { min-height: 48px; }
[data-dx-product="deploy"] .dp-seqfig .dx-sx text { font-size: 12px; }

/* Console status line: one mono row above the panes. */
[data-dx-product="deploy"] .dp-status {
  display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 8px 0;
  border-top: 1px solid hsl(var(--border-subtle)); border-bottom: 1px solid hsl(var(--border-subtle));
  font: 500 12px/1.4 var(--dx-font-mono);
}
[data-dx-product="deploy"] .dp-status > div { display: flex; align-items: baseline; gap: 8px; padding: 0 16px; border-left: 1px solid hsl(var(--border-subtle)); min-width: 0; }
[data-dx-product="deploy"] .dp-status > div:first-child { padding-left: 0; border-left: 0; }
[data-dx-product="deploy"] .dp-status dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--text-faint)); }
[data-dx-product="deploy"] .dp-status dd { margin: 0; color: hsl(var(--text-strong)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-dx-product="deploy"] .dp-status__value[data-unknown]::before { content: "—"; color: hsl(var(--text-faint)); }

/* Bay: inputs | record. --------------------------------------------------- */
[data-dx-product="deploy"] .dp-bay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
[data-dx-product="deploy"] .dp-pane {
  min-width: 0; display: grid; gap: 14px; align-content: start; padding: 16px;
  border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius); background: hsl(var(--surface));
}

/* Inputs pane. */
[data-dx-product="deploy"] .dp-signer { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="deploy"] .dp-signer__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-dx-product="deploy"] .dp-signer__row #identitySignIn { margin-left: auto; }
[data-dx-product="deploy"] .dp-signer__status { flex: 1 1 200px; min-width: 0; font: 400 12.5px/1.5 var(--dx-font-mono); color: hsl(var(--text)); overflow-wrap: anywhere; }
[data-dx-product="deploy"] .dp-pane > .dp-pane__label { margin: 0; }
[data-dx-product="deploy"] #panelRefusal:empty { display: none; }
/* The grammar gate quotes the node compiler verbatim; it scrolls past four lines. */
[data-dx-product="deploy"] #panelRefusal .dp-refusal-quote { --dx-scroll-max: 5.9em; }
[data-dx-product="deploy"] .dp-modes { background: transparent; }

/* The vendored launch panel (flx-resolver-launch-panel.mjs), dressed with kit
   classes by deploy-app.js; this only lays it out. */
[data-dx-product="deploy"] .resolver-panel { display: grid; gap: 14px; }
[data-dx-product="deploy"] .resolver-panel-tabs { justify-self: start; }
[data-dx-product="deploy"] .resolver-panel-tabs .dx-choice.active { background: hsl(var(--reference-100)); border-color: hsl(var(--reference-400)); color: hsl(var(--reference-700)); }
[data-dx-product="deploy"] .dp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; }
[data-dx-product="deploy"] .dp-form[hidden] { display: none; }
[data-dx-product="deploy"] .dp-field { font: 500 12.5px/1.4 var(--dx-font-sans); color: hsl(var(--text-muted)); align-content: start; }
[data-dx-product="deploy"] .dp-form .dx-textarea { min-height: 72px; }
/* In this pane only the short ids share a row; manifests, keys and the
   action take the full width. */
[data-dx-product="deploy"] .dp-form > * { grid-column: 1 / -1; }
[data-dx-product="deploy"] .dp-form > .dp-field:is(:has([name="newChainId"]), :has([name="carrierChainId"]), :has([name="capabilityId"]), :has([name="capCarrierChainId"])) { grid-column: auto; }
/* Desktop: the two manifests side by side; a capability's text beside its
   cid alternative; supersedes beside the new control it restates. */
@media (min-width: 761px) {
  [data-dx-product="deploy"] .dp-form > .dp-field:is(:has([name="offerText"]), :has([name="grammarText"])) { grid-column: auto; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] {
    grid-template-areas: "action action" "id carrier" "text cid" "supersedes newcontrol" "submit submit";
  }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > * { grid-column: auto; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capAction"]) { grid-area: action; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capabilityId"]) { grid-area: id; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capCarrierChainId"]) { grid-area: carrier; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capManifestText"]) { grid-area: text; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capManifestCid"]) { grid-area: cid; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capControlField"]) { grid-area: supersedes-start / supersedes-start / supersedes-end / newcontrol-end; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capSupersedesCid"]) { grid-area: supersedes; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > :has([name="capNewControlField"]) { grid-area: newcontrol; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > button[type="submit"] { grid-area: submit; }
  [data-dx-product="deploy"] .dp-form[data-mode-form="capability"] > [data-cap-preview] { grid-column: 1 / -1; grid-row: 6; }
}
[data-dx-product="deploy"] .dp-form > button[type="submit"] { justify-self: start; }
[data-dx-product="deploy"] .dp-form > [data-cap-preview] { margin: 0; }
[data-dx-product="deploy"] .resolver-panel [data-result] { margin: 0; }
[data-dx-product="deploy"] .resolver-panel [data-result]:empty { display: none; }

/* Record pane: the signature, in a schematic frame. Each block is a row of
   the record tape; the block the last input moved is the one live thing. */
[data-dx-product="deploy"] .dp-record { min-width: 0; display: grid; gap: 12px; align-content: start; }
[data-dx-product="deploy"] .dp-record .dx-frame__head { margin-bottom: 0; }
[data-dx-product="deploy"] .dp-record__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
[data-dx-product="deploy"] .dp-record__kind { font: 500 15px/1.3 var(--dx-font-mono); color: hsl(var(--text-strong)); margin: 0; }
[data-dx-product="deploy"] .dp-record__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-dx-product="deploy"] .dp-record__state {
  margin: 0; padding: 8px 12px; border-radius: var(--dx-radius-sm); font: 400 12.5px/1.5 var(--dx-font-mono);
  background: hsl(var(--depth)); border: 1px solid hsl(var(--border-subtle)); border-left: 2px solid hsl(var(--border-strong)); color: hsl(var(--text));
}
[data-dx-product="deploy"] .dp-record__state[data-state="holding"] { border-left-color: hsl(var(--warning)); }
[data-dx-product="deploy"] .dp-record__state[data-state="ready"] { border-left-color: hsl(var(--success)); }
[data-dx-product="deploy"] .dp-record__state[data-state="locked"] { border-left-color: hsl(var(--warning)); color: hsl(var(--text-strong)); }
[data-dx-product="deploy"] .dp-record__state[data-state="admitted"] { border-left-color: hsl(var(--success)); color: hsl(var(--success-700)); }
[data-dx-product="deploy"] .dp-record__state[data-state="refused"] { border-left-color: hsl(var(--danger)); }
/* What the node will do with the grammar manifest (js/grammar-precheck.mjs):
   one line, plus the compiled letters and kinds when it is enforced. */
[data-dx-product="deploy"] .dp-grammar { display: grid; gap: 6px; padding: 8px 12px; border-radius: var(--dx-radius-sm); border: 1px solid hsl(var(--border-subtle)); background: hsl(var(--depth)); }
[data-dx-product="deploy"] .dp-grammar__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-dx-product="deploy"] .dp-grammar__line { font: 400 12px/1.45 var(--dx-font-mono); color: hsl(var(--text-muted)); overflow-wrap: anywhere; }
[data-dx-product="deploy"] .dp-grammar__kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; font: 400 12px/1.45 var(--dx-font-mono); }
[data-dx-product="deploy"] .dp-grammar__kv dt { color: hsl(var(--text-faint)); }
[data-dx-product="deploy"] .dp-grammar__kv dd { margin: 0; color: hsl(var(--text-strong)); overflow-wrap: anywhere; }
[data-dx-product="deploy"] .dp-grammar__kv code { font: inherit; }
[data-dx-product="deploy"] .dp-tape { --dx-scroll-max: 400px; position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="deploy"] .dp-tape:empty { display: none; }
[data-dx-product="deploy"] .dp-block {
  display: grid; grid-template-columns: 30px 150px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 6px 4px;
  border-bottom: 1px solid hsl(var(--border-subtle));
  transition: background-color .9s var(--dx-ease);
}
[data-dx-product="deploy"] .dp-block__letter {
  align-self: start; width: 26px; height: 24px; display: grid; place-items: center; border-radius: 4px;
  font: 600 14px/1 var(--dx-font-mono); color: hsl(var(--text-strong)); background: hsl(var(--depth)); border: 1px solid hsl(var(--border-default));
}
[data-dx-product="deploy"] .dp-block__name { font: 500 11.5px/1.35 var(--dx-font-sans); color: hsl(var(--text-muted)); }
[data-dx-product="deploy"] .dp-block__name em { font-style: normal; font-family: var(--dx-font-mono); color: hsl(var(--text)); }
[data-dx-product="deploy"] .dp-block__value { font: 400 12px/1.45 var(--dx-font-mono); color: hsl(var(--text-strong)); overflow-wrap: anywhere; }
[data-dx-product="deploy"] .dp-block.is-pending .dp-block__value { color: hsl(var(--text-faint)); font-style: italic; }
[data-dx-product="deploy"] .dp-block.is-pending .dp-block__letter { border-style: dashed; color: hsl(var(--text-faint)); }
/* A block the last input changed: marked once, then it settles. */
@keyframes dp-block-moved { from { background-color: hsl(var(--primary-100)); } to { background-color: transparent; } }
[data-dx-product="deploy"] .dp-block.is-new { animation: dp-block-moved 1.1s var(--dx-ease) 1; }
[data-dx-product="deploy"] .dp-block.is-new .dp-block__letter { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: transparent; }
[data-dx-product="deploy"] .dp-record__raw { --dx-scroll-max: 400px; margin: 0; font-size: 12px; }
[data-dx-product="deploy"] .dp-record__note { margin: 0; }
[data-dx-product="deploy"] .dp-record .dx-tabs { flex-wrap: nowrap; }

/* Ledger: what is already on this node. ------------------------------------ */
[data-dx-product="deploy"] .dp-ledger { border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius); background: hsl(var(--surface)); overflow: hidden; }
[data-dx-product="deploy"] .dp-ledger__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="deploy"] .dp-ledger .dx-tabs { flex-wrap: nowrap; }
[data-dx-product="deploy"] .dp-count { font: 500 11px/1 var(--dx-font-mono); color: hsl(var(--text-faint)); }
[data-dx-product="deploy"] .dx-choice[aria-selected="true"] .dp-count { color: inherit; }
[data-dx-product="deploy"] .dp-scroll { --dx-scroll-max: 180px; }
[data-dx-product="deploy"] .dp-pad { padding: 14px; }
[data-dx-product="deploy"] .dp-pad--top { padding-bottom: 0; }
[data-dx-product="deploy"] .dp-ledger .dx-refusal, [data-dx-product="deploy"] .dp-ledger .dp-empty { margin: 14px; }
[data-dx-product="deploy"] .dp-items { list-style: none; margin: 0; padding: 0; }
[data-dx-product="deploy"] .dp-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 14px; border-bottom: 1px solid hsl(var(--border-subtle)); min-width: 0; }
[data-dx-product="deploy"] .dp-item:last-child { border-bottom: 0; }
[data-dx-product="deploy"] .dp-item:hover { background: hsl(var(--nested) / .5); }
[data-dx-product="deploy"] .dp-item__id { flex: 0 0 auto; min-width: 9ch; font: 500 13px/1.4 var(--dx-font-mono); }
[data-dx-product="deploy"] code.dp-item__id { color: hsl(var(--text-strong)); }
[data-dx-product="deploy"] .dp-item .dx-badge { flex: 0 0 auto; }
[data-dx-product="deploy"] .dp-item__meta { min-width: 0; font: 400 11.5px/1.4 var(--dx-font-mono); color: hsl(var(--text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The phone-only pane switch. */
[data-dx-product="deploy"] .dp-paneswitch { display: none; }

/* Handoff: one hairline row under the ledger. */
[data-dx-product="deploy"] .dp-handoff .dx-handoff { border: 0; border-top: 1px solid hsl(var(--border-subtle)); border-radius: 0; background: transparent; }
[data-dx-product="deploy"] .dp-handoff .dx-handoff__col, [data-dx-product="deploy"] .dp-handoff .dx-handoff__self { padding: 10px 14px; }
[data-dx-product="deploy"] .dp-handoff .dx-handoff__self { background: transparent; }
[data-dx-product="deploy"] .dp-handoff .dx-handoff__list { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Sign-in and scoped-authorization dialogs: painted once by the kit
   (flux/defxn-product-kit/src/signing.css, in vendor/defxn/defxn-product.css). */
.result-banner {
  padding: 10px 12px; border-radius: var(--dx-radius-sm); font: 400 12.5px/1.5 var(--dx-font-mono); white-space: pre-wrap;
  background: hsl(var(--raised)); border: 1px solid hsl(var(--border-subtle)); border-left: 3px solid hsl(var(--reference-400)); color: hsl(var(--text));
}
.result-banner.ok { border-left-color: hsl(var(--success)); }
.result-banner.error { border-left-color: hsl(var(--danger)); color: hsl(var(--danger-700)); }
.auth-word-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 12px; border: 1px solid hsl(var(--border-default)); border-radius: var(--dx-radius-sm); background: hsl(var(--depth)); }
.auth-word-grid li { display: flex; align-items: baseline; gap: 6px; font: 13px/1.4 var(--dx-font-mono); }
.auth-word-grid li small { color: hsl(var(--text-faint)); min-width: 1.4em; }
.auth-word-grid li strong { color: hsl(var(--text-strong)); }


/* Serve (serve.html): the post-launch records of one launched chain. Type sits on the 11/18 steps. ----------- */
[data-dx-product="deploy"] .dp-signkey { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-dx-product="deploy"] .dp-signkey[hidden] { display: none; }
[data-dx-product="deploy"] .dp-record__next { margin: 0; font: 400 11px/1.5 var(--dx-font-mono); color: hsl(var(--text)); }
[data-dx-product="deploy"] .sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
[data-dx-product="deploy"] .sv-step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="deploy"] .sv-step:last-child { border-bottom: 0; }
[data-dx-product="deploy"] .sv-step__n { font: 500 11px/1 var(--dx-font-mono); color: hsl(var(--text-faint)); }
[data-dx-product="deploy"] .sv-step__name { font: 500 18px/1.2 var(--dx-font-sans); color: hsl(var(--text-muted)); }
[data-dx-product="deploy"] .sv-step.is-current .sv-step__name { color: hsl(var(--text-strong)); }
[data-dx-product="deploy"] .sv-step.is-current .sv-step__n { color: hsl(var(--primary)); }
[data-dx-product="deploy"] .sv-step__kind { font: 400 11px/1 var(--dx-font-mono); color: hsl(var(--text-faint)); }
[data-dx-product="deploy"] .sv-chain { display: flex; align-items: end; gap: 10px; }
[data-dx-product="deploy"] .sv-chain .dp-field { flex: 0 1 220px; }
[data-dx-product="deploy"] .sv-kinds { justify-self: start; flex-wrap: wrap; }
[data-dx-product="deploy"] .sv-kinds:empty, [data-dx-product="deploy"] #kindSummary:empty { display: none; }
[data-dx-product="deploy"] .sv-form:empty { display: none; }
[data-dx-product="deploy"] .sv-form > .sv-field--short { grid-column: auto; }
[data-dx-product="deploy"] .sv-form .dp-field[hidden] { display: none; }
[data-dx-product="deploy"] .sv-work {
  --dx-scroll-max: 7.5em; margin: 0; padding: 6px 12px 6px 28px; overflow: auto; max-height: var(--dx-scroll-max);
  font: 400 11px/1.5 var(--dx-font-mono); color: hsl(var(--text-muted)); border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius-sm); background: hsl(var(--depth));
}
[data-dx-product="deploy"] .sv-work[hidden] { display: none; }
[data-dx-product="deploy"] .sv-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
[data-dx-product="deploy"] #serveRefusal[hidden] { display: none; }
[data-dx-product="deploy"] .sv-onchain { background: transparent; }
[data-dx-product="deploy"] .sv-onchain .dp-items { margin: 0 -14px; }
[data-dx-product="deploy"] .sv-body { padding: 8px 4px; border-top: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="deploy"] .sv-body[hidden] { display: none; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  [data-dx-product="deploy"] .dp-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
  [data-dx-product="deploy"] .dp-bay { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: inputs, record and the ledger take turns on one screen. */
@media (max-width: 640px) {
  [data-dx-product="deploy"] .dp-console { padding-top: 16px; gap: 12px; }
  [data-dx-product="deploy"] .dp-head__lede { display: none; }
  /* Signed in, the console is the screen: the headline steps aside. */
  [data-dx-product="deploy"] body.dp-signed-in .dp-head__text { display: none; }
  [data-dx-product="deploy"] .dp-seqframe { padding: 12px; }
  [data-dx-product="deploy"] .dp-pane { padding: 14px; gap: 12px; }
  [data-dx-product="deploy"] .dp-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  [data-dx-product="deploy"] .dp-status > div { padding: 0; border-left: 0; }
  [data-dx-product="deploy"] .dp-item { flex-wrap: wrap; row-gap: 2px; }
  [data-dx-product="deploy"] .dp-item__meta { flex-basis: 100%; }
  [data-dx-product="deploy"] .dp-paneswitch { display: inline-flex; justify-self: start; }
  [data-dx-product="deploy"] .dp-console:not([data-pane="record"]) .dp-record,
  [data-dx-product="deploy"] .dp-console:not([data-pane="inputs"]) .dp-pane--inputs,
  [data-dx-product="deploy"] .dp-console:not([data-pane="ledger"]) .dp-ledger { display: none; }
  [data-dx-product="deploy"] .dp-form .dx-textarea { min-height: 64px; }
  [data-dx-product="deploy"] .dp-block { grid-template-columns: 28px minmax(0, 1fr); }
  [data-dx-product="deploy"] .dp-block__letter { grid-row: span 2; }
  [data-dx-product="deploy"] .dp-block__value { grid-column: 2; }
  [data-dx-product="deploy"] .dp-tape, [data-dx-product="deploy"] .dp-record__raw { --dx-scroll-max: 340px; }
  [data-dx-product="deploy"] .dp-record__note { display: none; }
  [data-dx-product="deploy"] .dp-scroll { --dx-scroll-max: 420px; }
  [data-dx-product="deploy"] .dp-handoff { display: none; }
  /* Signed in, the strip already reads out the signer key. */
  [data-dx-product="deploy"] body.dp-signed-in .dp-signer__status { display: none; }
  .admin-auth-backdrop { padding: 0; }
  .admin-auth-panel { height: 100vh; max-height: none; border-radius: 0; padding: 18px 16px; }
  .admin-auth-context { grid-template-columns: minmax(0, 1fr); }
  .auth-word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}