/* ═══════════════════════ Checklist Designer (Task 2) ═══════════════════════
   Block-based visual checklist designer. Scoped under .ckd- prefix so it
   never collides with the legacy row-builder's .ckl- styles. */

.ckd-scope { font-family: inherit; color: #111; }

/* ── Top bar ── */
.ckd-scope .ckd-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  background: #fff;
  border-bottom: 1.5px solid #d4d4d8;
  position: sticky;
  top: 0;
  z-index: 20;
}
.ckd-scope .ckd-topbar .ckd-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .7rem;
  font-weight: 600;
  color: #52525b;
}
.ckd-scope .ckd-topbar input,
.ckd-scope .ckd-topbar select {
  padding: .45rem .6rem;
  border-radius: 8px;
  font-size: .82rem;
  outline: none;
  box-sizing: border-box;
  background: #f9fafb;
  border: 1.5px solid #d4d4d8;
  color: #111;
  min-width: 160px;
}
.ckd-scope .ckd-topbar input:focus,
.ckd-scope .ckd-topbar select:focus {
  border-color: var(--brand);
}
.ckd-scope .ckd-topbar-spacer { flex: 1; }
.ckd-scope .ckd-topbar-actions { display: flex; gap: .5rem; align-items: flex-end; }

.ckd-scope .ckd-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  border-radius: 7px;
  padding: .5rem 1rem;
  cursor: pointer;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  color: #374151 !important;
}
.ckd-scope .ckd-btn:hover { background: #f4f4f5 !important; }
.ckd-scope .ckd-btn-primary {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}
.ckd-scope .ckd-btn-primary:hover { background: #2a2a2a !important; }
.ckd-scope .ckd-btn-accent {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
}
.ckd-scope .ckd-btn-accent:hover { background: var(--brand-dark) !important; }
.ckd-scope .ckd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Floating toast (top-center) — takes NO layout height, so the canvas keeps
   the full viewport (Draft saved / error notices float over the page). */
.ckd-scope .ckd-msg {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: .5rem .9rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.ckd-scope .ckd-msg-ok { background: #dcfce7; color: var(--ok-darker); }
.ckd-scope .ckd-msg-err { background: #fee2e2; color: #b91c1c; }
.ckd-scope .ckd-msg-notice { background: #fef9c3; color: #854d0e; }

/* ── 3-pane layout ── */
.ckd-scope .ckd-body {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Fixed height so each of the 3 columns scrolls INDEPENDENTLY (palette,
     canvas, properties) — like a normal editor. Tweak the offset if the
     top bar height changes. */
  height: calc(100vh - 150px);
  overflow: hidden;
}
/* Full-height variant: there is NO top bar (all controls live in the left
   sidebar), so only the app header/banner above the designer is subtracted
   — the canvas gets the maximum vertical space. */
.ckd-scope .ckd-body-full {
  height: calc(100vh - 118px);
}

/* Sidebar action buttons — compact 2-per-row grid at the top of the palette */
.ckd-scope .ckd-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin-bottom: .9rem;
}
.ckd-scope .ckd-side-actions .ckd-btn {
  justify-content: center;
  padding: .42rem .3rem;
  font-size: .72rem;
  white-space: nowrap;
}
.ckd-scope .ckd-side-actions .ckd-side-btn-wide { grid-column: 1 / -1; }

/* Sidebar identity line: checklist name + ✎ settings button */
.ckd-scope .ckd-side-name {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .9rem;
}
.ckd-scope .ckd-side-name-text {
  flex: 1;
  min-width: 0;
  font-size: .8rem;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ckd-scope .ckd-side-meta-btn {
  flex: 0 0 auto;
  padding: .3rem .5rem;
  font-size: .8rem;
}

/* Checklist meta fields (now inside the ✎ settings dialog) */
.ckd-scope .ckd-side-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .9rem;
}
.ckd-scope .ckd-side-meta label {
  font-size: .68rem;
  font-weight: 600;
  color: #52525b;
  margin-top: .3rem;
}
.ckd-scope .ckd-side-meta input[type="text"],
.ckd-scope .ckd-side-meta select {
  width: 100%;
  box-sizing: border-box;
  padding: .4rem .5rem;
  border-radius: 7px;
  font-size: .78rem;
  outline: none;
  background: #f9fafb;
  border: 1.5px solid #d4d4d8;
  color: #111;
}
.ckd-scope .ckd-side-meta input[type="text"]:focus,
.ckd-scope .ckd-side-meta select:focus { border-color: var(--brand); }
.ckd-scope .ckd-side-meta .ckd-field-checkbox-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  color: #374151;
  cursor: pointer;
}

/* Left palette — scrolls on its own so every block is always reachable */
.ckd-scope .ckd-palette {
  width: 200px;
  flex: 0 0 200px;
  background: #f9fafb;
  border-right: 1.5px solid #d4d4d8;
  padding: 1rem .75rem;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
.ckd-scope .ckd-palette-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #71717a;
  margin: 0 0 .6rem .1rem;
}
.ckd-scope .ckd-palette-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem .7rem;
  margin-bottom: .5rem;
  border-radius: 8px;
  border: 1.5px solid #d4d4d8 !important;
  background: #fff !important;
  color: #111 !important;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.ckd-scope .ckd-palette-item:hover {
  border-color: var(--brand) !important;
  background: #f4fff0 !important;
}
.ckd-scope .ckd-palette-item .ckd-pi-icon {
  font-size: 1rem;
  width: 1.3rem;
  text-align: center;
}

/* Center canvas work area — scrolls independently */
.ckd-scope .ckd-workarea {
  flex: 1;
  background: #e5e7eb;
  padding: 2rem 1rem;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ckd-scope .ckd-canvas {
  width: 794px;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 2px 18px rgba(0,0,0,.18);
  border-radius: 4px;
  /* Padding matches the preview sheet (renderer.js renderPagedHtml
     sheetStyle: padding:40px 44px) so design and preview are 1:1. */
  padding: 40px 44px;
  box-sizing: border-box;
  /* True A4 page (794x1123px @96dpi) — same fixed sheet size as the View
     preview (renderer.js renderPagedHtml), not "grow to content". The author
     designs directly on a true A4 sheet; .ckd-workarea scrolls for overflow. */
  min-height: 1123px;
  align-self: flex-start;
  /* Positioning context for free (absolutely-positioned) blocks — a block
     dragged by its grip anchors its left/top to this A4 page. */
  position: relative;
}
.ckd-scope .ckd-canvas-empty {
  color: #a1a1aa;
  text-align: center;
  padding: 3rem 1rem;
  font-size: .9rem;
  border: 1.5px dashed #d4d4d8;
  border-radius: 8px;
}

/* Right properties panel — scrolls on its own so all properties are reachable */
.ckd-scope .ckd-props {
  width: 260px;
  flex: 0 0 260px;
  background: #f9fafb;
  border-left: 1.5px solid #d4d4d8;
  padding: 1rem .9rem;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
.ckd-scope .ckd-props-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #71717a;
  margin: 0 0 .6rem .1rem;
}
.ckd-scope .ckd-props-empty {
  color: #a1a1aa;
  font-size: .82rem;
}
.ckd-scope .ckd-props-row {
  margin-bottom: .75rem;
}
.ckd-scope .ckd-props-row label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: #52525b;
  margin-bottom: .3rem;
}
.ckd-scope .ckd-props-row .ckd-prop-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ── Blocks on canvas ── */
/* Blocks flow as inline-block so a block whose width is < 100% lets the
   NEXT block sit beside it on the same row (Word-like side-by-side) — a
   full-width (default) block still takes its own row because 100% + any
   sibling overflows and wraps. The block markup is join('')-ed with no
   whitespace between siblings, so there is no inline-block whitespace gap.
   The fill/PDF renderers mirror this exactly (renderer.js) for 1:1 parity. */
.ckd-scope .ckd-block {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  box-sizing: border-box;
  /* WYSIWYG parity: NO wrapper padding/border — content must sit at exactly the
     same place as the preview/run (the .ckd-canvas 40px 44px sheet padding is
     the only inset, matching renderPagedHtml). Selection/hover use outline,
     which does not affect layout. Vertical margin matches the preview blocks
     (renderPdfBlock uses margin:6px 0), and since blocks are inline-block the
     margins don't collapse — so the gap between two blocks is 12px in both. */
  margin: 6px 0;
  padding: 0;
  border: none;
  cursor: pointer;
}
.ckd-scope .ckd-block:hover {
  outline: 1.5px solid #d4d4d8;
  outline-offset: 1px;
}
/* A block being free-dragged floats above the rest and gets a lift shadow. */
.ckd-scope .ckd-block.ckd-freemoving {
  z-index: 50;
  cursor: grabbing;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  opacity: .92;
}
/* Drop-position indicator: a thick green bar on the edge of the reference
   block where the dragged block will land (top/bottom for stacked moves,
   left/right for side-by-side). Set live during dragover, cleared on drop. */
.ckd-scope .ckd-block.ckd-drop-t { box-shadow: 0 -3px 0 0 var(--brand); }
.ckd-scope .ckd-block.ckd-drop-b { box-shadow: 0 3px 0 0 var(--brand); }
.ckd-scope .ckd-block.ckd-drop-l { box-shadow: -3px 0 0 0 var(--brand); }
.ckd-scope .ckd-block.ckd-drop-r { box-shadow: 3px 0 0 0 var(--brand); }
/* Drag grip in the block toolbar. */
.ckd-scope .ckd-block-toolbar .ckd-drag-grip {
  cursor: grab;
  /* Touch: dragging the grip must move the block, not scroll the page. */
  touch-action: none;
}
.ckd-scope .ckd-block-toolbar .ckd-drag-grip:active { cursor: grabbing; }
/* Touch: resize handles capture the drag instead of scrolling. */
.ckd-scope .ckd-block .ckd-resize-handle,
.ckd-scope .ckd-col-resize-handle { touch-action: none; }
/* On touch the ⠿ grip is bigger so it is easy to hit with a finger. */
@media (pointer: coarse) {
  .ckd-scope .ckd-block-toolbar .ckd-drag-grip { padding: 6px 10px; font-size: 18px; }
  .ckd-scope .ckd-block .ckd-resize-handle { width: 22px; height: 22px; }
}
/* Empty-container drop target highlight (append into an empty section/canvas). */
.ckd-scope .ckd-drop-into {
  outline: 2px dashed var(--brand);
  outline-offset: 2px;
}
.ckd-scope .ckd-block.ckd-selected {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: transparent;
}
.ckd-scope .ckd-block-toolbar {
  position: absolute;
  top: -1.6rem;
  right: 0;
  display: none;
  gap: .25rem;
  background: #111;
  border-radius: 6px;
  padding: .2rem .3rem;
  z-index: 5;
}
.ckd-scope .ckd-block.ckd-selected .ckd-block-toolbar,
.ckd-scope .ckd-block:hover > .ckd-block-toolbar { display: flex; }
.ckd-scope .ckd-block-toolbar button {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: .78rem;
  cursor: pointer;
  padding: .2rem .35rem;
  border-radius: 4px;
  line-height: 1;
}
.ckd-scope .ckd-block-toolbar button:hover { background: #333 !important; }

/* Right-edge drag-to-resize handle (Word-style block width resize).
   Only visible while its block is selected — mirrors the block toolbar's
   own show-on-select pattern. Sits just outside the block's right border
   so it doesn't overlap the contenteditable content. */
.ckd-scope .ckd-block .ckd-resize-handle {
  display: none;
  position: absolute;
  top: 0;
  right: -7px;
  width: 12px;
  height: 100%;
  cursor: ew-resize;
  z-index: 6;
}
.ckd-scope .ckd-block.ckd-selected .ckd-resize-handle { display: block; }
/* Image 2-way (corner) resize handle: bottom-right, diagonal cursor. */
.ckd-scope .ckd-block .ckd-resize-corner {
  top: auto; right: -7px; bottom: -7px;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background: var(--brand);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ckd-scope .ckd-block .ckd-resize-corner::after { content: none; }
.ckd-scope .ckd-block .ckd-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 4px;
  height: 34px;
  transform: translateY(-50%);
  background: var(--brand);
  border-radius: 2px;
  opacity: .8;
}
.ckd-scope .ckd-block .ckd-resize-handle:hover::after,
.ckd-scope .ckd-block .ckd-resize-handle.ckd-resizing::after {
  opacity: 1;
  background: var(--brand-dark);
}

/* Table column-border drag handle — sits on the right edge of each row-0
   cell (except the last column) and only renders when the table is
   selected (see renderBlockHtml). */
.ckd-scope .ckd-table td { position: relative; }
.ckd-scope .ckd-col-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
}
.ckd-scope .ckd-col-resize-handle:hover,
.ckd-scope .ckd-col-resize-handle:active {
  background: var(--brand-a30);
}

.ckd-scope .ckd-block-label {
  /* Overlay tag (like the toolbar) — absolute so it never adds height or pushes
     the block's content down; shown only on hover/selected. Keeps the canvas
     1:1 with the preview. */
  position: absolute;
  top: -1.05rem;
  left: 0;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #a1a1aa;
  background: #fff;
  padding: 0 4px;
  border-radius: 3px;
  display: none;
  pointer-events: none;
  z-index: 4;
}
.ckd-scope .ckd-block.ckd-selected > .ckd-block-label,
.ckd-scope .ckd-block:hover > .ckd-block-label { display: block; }

/* Page header/footer chrome on the design canvas: display-only (edited via
   the Header/Footer modal) — never intercepts canvas clicks or drags. */
.ckd-scope .ckl-page-header,
.ckd-scope .ckl-page-footer { pointer-events: none; }

/* Heading / text content-editable areas — ALL document metrics (fonts,
   margins, borders) come from checklist-doc.css via the shared doc classes
   (ckl-run-content-heading / ckl-run-content-text / ckl-run-divider) carried
   by the same elements; only editing affordances live here. */
.ckd-scope .ckd-heading-content {
  outline: none;
  min-height: 1.3em;
}
.ckd-scope .ckd-text-content {
  outline: none;
  min-height: 1.3em;
}
/* Page-break block — a distinct dashed rule with a centered label so the
   author can see exactly where the A4 PDF will start a fresh page. */
.ckd-scope .ckd-pagebreak-block { padding: .35rem 0; }
.ckd-scope .ckd-pagebreak-line {
  position: relative;
  text-align: center;
  border-top: 2px dashed #94a3b8;
  margin: .9rem 0 .4rem;
}
.ckd-scope .ckd-pagebreak-label {
  position: relative;
  top: -.75rem;
  display: inline-block;
  background: #fff;
  padding: 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #64748b;
  text-transform: uppercase;
}
/* Section box + title metrics come from checklist-doc.css
   (ckl-run-section-block / ckl-run-v2-section-title on the same elements). */
.ckd-scope .ckd-section-title {
  outline: none;
}
.ckd-scope .ckd-section-children {
  min-height: 40px;
}
.ckd-scope .ckd-section-children-empty {
  color: #a1a1aa;
  font-size: .8rem;
  padding: .5rem;
  text-align: center;
  border: 1px dashed #e4e4e7;
  border-radius: 6px;
}

/* Rich-text formatting toolbar (bold/italic/underline/size/color/fill/align)
   for a selected heading/text block — lives in the right Properties panel
   (renderProps), not on the canvas, so the canvas stays a clean 1:1 preview
   of the final sheet. Always visible when rendered — renderProps() only
   ever renders it when a heading/text block is selected. */
.ckd-scope .ckd-fmt-toolbar {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border: 1.5px solid #d4d4d8;
  border-radius: 8px;
  padding: .3rem .4rem;
  margin-bottom: .35rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  flex-wrap: wrap;
}
.ckd-scope .ckd-fmt-toolbar button {
  background: #f9fafb !important;
  border: 1px solid #d4d4d8 !important;
  color: #111 !important;
  border-radius: 5px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ckd-scope .ckd-fmt-toolbar button:hover,
.ckd-scope .ckd-fmt-toolbar button.ckd-fmt-active {
  border-color: var(--brand) !important;
  background: #f4fff0 !important;
  color: var(--brand-darker) !important;
}
.ckd-scope .ckd-fmt-toolbar select,
.ckd-scope .ckd-fmt-toolbar input[type="color"] {
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  height: 26px;
  font-size: .75rem;
  background: #f9fafb;
}
.ckd-scope .ckd-fmt-toolbar select[data-fmt="fontSize"] {
  min-width: 66px;
  padding: 0 .25rem;
}
.ckd-scope .ckd-fmt-toolbar input[type="color"] {
  width: 28px;
  padding: 1px;
  cursor: pointer;
}
/* Fill/background-color swatch — same control family as the text-color
   swatch, grouped with its own "remove fill" (✕) button which only shows
   once a fill is actually set (see applyBgColor/clearBgColor in designer.js). */
.ckd-scope .ckd-fmt-bg-group {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding-left: .3rem;
  border-left: 1px solid #e4e4e7;
  margin-left: .1rem;
}
.ckd-scope .ckd-fmt-bg-group input[type="color"] {
  width: 28px;
  padding: 1px;
  cursor: pointer;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  height: 26px;
  background: #f9fafb;
}
.ckd-scope .ckd-fmt-bg-group button {
  background: #fff !important;
  border: 1px solid #d4d4d8 !important;
  color: #9ca3af !important;
  border-radius: 5px;
  width: 20px;
  height: 26px;
  cursor: pointer;
  font-size: .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ckd-scope .ckd-fmt-bg-group button:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

/* ── Table block ── table/cell metrics + borders come from checklist-doc.css
   (.ckl-run-table on the same <table>) + the shared cellStyle() inline
   styles; only editing affordances live here. */
.ckd-scope .ckd-table td {
  min-width: 60px;
  cursor: text;
}
.ckd-scope .ckd-cell-content {
  outline: none;
  min-height: 1.3em;
}
.ckd-scope .ckd-table td.ckd-cell-selected {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px var(--brand);
  position: relative;
  z-index: 1;
}

/* Table structure / cell-format controls in the Properties panel */
.ckd-scope .ckd-props-row input[type="color"] {
  width: 40px;
  height: 30px;
  padding: 2px;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  cursor: pointer;
  background: #f9fafb;
}
.ckd-scope .ckd-btn.ckd-fmt-active {
  border-color: var(--brand) !important;
  background: #f4fff0 !important;
  color: var(--brand-darker) !important;
}

@media (max-width: 1100px) {
  .ckd-scope .ckd-palette,
  .ckd-scope .ckd-props { width: 170px; flex-basis: 170px; }
  .ckd-scope .ckd-canvas { padding: 1.5rem; }
}

/* ── Fields (Task 4) ── */
.ckd-scope .ckd-palette-title:not(:first-child) { margin-top: 1.25rem; }

/* Field blocks have NO card chrome on the canvas — the field must sit on the
   sheet exactly as it does in the preview/run (selection uses the outline). */
.ckd-scope .ckd-field-block {
  border: none;
  background: transparent;
}

.ckd-scope .ckd-field-label-row {
  font-size: .9rem;
  font-weight: 600;
  color: #111;
  margin-bottom: .35rem;
}
.ckd-scope .ckd-field-required {
  color: #dc2626;
  margin-left: .2rem;
  font-weight: 700;
}
.ckd-scope .ckd-field-input-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}
.ckd-scope .ckd-field-input {
  padding: .4rem .55rem;
  border-radius: 6px;
  border: 1.5px solid #d4d4d8;
  background: #f4f4f5;
  color: #52525b;
  font-size: .85rem;
  max-width: 220px;
}
.ckd-scope .ckd-field-unit {
  font-size: .8rem;
  color: #71717a;
  font-weight: 600;
}
.ckd-scope .ckd-field-pills {
  display: flex;
  gap: .4rem;
}
.ckd-scope .ckd-pill {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  border: 1.5px solid #d4d4d8;
  color: #52525b;
  background: #fff;
}
.ckd-scope .ckd-pill-ok { border-color: var(--ok-soft); color: var(--ok-darker); }
.ckd-scope .ckd-pill-notok { border-color: #fca5a5; color: #b91c1c; }
.ckd-scope .ckd-pill-na { border-color: #d4d4d8; color: #71717a; }
.ckd-scope .ckd-field-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: #52525b;
}
.ckd-scope .ckd-field-dataname {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  color: #71717a;
  background: #f0f0f1;
  border-radius: 4px;
  padding: .1rem .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* In-cell field preview */
.ckd-scope .ckd-cell-field {
  margin-top: 0;
}
/* Gap between cell text and a field only when text is actually present. */
.ckd-scope .ckd-cell-content + .ckd-cell-field {
  margin-top: .25rem;
}

/* Compact field preview — matches the fill/PDF preview so the designer is 1:1.
 * inline-flex (not flex) so the field group honours the cell/block text-align
 * (a flex block would ignore text-align and stay left). */
.ckd-scope .ckd-fp {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  font-size: .82rem;
  color: #1a2e1a;
}
.ckd-scope .ckd-fp-label { font-weight: 600; color: #111; }
.ckd-scope .ckd-fp-meta { font-size: .78rem; color: #9ca3af; }
.ckd-scope .ckd-fp-remark { border-bottom: 1px dashed #cbd5e1; }
.ckd-scope .ckd-fp-input { display: inline-flex; align-items: baseline; gap: .1rem .7rem; flex-wrap: wrap; }
.ckd-scope .ckd-fp-box {
  font-size: .82rem;
  color: #333;
  white-space: nowrap;
}
.ckd-scope .ckd-fp-line {
  display: inline-block;
  min-width: 90px;
  border-bottom: 1px solid #999;
  height: .95em;
}
.ckd-scope .ckd-fp-line-wide { min-width: 150px; }
.ckd-scope .ckd-fp-sig {
  display: inline-block;
  min-width: 180px;
  height: 44px;
  line-height: 44px;
  padding: 0 .6rem;
  border: 1px dashed #b4b4bb;
  border-radius: 5px;
  color: #9ca3af;
  font-size: .82rem;
  background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f3f4f6 8px, #f3f4f6 16px);
}
.ckd-scope .ckd-field-key {
  font-size: .62rem;
  color: #a1a1aa;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  align-self: center;
}
.ckd-scope .ckd-cell-field .ckd-field-input { max-width: 140px; font-size: .78rem; padding: .25rem .4rem; }
.ckd-scope .ckd-cell-field .ckd-pill { padding: .18rem .45rem; font-size: .68rem; }
.ckd-scope .ckd-cell-field .ckd-field-dataname { font-size: .62rem; }

/* Field properties panel rows */
.ckd-scope .ckd-field-prop-input,
.ckd-scope .ckd-props-row select {
  width: 100%;
  padding: .45rem .6rem;
  border-radius: 7px;
  font-size: .82rem;
  outline: none;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #d4d4d8;
  color: #111;
}
.ckd-scope .ckd-field-prop-input:focus,
.ckd-scope .ckd-props-row select:focus { border-color: var(--brand); }
.ckd-scope .ckd-field-checkbox-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: #52525b;
  cursor: pointer;
}
.ckd-scope .ckd-field-dataname-err {
  color: #b91c1c;
  font-size: .72rem;
  font-weight: 600;
  margin-top: .3rem;
}

/* ── Image block ── */
.ckd-scope .ckd-image-block img { display: block; border-radius: 4px; }
.ckd-scope .ckd-image-placeholder {
  color: #a1a1aa;
  text-align: center;
  padding: 2rem 1rem;
  font-size: .85rem;
  border: 1.5px dashed #d4d4d8;
  border-radius: 8px;
  background: #fafafa;
}
.ckd-scope .ckd-props-row input[type="file"] {
  width: 100%;
  font-size: .78rem;
  color: #52525b;
}
.ckd-scope .ckd-image-upload-msg {
  font-size: .72rem;
  font-weight: 600;
  margin-top: .3rem;
}

/* ── Preview modal (Task 2 extra) ──────────────────────────────────────
   Read-only "how the checklist looks" overlay opened from the designer top
   bar's Preview button. Mirrors the existing template View modal pattern
   (index.html ckShowViewModal) — fixed full-screen overlay, white panel,
   sticky header with a Close button, click-outside + Esc to close. Built
   inline here (not in index.html) since this file is scoped to designer.js. */
.ckd-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow: auto;
  box-sizing: border-box;
}
.ckd-preview-panel {
  background: #fff;
  max-width: 900px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  overflow: hidden;
}
.ckd-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.ckd-preview-header strong { font-size: 15px; color: #111; }
.ckd-preview-close {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
}
.ckd-preview-close:hover { background: #2a2a2a !important; }
.ckd-preview-body {
  max-height: 80vh;
  overflow: auto;
  background: #e5e7eb;
}