/* Phase 5.6 SMART Element Fidelity Layer */
.eb56-color-control{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center}
.eb56-color-control input[type=color]{width:56px;height:42px;padding:3px;cursor:pointer}
.eb56-color-control input[type=text]{width:100%}
.eb56-fidelity-note{margin-bottom:12px}

/* Shared brand variables inside Canvas. */
.builder-render-preview{
  color:var(--el-text,#1f2937);
  background:var(--el-bg,transparent);
  border-color:var(--el-border,#dbe3ea);
}
.builder-render-preview .canvas-button{background:var(--el-accent,#f28c28);border-color:var(--el-accent,#f28c28)}

/* Image + Text: the server, Canvas and public renderer all use image-side-left/right. */
.canvas-image-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
.canvas-image-text>img,.canvas-image-text>.canvas-media-empty{grid-column:1}
.canvas-image-text>div:last-child{grid-column:2}
.canvas-image-text.image-side-right>img,
.canvas-image-text.image-side-right>.canvas-media-empty{grid-column:2;grid-row:1}
.canvas-image-text.image-side-right>div:last-child{grid-column:1;grid-row:1}
.canvas-image-text img{width:100%;max-height:250px;object-fit:cover;border-radius:12px}

/* Steps */
.eb56-steps{
  --step-accent:#16324f;--step-ring:#f28c28;--step-line:#9fb0bf;--step-text:#1f2937;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:12px 0 4px;color:var(--step-text)
}
.eb56-step{min-width:0;text-align:center;padding:6px 10px 14px}
.eb56-step-track{display:flex;align-items:center;width:calc(100% + 20px);margin-left:-10px}
.eb56-step-circle{
  position:relative;z-index:2;display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;margin:0 auto;
  border-radius:50%;background:var(--step-accent);color:#fff;font-weight:800;box-shadow:0 0 0 0 color-mix(in srgb,var(--step-ring) 45%,transparent);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease
}
.eb56-step:hover .eb56-step-circle,.eb56-step:focus-within .eb56-step-circle{
  transform:translateY(-2px) scale(1.06);
  background:var(--step-ring);
  animation:eb56-ring 1.15s ease-in-out infinite
}
.eb56-step-connector{
  height:4px;flex:1;margin:0 -1px;background:
  linear-gradient(90deg,var(--step-line) 0 45%,transparent 45% 55%,var(--step-line) 55% 100%);
  background-size:24px 4px;border-radius:4px;opacity:.9;animation:eb56-flow 2.2s linear infinite
}
.eb56-step:last-child .eb56-step-connector{visibility:hidden}
.eb56-step-copy{padding-top:11px}
.eb56-step-copy strong{display:block;font-size:1rem;line-height:1.25}
.eb56-step-copy small{display:block;margin:6px auto 0;max-width:220px;font-size:.84rem;line-height:1.45;color:inherit;opacity:.82}
@keyframes eb56-ring{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--step-ring) 42%,transparent)}
  50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--step-ring) 0%,transparent)}
}
@keyframes eb56-flow{0%,100%{background-position:0 0;opacity:.95}50%{opacity:.34}100%{background-position:24px 0;opacity:.95}}

/* Timeline */
.eb56-timeline{
  --tl-accent:#f28c28;--tl-line:#b8c4cf;--tl-marker:#16324f;--tl-text:#1f2937;
  position:relative;display:grid;gap:18px;margin:10px 0;color:var(--tl-text)
}
.eb56-timeline:before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  background:linear-gradient(var(--tl-line),var(--tl-accent),var(--tl-line));background-size:100% 180%;animation:eb56-timeline-flow 3.5s ease-in-out infinite
}
.eb56-timeline-item{position:relative;width:50%;display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:14px;align-items:start;padding-right:0}
.eb56-timeline-item:nth-child(even){margin-left:50%;grid-template-columns:52px minmax(0,1fr)}
.eb56-timeline-item:nth-child(even) .eb56-timeline-marker{grid-column:1}
.eb56-timeline-item:nth-child(even) .eb56-timeline-copy{grid-column:2;text-align:left}
.eb56-timeline-item:nth-child(odd) .eb56-timeline-copy{grid-column:1;text-align:right}
.eb56-timeline-item:nth-child(odd) .eb56-timeline-marker{grid-column:2}
.eb56-timeline-marker{position:relative;z-index:2;display:flex;justify-content:center}
.eb56-timeline-marker span{
  min-width:42px;height:42px;padding:0 8px;border-radius:999px;display:grid;place-items:center;
  background:var(--tl-marker);color:#fff;font-weight:800;font-size:.78rem;border:3px solid #fff;
  box-shadow:0 0 0 2px var(--tl-line);transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}
