/* layout-tune.css — in-context layout edit mode (admin-only). Namespaced
   ae-lt-*. Mirrors text-edit.css / photo-edit.css structure + palette.
   FAB stacked ABOVE both (photo-edit bottom:20px, text-edit bottom:64px). */
.ae-lt-fab {
  position: fixed; right: 20px; bottom: 108px; z-index: 99999;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Raleway', 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  color: #FAF8F4; background: #2E3D30; border: none; padding: 13px 18px;
  box-shadow: 0 8px 30px rgba(31,42,32,0.35); transition: opacity .18s;
}
.ae-lt-fab:hover { opacity: .9; }
.ae-lt-fab--on { background: #A0584D; }
.ae-lt-fab svg { width: 15px; height: 15px; }

/* Tunable-element affordance (only while edit mode is ON) */
.ae-lt-editable { cursor: pointer; outline: 1px dashed rgba(201,164,106,.55); outline-offset: 3px; transition: outline-color .15s, outline-width .15s; }
.ae-lt-editable:hover { outline-color: #C9A46A; outline-width: 2px; outline-style: solid; }
.ae-lt-editable--active { outline-color: #C9A46A; outline-width: 2px; outline-style: solid; }

/* Floating control panel — positioned near the clicked element via inline
   top/left (JS), clamped to the viewport. Not a full-screen modal like the
   other two editors: this one needs to stay visible ALONGSIDE the element
   it's tuning so the admin can see the live preview react. */
.ae-lt-panel {
  position: fixed; z-index: 100000; width: 280px; max-width: calc(100vw - 24px);
  background: #FFFFFF; border: 1px solid #DCDCDA; box-shadow: 0 24px 80px rgba(0,0,0,.22);
  font-family: 'Geist', 'Montserrat', sans-serif;
}
.ae-lt-panel__head { padding: 14px 16px 10px; border-bottom: 1px solid #DCDCDA; background: #FAFAF8; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ae-lt-panel__crumb { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #888; word-break: break-all; }
.ae-lt-panel__close { background: none; border: none; color: #888; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.ae-lt-panel__close:hover { color: #2E3D30; }
.ae-lt-panel__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

.ae-lt-row { display: flex; flex-direction: column; gap: 6px; }
.ae-lt-row__label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #888; }
.ae-lt-row__controls { display: flex; align-items: center; gap: 8px; }
.ae-lt-stepper { display: inline-flex; align-items: center; border: 1px solid #DCDCDA; }
.ae-lt-stepper button {
  width: 30px; height: 30px; border: none; background: #FAFAF8; color: #2E3D30;
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
}
.ae-lt-stepper button:hover { background: #EFEDE6; }
.ae-lt-stepper button:disabled { opacity: .4; cursor: default; }
.ae-lt-stepper__value { min-width: 48px; text-align: center; font-size: 12px; color: #1A1B1A; }

.ae-lt-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.ae-lt-choices button {
  flex: 1 1 auto; border: 1.5px solid #DCDCDA; background: #FFFFFF; color: #2E3D30;
  font-size: 11px; letter-spacing: .5px; padding: 7px 8px; cursor: pointer; font-family: inherit;
}
.ae-lt-choices button:hover { border-color: #A0584D; }
.ae-lt-choices button.is-active { background: #2E3D30; border-color: #2E3D30; color: #FAF8F4; }

.ae-lt-panel__foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 16px 16px; border-top: 1px solid #ECECEA; }
.ae-lt-reset { font-size: 11px; color: #A0584D; cursor: pointer; background: none; border: none; text-decoration: underline; font-family: inherit; padding: 0; }
.ae-lt-reset:hover { color: #8a4838; }
.ae-lt-btn { font-family: 'Raleway', 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; padding: 10px 18px; border: 1.5px solid #2E3D30; background: #2E3D30; color: #FAF8F4; }
.ae-lt-btn:hover { opacity: .9; }
.ae-lt-btn[disabled] { opacity: .5; cursor: default; }

/* Toast */
.ae-lt-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100001;
  background: #2E3D30; color: #FAF8F4; font-family: 'Raleway', 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 1px;
  padding: 12px 20px; box-shadow: 0 8px 30px rgba(31,42,32,.35); }
.ae-lt-toast--err { background: #A0584D; }