/* editor.css — chrome for Edit Mode only.
   Nothing in here paints a single pixel until .is-editing is on the body. The
   way in is the "Admin user sign on" link in the footer, which is ordinary page
   styling and lives in site.css. */

.ed-file{position:fixed;left:-9999px;width:1px;height:1px;opacity:0}

/* While the pack intro is playing it owns the screen — the intro has its own
   SKIP button and the edit chrome would just float on top of it. */
body.intro-on .ed-bar,
body.intro-on .ed-panel{display:none}

/* ---------------------------------------------------------------- toolbar

   One box, top right. Done lives on it, so nothing else floats on the page. */

/* Hidden by default and shown ONLY to a signed-in admin.

   Two locks on purpose. `hidden` is what the JS toggles, but an author
   `display` on this class beats the browser's own [hidden]{display:none} —
   which is exactly how a live edit toolbar ended up sitting on the public
   page. The body flag is the lock that does not depend on getting that right:
   nothing adds .is-editing except a successful sign-on. */
.ed-bar{
  position:fixed;top:12px;right:12px;z-index:205;
  display:none;
  align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  max-width:calc(100vw - 24px);
  background:#fff;border:1px solid var(--hair);padding:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}
body.is-editing .ed-bar:not([hidden]){display:flex}

.ed-pill{
  font:500 9px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--hair);padding:8px 10px;white-space:nowrap;
}
.ed-pill.is-dirty{color:#8a5b00;border-color:var(--gold);background:#fffaf0}

.ed-bar-btn{
  font:500 11px/1 var(--f-body);
  color:var(--ink);background:#fff;border:1px solid var(--hair);
  padding:9px 12px;cursor:pointer;white-space:nowrap;
}
.ed-bar-btn:hover:not(:disabled){border-color:var(--ink)}
.ed-bar-btn:disabled{color:#c4c4c8;cursor:default}
.ed-bar-btn.is-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.ed-bar-btn.is-primary:hover{background:#1b5e9f;border-color:#1b5e9f}
/* Only phones fold the toolbar — see the small-screens block at the foot. */
.ed-bar-btn.ed-more{display:none}

/* ---------------------------------------------------------------- editable text */

body.is-editing .ed-txt{
  outline:1px dashed rgba(36,113,188,.45);outline-offset:2px;
  cursor:text;min-width:14px;min-height:1em;
}
body.is-editing .ed-txt:hover{outline-color:var(--blue);background:rgba(36,113,188,.06)}
body.is-editing .ed-txt:focus{outline:2px solid var(--blue);outline-offset:2px;background:rgba(36,113,188,.08)}
.sec-dark .ed-txt:hover,.hero .ed-txt:hover,.panel-buy .ed-txt:hover{background:rgba(255,255,255,.1)}

/* ---------------------------------------------------------------- item rails */

body.is-editing .ed-item{position:relative}
.ed-rail{
  position:absolute;top:6px;right:6px;z-index:12;
  display:flex;align-items:center;gap:3px;flex-wrap:wrap;justify-content:flex-end;
  padding:3px;background:rgba(255,255,255,.96);border:1px solid var(--hair);
  box-shadow:0 4px 14px rgba(0,0,0,.14);
  opacity:0;pointer-events:none;transition:opacity .12s ease;
}
body.is-editing .ed-item:hover > .ed-rail,
body.is-editing .ed-item:focus-within > .ed-rail{opacity:1;pointer-events:auto}

.ed-rail-btn{
  font:500 11px/1 var(--f-body);color:var(--ink);
  background:#fff;border:1px solid var(--hair);padding:6px 8px;cursor:pointer;
}
.ed-rail-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.ed-rail-btn:disabled{color:#c9c9cd;cursor:default}
.ed-rail-btn.ed-prop{font-size:10px;letter-spacing:.04em}
.ed-rail-btn.ed-prop.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ed-prop-sel{
  font:500 10px/1 var(--f-body);color:var(--ink);
  background:#fff;border:1px solid var(--hair);padding:6px;cursor:pointer;
}

.ed-addend{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:64px;padding:16px;
  font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);background:transparent;
  border:1px dashed var(--hair);cursor:pointer;
}
.ed-addend:hover{border-color:var(--blue);color:var(--blue);background:rgba(36,113,188,.05)}
.sec-dark .ed-addend,.hero .ed-addend{border-color:var(--line-dark);color:var(--grey-dk)}
.sec-dark .ed-addend:hover{border-color:var(--gold);color:var(--gold);background:rgba(244,200,48,.08)}
.gal-grid .ed-addend{grid-column:span 2}
/* Inline lists (nav, socials, stats, hours) can't afford a 64px-tall tile. */
.nav-links .ed-addend,
.socials .ed-addend,
.stats .ed-addend,
.hours .ed-addend,
.rows .ed-addend{min-height:0;padding:8px 12px;list-style:none}

/* ---------------------------------------------------------------- section rail

   Sits top-LEFT so it never collides with the item rails, which are top-right. */

body.is-editing .ed-section{position:relative}
.ed-srail{
  position:absolute;top:8px;left:8px;z-index:14;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:4px 4px 4px 10px;
  background:rgba(255,255,255,.97);border:1px solid var(--hair);
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  opacity:0;pointer-events:none;transition:opacity .12s ease;
}
body.is-editing .ed-section:hover > .ed-srail,
body.is-editing .ed-section:focus-within > .ed-srail{opacity:1;pointer-events:auto}
.ed-srail-name{
  font:500 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);padding-right:6px;white-space:nowrap;
}

/* ---------------------------------------------------------------- sections panel */

.ed-seclist{display:flex;flex-direction:column;gap:5px}
.ed-secrow{
  display:flex;align-items:center;gap:6px;
  padding:6px;border:1px solid var(--hair);background:#fff;
}
.ed-secnum{font:500 10px/1 var(--f-mono);letter-spacing:.1em;color:var(--blue);flex:none}
.ed-secname{font:500 12px/1.2 var(--f-body);color:var(--ink);flex:1;min-width:0}
.ed-secadd{display:flex;flex-direction:column;gap:6px}
.ed-secadd .ed-bar-btn{text-align:left}

/* ---------------------------------------------------------------- links */

.ed-linkbtn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:6px;vertical-align:middle;
  font-size:10px;line-height:1;
  background:#fff;border:1px solid var(--hair);color:var(--ink);
  padding:3px 5px;cursor:pointer;
}
.ed-linkbtn:hover{border-color:var(--blue)}

/* ---------------------------------------------------------------- images */

.slot::after{pointer-events:none}
body.is-editing .slot{outline:1px dashed rgba(36,113,188,.4);outline-offset:-1px}
body.is-editing .slot.ed-drop{outline:2px solid var(--blue);outline-offset:-2px}

.ed-imgbar{
  position:absolute;left:6px;bottom:6px;z-index:12;
  display:flex;gap:3px;flex-wrap:wrap;
  opacity:0;pointer-events:none;transition:opacity .12s ease;
}
body.is-editing .slot:hover .ed-imgbar,
body.is-editing .slot:focus-within .ed-imgbar{opacity:1;pointer-events:auto}
.ed-imgbtn{
  font:500 10px/1 var(--f-body);color:var(--ink);
  background:rgba(255,255,255,.96);border:1px solid var(--hair);
  padding:6px 8px;cursor:pointer;
}
.ed-imgbtn:hover{border-color:var(--blue);color:var(--blue)}
/* Fit is a toggle, so it shows its state rather than the action it performs. */
.ed-imgbtn.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.ed-imgbtn.is-on:hover{color:#fff}

/* ---------------------------------------------------------------- panels */

.ed-panel{
  /* Clears the toolbar, which now starts at 12px rather than 52px. */
  position:fixed;top:64px;right:12px;z-index:206;
  width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 88px);overflow:auto;
  background:#fff;border:1px solid var(--hair);padding:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.2);
  display:flex;flex-direction:column;gap:10px;
}
.ed-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  padding-bottom:8px;border-bottom:1px solid var(--hair);
}
.ed-panel-x{background:transparent;border:0;font-size:12px;cursor:pointer;color:var(--grey);padding:2px 4px}
.ed-panel-x:hover{color:var(--ink)}
.ed-sub{
  font:500 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  padding-top:8px;border-top:1px solid var(--hair);
}
.ed-row{display:flex;flex-direction:column;gap:5px}
.ed-label{font:500 11px/1.3 var(--f-body);color:var(--grey-d)}
.ed-input{
  font:400 13px/1.3 var(--f-body);color:var(--ink);
  background:#fff;border:1px solid var(--hair);padding:9px 10px;width:100%;
}
.ed-input:focus{outline:2px solid var(--blue);outline-offset:-1px}
.ed-hint{font:400 12px/1.5 var(--f-body);color:var(--grey);margin-bottom:8px}
.ed-warn{
  font:400 12px/1.5 var(--f-body);color:#8a5b00;
  background:#fffaf0;border:1px solid var(--gold);padding:9px 10px;margin-bottom:8px;
}

