/* ==========================================================================
   ChefQuote — text editor chrome
   Only ever visible when the page is opened with ?edit=owner and owner access
   is granted (editor.js gates
   it). Nothing here renders for a visitor.
   ========================================================================== */

.cq-editbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2147483600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 34px rgba(20, 20, 20, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  max-width: calc(100% - 20px);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.cq-editbar button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  color: #141414;
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 13px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.cq-editbar button:active { transform: translateY(1px); }

.cq-edit-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: #c7cdd2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* Editable regions: visible but not distracting */
[data-cq-editing] [data-cq-editable] {
  outline: 1px dashed rgba(20, 20, 20, 0.28);
  outline-offset: 2px;
  border-radius: 3px;
  cursor: text;
}

[data-cq-editing] [data-cq-editable]:hover {
  outline-color: rgba(20, 20, 20, 0.6);
  background: rgba(20, 20, 20, 0.04);
}

[data-cq-editing] [data-cq-editable]:focus {
  outline: 2px solid #1d1d1d;
  outline-offset: 2px;
  background: #fff;
}

@media (max-width: 620px) {
  .cq-editbar { left: 10px; right: 10px; transform: none; justify-content: space-between; }
  .cq-edit-status { max-width: 34vw; }
}

.cq-edit-status[data-bad="1"],
.cq-panel-status[data-bad="1"] { color: #ffaaa3; }

.cq-page-panel {
  position: fixed;
  inset: 12px 12px 12px auto;
  z-index: 2147483599;
  width: min(440px, calc(100vw - 24px));
  background: #f7f7f3;
  color: #161614;
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.cq-page-panel[hidden] { display: none; }

.cq-panel-head {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  background: #181816;
  color: #fff;
}

.cq-panel-head small,
.cq-panel-head strong { display: block; }
.cq-panel-head small { color: rgba(255,255,255,.55); font-size: .63rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.cq-panel-head strong { margin-top: 2px; font-size: 1.05rem; }
.cq-panel-head button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }

.cq-panel-scroll { height: calc(100% - 70px); overflow-y: auto; padding: 0 17px 100px; }
.cq-page-panel section { padding: 21px 0; border-bottom: 1px solid rgba(0,0,0,.15); }
.cq-page-panel section h2 { margin: 0 0 13px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.cq-page-panel label { display: grid; gap: 5px; margin-top: 10px; color: #5c5b55; font-size: .72rem; font-weight: 800; }
.cq-page-panel input,
.cq-page-panel textarea,
.cq-page-panel select { width: 100%; min-height: 41px; padding: 9px 10px; border: 1px solid rgba(0,0,0,.24); border-radius: 0; background: #fff; color: #161614; font: inherit; font-size: .8rem; }
.cq-page-panel textarea { min-height: 76px; resize: vertical; }
.cq-page-panel button[data-cq-panel]:not([data-cq-panel="close"]) { min-height: 40px; margin-top: 12px; padding: 8px 12px; border: 0; background: #181816; color: #fff; font: inherit; font-size: .76rem; font-weight: 850; cursor: pointer; }
.cq-page-panel .cq-check { display: flex; align-items: center; grid-template-columns: auto 1fr; }
.cq-page-panel .cq-check input { width: 18px; min-height: 18px; margin: 0; }
.cq-save-section p { color: #68675f; font-size: .72rem; line-height: 1.5; }
.cq-save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cq-panel-status { min-height: 34px; padding: 12px 0; color: #4f5f53; font-size: .75rem; font-weight: 750; }

[data-cq-editing] [data-cq-editable] { outline-color: rgba(105,168,255,.72); }
[data-cq-editing] .home-hero [data-cq-editable],
[data-cq-editing] .loop-section [data-cq-editable],
[data-cq-editing] .closing-section [data-cq-editable],
[data-cq-editing] .home-footer [data-cq-editable] { outline-color: rgba(255,255,255,.65); }

@media(max-width:620px) {
  .cq-page-panel { inset: 8px; width: auto; }
  .cq-editbar { overflow-x: auto; }
  .cq-save-actions { grid-template-columns: 1fr; }
}