/* admin/builder.css — page builder UI (admin only, never on the public site) */

/* sortable rows: sections, blocks, list items */
.ed-sortable { display: flex; flex-direction: column; gap: .6rem; }
.ed-sort-item { border: 1px solid var(--hairline); border-radius: 12px; background: var(--white); }
.ed-sort-item.open { border-color: var(--ink); }
.ed-sort-item.dragging { opacity: .45; }
.ed-sort-item.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.ed-sort-item.drop-after { box-shadow: 0 3px 0 var(--accent); }
.ed-sort-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; }
.ed-handle { cursor: grab; color: var(--steel); font-weight: 800; letter-spacing: -2px; padding: .2rem .35rem; border-radius: 6px; user-select: none; }
.ed-handle:hover { background: var(--mist); color: var(--ink); }
.ed-sort-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .6rem; background: none; border: 0; text-align: left; cursor: pointer; padding: .3rem 0; font: inherit; color: var(--ink); }
.ed-sort-kind { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); flex: none; }
.ed-sort-sum { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-badge { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; background: var(--mist); color: var(--steel); border-radius: 999px; padding: .15rem .5rem; flex: none; }
.ed-sort-tools { display: flex; gap: .7rem; align-items: baseline; flex: none; }
.ed-sort-tools .ed-link:disabled { opacity: .3; cursor: default; }
.ed-sort-body { padding: .2rem 1.1rem 1.2rem; border-top: 1px solid var(--hairline); }
.ed-sort-body .ed-sortable { margin-top: .3rem; }
.ed-sort-body .ed-sort-item { background: #fbfcfd; }
.ed-add { align-self: flex-start; margin-top: .2rem; }

/* groups */
details.ed-group { margin-top: 1.1rem; border: 1px dashed var(--hairline); border-radius: 10px; padding: .6rem .9rem; }
details.ed-group > summary { cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--steel); }
details.ed-group[open] > summary { margin-bottom: .2rem; }
.ed-row-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* pickers */
.ed-add-section { margin-top: .4rem; }
.ed-type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .8rem; }
.ed-type { display: flex; flex-direction: column; gap: .25rem; text-align: left; border: 1px solid var(--hairline); border-radius: 10px; background: var(--white); padding: .8rem .9rem; cursor: pointer; font: inherit; color: var(--ink); }
.ed-type:hover { border-color: var(--ink); }
.ed-type span { color: var(--steel); font-size: .85rem; line-height: 1.45; }
.ed-add-block { margin-top: .5rem; }
.ed-add-block .ed-label { margin-top: .3rem; }
.ed-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.ed-chip { border: 1px solid var(--hairline); background: var(--white); border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.ed-chip:hover { border-color: var(--ink); }

/* formatted text editor */
.ed-rich-wrap { border: 1px solid var(--hairline); border-radius: 10px; background: var(--white); }
.ed-rich-wrap:focus-within { outline: 2px solid var(--ink); border-color: var(--ink); }
.ed-rich-bar { display: flex; flex-wrap: wrap; gap: .2rem; padding: .35rem; border-bottom: 1px solid var(--hairline); background: #fbfcfd; border-radius: 10px 10px 0 0; }
.ed-rich-btn { border: 0; background: none; font: inherit; font-size: .82rem; padding: .3rem .55rem; border-radius: 6px; cursor: pointer; color: var(--ink); }
.ed-rich-btn:hover { background: var(--mist); }
.ed-rich { min-height: 6rem; padding: .8rem 1rem; line-height: 1.6; outline: none; }
.ed-rich > * + * { margin-top: .6rem; }
.ed-rich h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 800; }
.ed-rich ul, .ed-rich ol { padding-left: 1.3rem; }
.ed-rich blockquote { border-left: 3px solid var(--ink); padding-left: .9rem; font-style: italic; }
.ed-rich a { color: var(--steel); font-weight: 600; }

/* picture field */
.ed-img-field .ed-photo-preview { display: block; margin: 0 0 .5rem; max-height: 180px; object-fit: contain; }
.ed-img-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; font-size: .88rem; }

/* live preview, side by side on wide screens */
#ed-preview { position: fixed; top: 0; right: 0; bottom: 0; width: 50vw; z-index: 60; display: flex; flex-direction: column; background: var(--white); border-left: 1px solid var(--hairline); box-shadow: -10px 0 30px rgba(20,30,45,.08); }
#ed-preview[hidden] { display: none; }
.ed-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--hairline); font-size: .85rem; color: var(--steel); background: #fff8e6; }
#ed-preview iframe { flex: 1; width: 100%; border: 0; }
body.ed-preview-on .ed-wrap { margin-left: 0; max-width: 50vw; }
@media (max-width: 1100px) {
  #ed-preview { width: 100vw; }
  body.ed-preview-on .ed-wrap { max-width: 820px; }
}

/* ordered picker (Home: Cards shown) */
.ed-picks { display: grid; gap: .5rem; }
.ed-picks-list { list-style: none; margin: .2rem 0 .3rem; padding: 0; display: grid; gap: .35rem; }
.ed-picks-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.ed-picks-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ed-picks-err { border: 1px solid #b3261e; color: #b3261e; border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; }

/* Off the clock: mini blog inside a fun card (thread 6) */
.ed-oc-blog { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); display: grid; }
.ed-oc-blog > h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.ed-oc-blog .ed-sortable { margin-top: .4rem; }
.ed-oc-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 .5rem; }
.ed-oc-thumb { display: grid; gap: .2rem; justify-items: center; }
.ed-oc-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hairline); display: block; }
.ed-oc-thumb > div { display: flex; gap: .45rem; }
.ed-oc-thumb .ed-link:disabled { opacity: .3; cursor: default; }