.ed-color{display:flex;align-items:center;gap:8px}
.ed-swatch{width:38px;height:34px;padding:0;border:1px solid var(--hair);background:#fff;cursor:pointer;flex:none}
.ed-hex{flex:1;font-family:var(--f-mono);font-size:12px}

.ed-toggle{
  align-self:flex-start;
  font:500 11px/1 var(--f-body);color:var(--grey-d);
  background:#fff;border:1px solid var(--hair);padding:8px 14px;cursor:pointer;
}
.ed-toggle.is-on{background:var(--blue);border-color:var(--blue);color:#fff}

.ed-marks{display:flex;gap:8px;flex-wrap:wrap}
.ed-mark{
  width:52px;height:52px;padding:5px;cursor:pointer;
  background:var(--mist);border:1px solid var(--hair);
}
.ed-mark:hover{border-color:var(--blue)}
.ed-mark img{width:100%;height:100%;object-fit:contain}

/* ---------------------------------------------------------------- modal */

.ed-modal{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,10,12,.55);
}
.ed-modal-box{
  width:min(420px,100%);background:#fff;border:1px solid var(--hair);padding:20px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.ed-modal-title{font:400 22px/1.1 var(--f-display);text-transform:uppercase;color:var(--ink)}
.ed-modal-slot{display:flex;flex-direction:column}
.ed-modal-err{font:400 12px/1.4 var(--f-body);color:#A4282C}
.ed-modal-err:empty{display:none}
.ed-modal-row{display:flex;gap:8px;justify-content:flex-end}

/* ---------------------------------------------------------------- stale draft */

.ed-stale{
  position:fixed;top:0;left:0;right:0;z-index:215;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;
  background:#fffaf0;border-bottom:1px solid var(--gold);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.ed-stale-txt{font:500 12px/1.5 var(--f-body);color:#8a5b00;flex:1;min-width:220px}

/* ---------------------------------------------------------------- toast */

.ed-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:230;
  font:500 12px/1.4 var(--f-body);color:#fff;background:var(--ink);
  padding:11px 16px;max-width:min(460px,calc(100vw - 32px));
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.ed-toast.is-on{opacity:1;transform:translate(-50%,0)}
.ed-toast.is-warn{background:#8a5b00}

/* ---------------------------------------------------------------- touch

   Every control in here was revealed by :hover, with :focus-within as the
   fallback. That fallback works for text — tapping the words focuses them and
   the rail appears — but an image slot holds nothing focusable, so on a phone
   the image bar could not be reached at all and photos were simply not
   editable. `hover:none` is the precise test: it is true when the primary input
   cannot hover, and false on a touchscreen laptop that also has a mouse. A
   desktop never sees any of this. */

@media (hover:none){
  body.is-editing .ed-rail,
  body.is-editing .ed-srail,
  body.is-editing .slot .ed-imgbar{opacity:1;pointer-events:auto}

  /* Fingers, not cursors. 44px is the floor Apple sets and every one of these
     was around 23px — with delete sitting flush against move-up. */
  .ed-rail-btn,.ed-imgbtn,.ed-prop-sel,.ed-linkbtn,.ed-panel-x{
    min-height:44px;min-width:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* iOS zooms the whole page in when you focus an input smaller than 16px, and
     never zooms back out. The passcode box is the first thing a phone touches
     in Edit Mode, so this one is the difference between signing in and
     fighting the browser. */
  .ed-input,.ed-textarea,.ed-prop-sel{font-size:16px}
  .ed-rail,.ed-imgbar{gap:6px}
  /* Remove is the one that cannot be taken back with a stray thumb. */
  .ed-rail-btn[data-danger]{margin-left:10px}
}

/* ---------------------------------------------------------------- small screens */

@media (max-width:640px){
  /* The toolbar moves to the bottom, where a thumb is, and keeps the three
     buttons that get used to one row. Everything else lives behind More — which
     also puts Discard well away from Publish, instead of flush beside it. */
  .ed-bar{
    top:auto;bottom:0;left:0;right:0;
    justify-content:space-between;flex-wrap:nowrap;
    max-width:none;border:0;border-top:1px solid var(--hair);
    padding:8px 10px;
    padding-bottom:max(8px, env(safe-area-inset-bottom));
    box-shadow:0 -8px 26px rgba(0,0,0,.14);
  }
  .ed-bar-btn{padding:12px 10px;min-height:44px}
  .ed-bar-btn.ed-more{display:inline-flex;align-items:center}
  .ed-pill{padding:12px 8px}
  /* Hidden by a class rather than removed, so the buttons keep working and the
     desktop layout is untouched. */
  .ed-bar .ed-more-hide{display:none}
  .ed-bar.is-more-open{flex-wrap:wrap;justify-content:flex-start;gap:6px}
  .ed-bar.is-more-open .ed-more-hide{display:inline-flex}

  /* Bottom sheet. dvh tracks the visible area as the keyboard comes up; vh is
     the fallback for anything that does not know it, and has to come first. */
  .ed-panel{
    top:auto;bottom:64px;left:12px;right:12px;width:auto;
    max-height:60vh;
    max-height:min(60dvh, calc(100dvh - 140px));
  }
  .ed-toast{bottom:76px}
  .ed-rail{top:4px;right:4px;gap:4px}

  /* Modals carry the passcode box, alt text, link editing and every delete
     confirmation — so all of them come with the keyboard up. Centred and
     unscrollable, the Save and Remove buttons sat behind it with no way to
     reach them. Top-aligned and scrollable, they stay reachable. */
  .ed-modal{
    align-items:flex-start;padding:16px 12px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ed-modal-box{
    margin:12px auto max(12px, env(safe-area-inset-bottom));
    max-height:none;
  }
  .ed-modal-row{justify-content:stretch}
  .ed-modal-row .ed-bar-btn{flex:1 1 0;justify-content:center}
}