.eb56-timeline-item:hover .eb56-timeline-marker span{
  transform:scale(1.08);background:var(--tl-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--tl-accent) 22%,transparent)
}
.eb56-timeline-copy{padding:7px 12px 12px}
.eb56-timeline-copy strong{display:block;font-size:1rem}
.eb56-timeline-copy small{display:block;margin-top:5px;line-height:1.45;opacity:.82}
@keyframes eb56-timeline-flow{0%,100%{background-position:0 0}50%{background-position:0 100%}}

@media(max-width:760px){
  .canvas-image-text,.canvas-image-text.image-side-right{grid-template-columns:1fr}
  .canvas-image-text>img,.canvas-image-text>.canvas-media-empty,
  .canvas-image-text.image-side-right>img,.canvas-image-text.image-side-right>.canvas-media-empty{grid-column:1;grid-row:1}
  .canvas-image-text>div:last-child,.canvas-image-text.image-side-right>div:last-child{grid-column:1;grid-row:2}
  .eb56-steps{grid-template-columns:1fr;gap:0}
  .eb56-step{text-align:left;display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;padding:7px 2px}
  .eb56-step-track{display:block;position:relative;width:48px;margin:0}
  .eb56-step-connector{position:absolute;display:block;width:4px;height:calc(100% + 36px);left:22px;top:48px;margin:0;background:linear-gradient(var(--step-line) 0 45%,transparent 45% 55%,var(--step-line) 55%);background-size:4px 24px;animation:eb56-flow-v 2.2s linear infinite}
  .eb56-step-copy{padding-top:4px}
  .eb56-step-copy small{margin-left:0;max-width:none}
  .eb56-step:last-child .eb56-step-connector{display:none}
  @keyframes eb56-flow-v{0%,100%{background-position:0 0;opacity:.95}50%{opacity:.34}100%{background-position:0 24px;opacity:.95}}
  .eb56-timeline:before{left:22px;transform:none}
  .eb56-timeline-item,.eb56-timeline-item:nth-child(even){width:100%;margin-left:0;grid-template-columns:52px minmax(0,1fr)}
  .eb56-timeline-item:nth-child(odd) .eb56-timeline-marker,
  .eb56-timeline-item:nth-child(even) .eb56-timeline-marker{grid-column:1}
  .eb56-timeline-item:nth-child(odd) .eb56-timeline-copy,
  .eb56-timeline-item:nth-child(even) .eb56-timeline-copy{grid-column:2;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .eb56-step-circle,.eb56-step-connector,.eb56-timeline:before,.eb56-timeline-marker span{animation:none!important;transition:none!important}
}

/* Public renderer parity */
.smart-element-shell{color:var(--el-text,#1f2937);background:var(--el-bg,transparent);border-color:var(--el-border,#dbe3ea)}
.smart-element-shell .btn-primary{background:var(--el-accent,#f28c28);border-color:var(--el-accent,#f28c28)}
.smart-element-shell .text-link{color:var(--el-accent,#f28c28)}
.smart-element-shell .smart-card-element,.smart-element-shell .smart-item-card{border-color:var(--el-border,#dbe3ea)}
.smart-image-text.image-side-right>div:first-child{order:2}
.smart-image-text.image-side-right>div:last-child{order:1}
@media(max-width:800px){
  .smart-image-text.image-side-right>div:first-child{order:1}
  .smart-image-text.image-side-right>div:last-child{order:2}
}

/* Phase 5.6.1 — Element lifecycle: Delete + Replace */
.lifecycle-replace-btn{font-weight:700}
.lifecycle-delete-btn{color:#9f1c1c;border-color:rgba(159,28,28,.30)}
.lifecycle-inline-delete{display:inline-flex;margin:0}
.builder-replace-banner{
  position:fixed;left:50%;bottom:24px;z-index:9000;transform:translateX(-50%);
  width:min(680px,calc(100vw - 32px));padding:14px 16px;border-radius:14px;
  background:#132033;color:#fff;box-shadow:0 18px 48px rgba(15,23,42,.28);
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center
}
.builder-replace-banner[hidden]{display:none!important}
.builder-replace-banner>div:nth-child(2){font-size:13px;opacity:.84}
.builder-replace-banner .mini-btn{grid-column:2;grid-row:1 / span 2;background:#fff;color:#132033}
.builder-element{position:relative}
.builder-element.is-replace-drop-target{
  outline:3px solid #2563eb;outline-offset:4px;box-shadow:0 0 0 7px rgba(37,99,235,.13)
}
.builder-element.is-replace-drop-target::after{
  content:"Replace this element";position:absolute;inset:12px;z-index:25;border:2px dashed #2563eb;
  border-radius:12px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  color:#1748a5;font-weight:800;font-size:15px;pointer-events:none
}
.builder-replace-mode .element-definition-card .palette-item small::after{content:" · choose to replace";font-weight:700}
@media(max-width:700px){
  .builder-replace-banner{bottom:12px;grid-template-columns:1fr;padding:13px}
  .builder-replace-banner .mini-btn{grid-column:1;grid-row:auto;width:100%;margin-top:8px}
  .element-actions{gap:5px;flex-wrap:wrap}
}