/* M11 — "Edit site" styles (Builder A).
   Discreet floating pill + login modal + edit-mode chrome. Uses the
   notebook-theme variables from style.css (--cream, --ink, --cherry,
   --paper-line, --radius-lg, --border-soft). */

/* ---------- floating pill ---------- */
#edit-site-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  box-shadow: 0 2px 8px rgba(58, 51, 53, 0.14);
  cursor: pointer;
  opacity: 0.85;
}
#edit-site-btn:hover,
#edit-site-btn:focus-visible {
  opacity: 1;
  color: var(--cherry);
  border-color: var(--cherry);
}
body.editing #edit-site-btn { display: none; }

/* M28: owner-mode/public-view pill — same family as the Edit pill, seated
   to its left. On /owner, owner.css re-seats it at the corner (the Edit
   pill is hidden there — nothing to edit on an admin page). */
#owner-mode-btn {
  position: fixed;
  right: 116px;
  bottom: 18px;
  z-index: 900;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  box-shadow: 0 2px 8px rgba(58, 51, 53, 0.14);
  cursor: pointer;
  opacity: 0.85;
  text-decoration: none;
}
#owner-mode-btn:hover,
#owner-mode-btn:focus-visible {
  opacity: 1;
  color: var(--cherry);
  border-color: var(--cherry);
}
body.editing #owner-mode-btn { display: none; }
@media (max-width: 700px) {
  /* stack above the Edit pill on phones instead of widening the
     bottom-right row (the footer consult link lives close by there) */
  #owner-mode-btn { right: 18px; bottom: 58px; }
}

/* M45 (Wyatt): "Bookings" pill — preview affordance to the private
   /bookings page, same family as Owner mode/Edit site, seated to
   Owner mode's left (leftmost of the three: Bookings · Owner mode ·
   Edit site). Rendered only when OWNER_UI is on and only on non-owner
   pages (see base.html). */
#bookings-btn {
  position: fixed;
  /* 236px, not the arithmetic 214px: the Owner mode pill is ~107px wide,
     so 214 overlapped it by 9px (caught by the M45 battery's bbox check).
     236 leaves a 12px gap, matching the Owner-mode↔Edit-site spacing. */
  right: 236px;
  bottom: 18px;
  z-index: 900;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  box-shadow: 0 2px 8px rgba(58, 51, 53, 0.14);
  cursor: pointer;
  opacity: 0.85;
  text-decoration: none;
}
#bookings-btn:hover,
#bookings-btn:focus-visible {
  opacity: 1;
  color: var(--cherry);
  border-color: var(--cherry);
}
body.editing #bookings-btn { display: none; }
@media (max-width: 700px) {
  /* stack above the Owner mode pill on phones, same reasoning as M28 */
  #bookings-btn { right: 18px; bottom: 98px; }
}

/* M65: "NC · Yoga" / "NC · Coaching" pills — preview affordance for the
   two hidden new-client signing pages, same family as Bookings/Owner
   mode/Edit site, seated further left (leftmost of the five: NC ·
   Coaching · NC · Yoga · Bookings · Owner mode · Edit site). */
#nc-yoga-btn {
  position: fixed;
  right: 356px;
  bottom: 18px;
  z-index: 900;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  box-shadow: 0 2px 8px rgba(58, 51, 53, 0.14);
  cursor: pointer;
  opacity: 0.85;
  text-decoration: none;
  white-space: nowrap;
}
#nc-coaching-btn {
  position: fixed;
  right: 482px;
  bottom: 18px;
  z-index: 900;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  box-shadow: 0 2px 8px rgba(58, 51, 53, 0.14);
  cursor: pointer;
  opacity: 0.85;
  text-decoration: none;
  white-space: nowrap;
}
#nc-yoga-btn:hover, #nc-yoga-btn:focus-visible,
#nc-coaching-btn:hover, #nc-coaching-btn:focus-visible {
  opacity: 1;
  color: var(--cherry);
  border-color: var(--cherry);
}
body.editing #nc-yoga-btn, body.editing #nc-coaching-btn { display: none; }
@media (max-width: 700px) {
  /* stack above the Bookings pill on phones, same reasoning as M28/M45 */
  #nc-yoga-btn { right: 18px; bottom: 138px; }
  #nc-coaching-btn { right: 18px; bottom: 178px; }
}

