/* Website editor styles — for design.splashnodes.com (public/design/website-editor.js).

   The editor is the page itself (an iframe of the page in edit mode) with a
   bar above it and a settings panel beside it. On touch screens the panel
   becomes a bottom sheet. Styles for the editing layer *inside* the page
   live in website-editor.js (FRAME_CSS), so they never reach a published site.

   `.f`, `.why`, `.tbtn`, `.itemRow`, `.rowX`, `.galRow`, `.calcRow`,
   `.edThumb`, `.grpTitle`, `.addRow` and `.count` are used by the
   per-section settings forms (blockBody() in website-editor.js). */

.warn-color { color: #ffb02e; }
.err-color { color: #ff6b6b; }

/* ------------------------------------------------------------- layout */
.ve { display: flex; flex-direction: column; gap: 10px; }
.veBar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.veHint { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.veSeg { display: flex; background: #000; border: 1px solid var(--panel-border); border-radius: 8px; padding: 2px; }
.veSeg button {
  background: none; border: 0; color: var(--text-dim); padding: 5px 10px; border-radius: 6px;
  font-family: var(--font); font-size: 12.5px; cursor: pointer;
}
.veSeg button[aria-pressed="true"] { background: #ffffff1a; color: var(--white); }
.veAddBtn { border-color: var(--accent-dim); color: var(--accent); }

.veIns { position: relative; }
.veIns > summary {
  list-style: none; cursor: pointer; font-family: var(--font); font-size: 12.5px; padding: 6px 11px;
  border-radius: 6px; border: 1px solid var(--panel-border); background: #000; color: var(--white);
}
.veIns > summary::-webkit-details-marker { display: none; }
.veIns > summary::after { content: " ▾"; color: var(--text-dim); }
.veIns[open] > summary, .veIns > summary:hover { border-color: var(--accent-dim); }
.veInsList {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px;
  background: #0c0c0e; border: 1px solid var(--panel-border); border-radius: 10px; padding: 6px;
  display: grid; gap: 2px; box-shadow: 0 12px 30px #0009;
}
.veInsList button {
  text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer;
  color: var(--white); font-family: var(--font); font-size: 13px; display: grid; gap: 1px;
}
.veInsList button small { color: var(--text-dim); font-size: 11.5px; }
.veInsList button:hover { background: #ffffff12; }

.veMain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ve.hasPanel .veMain { grid-template-columns: minmax(0, 1fr) 340px; }
.veCanvas {
  background: #16161a; border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  padding: 14px; display: flex; justify-content: center;
}
.veDevice { width: 100%; transition: max-width .25s ease; }
.veDevice iframe {
  display: block; width: 100%; height: calc(100vh - 250px); min-height: 520px;
  border: 0; border-radius: 8px; background: #fff;
}

/* Settings panel beside the page */
.vePanel {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  padding: 16px 18px; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto;
}
.vePanelHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vePanelHead h3 { font-size: 15px; font-weight: 650; margin: 0; color: var(--heading); }
.veGrab { display: none; }
.veActs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.veActs button:disabled { opacity: .35; cursor: default; }
.veDanger:hover { border-color: #ff6b6b66 !important; color: #ff6b6b !important; }
.vePanel .galRow { grid-template-columns: 1fr; }
.vePanel .calcRow { grid-template-columns: 1fr 1fr; }
.vePanel .calcRow .f:first-child { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .ve.hasPanel .veMain { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ------------------------------------------- touch: tap + bottom sheet */
.ve.touch .veSeg { display: none; }
.ve.touch .veDevice iframe { height: calc(100dvh - 200px); min-height: 460px; }
.ve.touch .veCanvas { padding: 0; border: 0; background: none; }
.ve.touch.hasPanel .veMain { grid-template-columns: minmax(0, 1fr); }
.ve.touch .vePanel {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 72dvh;
  border-radius: 18px 18px 0 0; border-bottom: 0; padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px #000c; transition: transform .2s ease;
  animation: veSheetIn .2s ease;
}
.ve.touch .veGrab { display: block; width: 44px; height: 5px; border-radius: 3px; background: #ffffff33; margin: 6px auto 12px; touch-action: none; padding: 0; }
.ve.touch .vePanelHead { position: sticky; top: -6px; background: var(--panel); padding: 4px 0 8px; margin-bottom: 8px; z-index: 1; }
.ve.touch .tbtn, .ve.touch .btn-sm { min-height: 38px; padding: 8px 13px; font-size: 13.5px; }
.ve.touch .f input, .ve.touch .f select, .ve.touch .f textarea { font-size: 16px; } /* stops iOS zooming in */
@keyframes veSheetIn { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ve.touch .vePanel, .veDevice { animation: none; transition: none; } }

/* -------------------------------------------------------- settings forms */
.card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; }
.card h3 { font-size: 15px; font-weight: 650; margin: 0 0 14px; color: var(--heading); }
.empty { text-align: center; color: var(--text-dim); padding: 50px 20px; font-size: 15px; }

.f { margin-bottom: 14px; }
.f label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.f input, .f select, .f textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: #000; color: var(--white); font-family: var(--font); font-size: 14px;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--accent-dim); }
.count { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.count.warn { color: #ffb02e; }
.why { font-size: 12.5px; color: var(--text-faint); margin: 4px 0 0; }
.why.warn { color: #ffb02e; }

.bIn {
  width: 100%; border: 1px solid var(--panel-border); border-radius: 8px; background: #000; font-family: var(--font);
  color: var(--white); resize: vertical; padding: 10px 12px; line-height: 1.6; font-size: 14.5px;
}
.bIn:focus { outline: none; border-color: var(--accent-dim); }
.bIn.h { font-size: 17px; font-weight: 650; color: var(--heading); }

.itemRow { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.itemRow > div:first-child { flex: 1; margin-bottom: 0; }
.rowX {
  background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px;
  padding: 8px 6px; min-width: 34px; min-height: 34px; border-radius: 6px;
}
.rowX:hover { color: #ff6b6b; background: #ff6b6b14; }

.galRow, .calcRow {
  display: grid; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--panel-border);
  border-radius: 8px; margin-bottom: 9px; background: #000;
}
.galRow { grid-template-columns: 1fr 1fr auto; }
.calcRow { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
@media (max-width: 820px) { .galRow, .calcRow { grid-template-columns: 1fr; } }
.galRow .f, .calcRow .f { margin-bottom: 0; }

.edThumb { width: 100%; max-width: 200px; border-radius: 8px; margin-top: 8px; display: block; aspect-ratio: 4/3; object-fit: cover; }

/* --------------------------------------------------------- add a section */
.grpTitle { font-size: 11px; font-weight: 650; letter-spacing: .06em; color: var(--text-dim); margin: 16px 0 8px; text-transform: uppercase; }
.grpTitle:first-child { margin-top: 0; }
.addRow { display: flex; flex-wrap: wrap; gap: 8px; }
.addRow button {
  display: flex; align-items: center; gap: 6px; background: #000; border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text); cursor: pointer; font-family: var(--font);
}
.addRow button:hover { border-color: var(--accent-dim); color: var(--accent); }
.addRow button i { font-style: normal; color: var(--accent); }

/* --------------------------------------------------------------- misc */
.tbtn, .btn-sm {
  font-family: var(--font); font-size: 12.5px; padding: 6px 11px; border-radius: 6px;
  border: 1px solid var(--panel-border); background: #000; color: var(--white); cursor: pointer;
}
.tbtn:hover, .btn-sm:hover { border-color: var(--accent-dim); color: var(--accent); }