/* Config screen (step 5). Site chrome, separate from the editor stylesheet. */
#continue-btn { margin-top: auto; box-shadow: inset 0 0 0 1.6px var(--ink); font-weight: 700; }
#config-root { flex: 1; min-width: 0; padding: 24px clamp(16px, 3vw, 40px) 40px; }
#config-root[hidden], #editor-root[hidden] { display: none; }
/* Opaque surface the clouds pass behind: positioned above .ed-sky (z-index 0), below .side (20). Step 35. */
.cfg-card { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; background: #f6f9fb; border: 1.5px solid var(--line); border-radius: 18px; padding: 24px; }
.cfg-card h1 { margin: 0 0 14px; font-size: 24px; }
.cfg-preview { display: block; width: 100%; height: 160px; background: #fff; border: 1.4px solid var(--line); border-radius: 12px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.cfg-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.cfg-grid input, .cfg-grid select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.4px solid var(--line); border-radius: 10px; background: #fff; }
.cfg-read { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.cfg-read div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #c4ccd6; padding: 4px 0; }
.cfg-read dt { font-size: 13px; }
.cfg-read dd { margin: 0; font-weight: 700; }
.cfg-err { min-height: 1.3em; color: var(--down); font-size: 13px; margin: 10px 0 0; }
.cfg-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; }
.cfg-actions .btn { box-shadow: inset 0 0 0 1.6px var(--ink); }
.cfg-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
#cfg-json-wrap pre { margin: 14px 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all; background: #fff; border: 1.4px solid var(--line); border-radius: 10px; padding: 10px; font-size: 11px; }
@media (max-width: 820px) {
  .cfg-grid, .cfg-read { grid-template-columns: 1fr; }
  #config-root { padding-bottom: 90px; }
}
#continue-btn + .side-foot { margin-top: 0; }
/* Launch status (step 27). */
.cfg-status { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; background: #fff; border: 1.4px solid var(--line); border-radius: 10px; font-size: 13px; }
.cfg-status[hidden], .cfg-spinner[hidden] { display: none; }
.cfg-status.is-error { color: var(--down); border-color: var(--down); }
.cfg-status.is-done { font-weight: 700; }
.cfg-status.is-info { font-weight: 700; }
.cfg-spinner { flex: none; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: cfg-spin .8s linear infinite; }
@keyframes cfg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cfg-spinner { animation-duration: 2.4s; } }
/* Coin form (step 30). */
.cfg-wide { grid-column: 1 / -1; }
.cfg-grid textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.4px solid var(--line); border-radius: 10px; background: #fff; resize: vertical; }
.cfg-tax { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; }
.cfg-tax input { width: 100%; accent-color: var(--ink); }
.cfg-tax output { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.cfg-logo { margin: 0 0 16px; }
.cfg-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.cfg-logo-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cfg-logo-slot { flex: none; width: 120px; height: 120px; border: 1.4px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.cfg-logo-slot svg, .cfg-logo-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cfg-logo-slot img[hidden], .cfg-logo-slot svg[hidden] { display: none; }
.cfg-logo-ctl { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; font-size: 13px; }
.cfg-logo-ctl input[type=file] { max-width: 100%; }
.cfg-logo-ctl .btn[hidden] { display: none; }
.cfg-hint { color: #5b6168; }
.cfg-colors { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cfg-colors label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #44484e; }
.cfg-colors input[type=color] { width: 30px; height: 26px; padding: 0; border: 1.4px solid var(--line, #2b2d31); border-radius: 6px; background: none; cursor: pointer; }
.cfg-fx { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #44484e; }
.cfg-fx select { font: inherit; font-size: 13px; border: 1.4px solid var(--line, #2b2d31); border-radius: 8px; padding: 3px 8px; }
.cfg-field-err { min-height: 1.1em; margin: 0; color: var(--down); font-size: 12px; font-weight: 400; }
.cfg-socials { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 820px) { .cfg-socials { grid-template-columns: 1fr; } }
/* step 70: the editor as an optional link on the form, after an agent pick */
.cfg-tweak { display: inline-block; margin: -4px 0 10px; font-size: 14px; color: #44484e; }
.cfg-tweak[hidden] { display: none; }
html.agent-pick #editor-root { visibility: hidden; }