/* ============================================================
   EDIT MODE — client review layer
   Activated only with ?edit=<token>. Never loads otherwise.
   ============================================================ */

.em-on [data-em]{
  outline:1px dashed rgba(184,151,58,.45);
  outline-offset:3px;
  border-radius:2px;
  transition:outline-color .15s, background .15s;
  cursor:text;
}
.em-on [data-em]:hover{
  outline-color:var(--gold);
  background:rgba(184,151,58,.06);
}
.em-on [data-em]:focus{
  outline:2px solid var(--gold);
  background:rgba(184,151,58,.10);
}
.em-on [data-em].em-changed{
  outline:2px solid var(--gold);
  background:rgba(184,151,58,.14);
}
.em-on [data-em].em-changed::after{
  content:"edited";
  position:absolute;
  transform:translate(6px,-14px);
  font:700 9px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-deep);
  background:var(--paper);
  padding:3px 5px;
  border-radius:2px;
  pointer-events:none;
}
.em-on [data-em]{position:relative}

/* dark sections need a lighter dashed line */
.em-on .nathan [data-em]{outline-color:rgba(184,151,58,.55)}
.em-on .nathan [data-em]:hover{background:rgba(184,151,58,.12)}

/* ---- toolbar ---- */
.em-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; align-items:center; gap:14px;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--ink); color:var(--paper);
  box-shadow:0 -12px 40px -18px rgba(12,10,7,.6);
  font-family:var(--sans);
}
.em-bar .em-brand{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.em-bar .em-count{
  font-size:13px; color:rgba(244,240,230,.72); flex:1; min-width:0;
}
.em-bar .em-count b{color:var(--paper)}
.em-btn{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:12px 20px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:.18s; white-space:nowrap;
}
.em-send{background:var(--gold); color:var(--bone)}
.em-send:hover{background:#D4B454}
.em-send:disabled{opacity:.4; cursor:default}
.em-ghost{background:none; color:rgba(244,240,230,.7); border-color:rgba(244,240,230,.28)}
.em-ghost:hover{color:var(--paper); border-color:var(--paper)}

body.em-on{padding-bottom:78px}
@media(max-width:640px){
  .em-bar{flex-wrap:wrap; gap:10px}
  .em-bar .em-brand{width:100%}
  .em-bar .em-count{flex:1 1 100%; order:3; font-size:12px}
  .em-btn{flex:1; text-align:center; padding:13px 12px}
  body.em-on{padding-bottom:150px}
}

/* ---- notes panel ---- */
.em-note-btn{
  position:fixed; right:18px; bottom:96px; z-index:299;
  width:52px; height:52px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  font-size:20px; line-height:1;
  box-shadow:0 14px 34px -16px rgba(12,10,7,.5);
}
@media(max-width:640px){ .em-note-btn{bottom:166px} }

.em-panel{
  position:fixed; inset:0; z-index:310; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.em-panel.open{display:flex}
.em-panel .sc{position:absolute; inset:0; background:rgba(12,10,7,.6)}
.em-panel .bx{
  position:relative; z-index:1; width:100%; max-width:520px;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:30px; box-shadow:0 40px 90px -30px rgba(12,10,7,.55);
}
.em-panel h3{font-size:20px; font-weight:900; letter-spacing:-.02em; margin-bottom:8px}
.em-panel p{font-size:14px; color:var(--mute); margin-bottom:18px}
.em-panel textarea{
  width:100%; min-height:150px; background:#FCFAF5; border:1px solid var(--line);
  color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55;
  padding:14px 16px; border-radius:2px; resize:vertical;
}
.em-panel textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash)}
.em-panel .row{display:flex; gap:10px; margin-top:18px}
.em-panel .row .em-btn{flex:1}
.em-panel .em-ghost{color:var(--mute); border-color:var(--line)}
.em-panel .em-ghost:hover{color:var(--ink); border-color:var(--ink)}

/* ---- sent state ---- */
.em-sent{
  position:fixed; inset:0; z-index:320; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(12,10,7,.72);
}
.em-sent.open{display:flex}
.em-sent .bx{
  background:var(--paper); border-radius:4px; padding:40px 34px;
  max-width:460px; text-align:center;
}
.em-sent .tk{
  width:54px; height:54px; margin:0 auto 20px; border-radius:50%;
  background:var(--ink); color:var(--gold); display:grid; place-items:center; font-size:21px;
}
.em-sent h3{font-size:23px; font-weight:900; letter-spacing:-.02em; margin-bottom:10px}
.em-sent p{font-size:15px; color:var(--mute); margin-bottom:24px}
/* .em-ghost defaults to pale text/border for the dark toolbar (.em-bar) —
   this box has a light var(--paper) background, so without this override
   the Close button renders pale-on-cream, effectively invisible. */
.em-sent .em-ghost{color:var(--mute); border-color:var(--line)}
.em-sent .em-ghost:hover{color:var(--ink); border-color:var(--ink)}

@media(prefers-reduced-motion:reduce){ *{transition:none!important} }