/* ---------- shared buttons ---------- */
.edit-btn {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.edit-btn:hover { border-color: var(--cherry); color: var(--cherry); }
.edit-btn-primary {
  background: var(--cherry);
  border-color: var(--cherry);
  color: #fff;
  font-weight: 600;
}
.edit-btn-primary:hover {
  background: var(--cherry-dark);
  border-color: var(--cherry-dark);
  color: #fff;
}

/* ---------- login modal ---------- */
.edit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(58, 51, 53, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.edit-modal {
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(58, 51, 53, 0.25);
  padding: 1.4rem 1.5rem;
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.edit-modal-title {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}
.edit-modal input[type="password"] {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  width: 100%;
}
.edit-modal input[type="password"]:focus {
  outline: 2px solid var(--cherry);
  outline-offset: 1px;
}
.edit-modal-error {
  margin: 0;
  font-size: 0.8rem;
  color: var(--cherry);
}
.edit-modal-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.edit-modal.shake { animation: edit-shake 0.4s ease-in-out; }
@keyframes edit-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ---------- edit mode ---------- */
[data-ed][contenteditable="true"] {
  outline: 2px dashed var(--cherry);
  outline-offset: 3px;
  border-radius: 2px;
  cursor: text;
  min-height: 1em;
}
[data-ed][contenteditable="true"]:focus {
  outline-style: solid;
  background: rgba(166, 38, 57, 0.05);
}

.edit-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  background: var(--cream);
  border-top: 1px solid var(--paper-line);
  box-shadow: 0 -2px 10px rgba(58, 51, 53, 0.12);
}
body.editing { padding-bottom: 72px; } /* keep the footer clear of the toolbar */

@media (max-width: 760px) {
  .edit-btn { padding: 0.6rem 1rem; } /* comfortable tap targets */
}

/* ---------- M13: photo add/remove controls ----------
   Injected into every [data-photo-page] element (the populated <figure>
   or the empty .ph placeholder — both are position:relative already) as
   a small overlay in the top-left corner, clear of the counter chip
   (bottom-right) and cycle arrows (mid-left/right). Only appended while
   body.editing, so no z-index fighting with the arrows outside edit
   mode. */
.edit-photo-controls {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.edit-photo-controls .edit-btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  box-shadow: 0 2px 8px rgba(58, 51, 53, 0.14);
}
.edit-photo-controls .edit-photo-remove:hover { color: var(--cherry); }

/* ---------- M83: Tier-2 legal-document edit control ----------
   Injected into every [data-legal-edit] sheet (the doc-versions
   engine's own template, new_client.html) only while body.editing —
   same "appended by JS on enterEditMode, torn down on exit" law as the
   M13 photo controls above, never present in the page's static HTML.
   ".nc-legal-panel" is the "editor-panel family" the spec calls for:
   same cream/paper-line/radius-lg/shadow language as .edit-modal. */
.nc-legal-edit-btn {
  display: block;
  margin: 0.9rem auto 0;
  font-size: 0.78rem;
  padding: 0.35rem 0.8rem;
}
.nc-legal-panel {
  margin-top: 0.9rem;
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(58, 51, 53, 0.16);
  padding: 1rem 1.1rem;
}
.nc-legal-panel textarea {
  width: 100%;
  min-height: 16rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  resize: vertical;
  box-sizing: border-box;
}
.nc-legal-panel textarea:focus {
  outline: 2px solid var(--cherry);
  outline-offset: 1px;
}
.nc-legal-panel-hint {
  margin: 0.6rem 0;
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.75;
}
.nc-legal-panel-error {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--cherry);
}
.nc-legal-panel-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.6rem;
}
/* the doc's own contenteditable [data-ed] fields (none today, titles
   stay code) would otherwise dashed-outline right up against the panel
   — no such elements exist inside [data-legal-edit] yet, but keep the
   sheet's edit affordance visually separated regardless. */
[data-legal-edit] { position: relative; }

/* ---------- M13: error toast (reuses .edit-modal's look, not its
   overlay — small, auto-dismissing, never a raw alert()) ---------- */
.edit-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--cream);
  border: 1px solid var(--cherry);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(58, 51, 53, 0.25);
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  max-width: min(320px, calc(100% - 2rem));
  text-align: center;
}