/* Increasink Bio Card, tampilan mode sunting.
   Semua kelas diawali ed- supaya tidak pernah bentrok dengan gaya kartu. */

/* ---------- strip bawah ---------- */
.ed-bar{
  flex:none;background:var(--ink);color:var(--cream);
  padding-bottom:env(safe-area-inset-bottom);
  font-family:var(--b);
}

.ed-bar{display:flex;flex-direction:column;gap:9px;padding:11px 14px}
.ed-nav{display:flex;align-items:center;gap:6px}
.ed-cur{
  flex:1;text-align:center;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-mu);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ed-ico{
  width:28px;height:28px;flex:none;border:1px solid var(--cream-line);background:none;
  color:var(--cream);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ed-ico:disabled{opacity:.25;cursor:default}
.ed-acts{display:flex;gap:7px}
.ed-btn{
  flex:1;font-family:var(--b);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 6px;cursor:pointer;border:1px solid var(--cream-line);
  background:none;color:var(--cream);transition:.16s;
}
.ed-btn:hover{border-color:var(--gold)}
.ed-btn.primary{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600}
.ed-btn.primary:disabled{opacity:.5;cursor:default}
.ed-btn.dot::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;margin-left:7px;vertical-align:middle}
.ed-btn.danger{color:#E8836F;border-color:rgba(232,131,111,.4)}

/* footer kartu disembunyikan saat menyunting, navigasi pindah ke ed-bar */
.app.editing .foot{display:none}

/* ---------- teks yang bisa disunting ---------- */
.app.editing [data-e]{
  outline:1px dashed rgba(176,137,60,.45);outline-offset:3px;
  border-radius:2px;cursor:text;transition:outline-color .16s;
}
.app.dark.editing [data-e]{outline-color:rgba(243,239,227,.32)}
.app.editing [data-e]:hover{outline-color:var(--gold)}
.app.editing [data-e]:focus{
  outline:2px solid var(--gold);outline-offset:3px;
  background:var(--gold-tint);
}
.app.editing [data-e]:empty::before{
  content:attr(data-ph);opacity:.45;font-style:italic;
}

/* ---------- item yang bisa digeser ---------- */
.app.editing [data-arr] > *,
.app.editing [data-ord] > *{position:relative;touch-action:none}
.app.editing [data-arr] > .ed-add,
.app.editing [data-ord] > .ed-add{touch-action:auto}

@keyframes edjiggle{
  0%{transform:rotate(-.6deg)}
  50%{transform:rotate(.6deg)}
  100%{transform:rotate(-.6deg)}
}
.app.editing [data-arr] > *:not(.ed-add),
.app.editing [data-ord] > *:not(.ed-add){
  animation:edjiggle .28s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.09s);
}
@media (prefers-reduced-motion: reduce){
  .app.editing [data-arr] > *,
  .app.editing [data-ord] > *{animation:none}
}

/* Pilar GAINS terlalu besar untuk digoyang dan mengunci scroll.
   Yang goyang dan jadi pegangan hanya kotak hurufnya. */
.app.editing .acc > .acc-i{touch-action:auto;animation:none}
.app.editing .acc-i .acc-l{
  touch-action:none;cursor:grab;
  animation:edjiggle .28s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.09s);
}
@media (prefers-reduced-motion: reduce){
  .app.editing .acc-i .acc-l{animation:none}
}

.ed-drag{
  animation:none !important;pointer-events:none;z-index:20;
  box-shadow:0 12px 28px rgba(20,16,10,.3);opacity:.95;
}
.ed-shift{transition:transform .18s cubic-bezier(.3,.9,.3,1)}

.ed-x{
  position:absolute;top:-8px;right:-8px;width:19px;height:19px;z-index:6;
  border:none;border-radius:50%;background:var(--ink);color:#fff;
  font-size:13px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  animation:none !important;
}
.app.dark.editing .ed-x{background:var(--cream);color:var(--ink)}
.ed-add{
  font-family:var(--b);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px dashed var(--gold-soft);background:none;color:var(--gold-d);
  padding:6px 12px;cursor:pointer;animation:none !important;
}
.ed-add:hover{border-color:var(--gold);border-style:solid}
.app.editing ul.list > .ed-add{display:block;margin:10px 0 0 -18px;list-style:none}
.app.editing .facts > .ed-add{margin-top:10px;width:100%}
.app.editing .pins > .ed-add{padding:4px 9px;font-size:10px;align-self:center}
/* .cover .pins ditarik naik 10px di tampilan biasa. Di mode sunting tarikan itu
   membuatnya menimpa tombol Ganti gambar milik foto cover, jadi dikembalikan. */
.app.editing .cover .pins{margin-top:16px}

/* ---------- lembar (login, urutan, konfirmasi) ---------- */
.ed-sheet{
  position:absolute;inset:0;z-index:90;display:flex;align-items:flex-end;
  background:rgba(10,10,10,.55);backdrop-filter:blur(3px);
  animation:edfade .18s ease both;
}
@keyframes edfade{from{opacity:0}to{opacity:1}}
.ed-box{
  width:100%;background:var(--paper);color:var(--ink);
  padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));
  max-height:88%;overflow-y:auto;
  animation:edup .26s cubic-bezier(.25,.85,.3,1) both;
}
@keyframes edup{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.ed-h{
  font-family:var(--h);font-weight:600;text-transform:uppercase;
  font-size:16px;letter-spacing:.09em;margin-bottom:6px;
}
.ed-sub{font-size:13px;line-height:1.55;color:var(--mu);margin-bottom:16px}
.ed-input{
  width:100%;font-family:var(--b);font-size:15px;padding:12px 13px;
  border:1px solid var(--line);background:var(--tint);color:var(--ink);
}
.ed-input:focus{outline:none;border-color:var(--gold)}
.ed-err{font-size:12.5px;color:#B3402A;margin-top:9px;display:none}
.ed-err.show{display:block}
.ed-row{display:flex;gap:8px;margin-top:16px}
.ed-row .ed-btn{border-color:var(--line);color:var(--ink)}
.ed-row .ed-btn.primary{color:#fff}
.ed-col{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.ed-col .ed-btn{border-color:var(--line);color:var(--ink)}
.ed-col .ed-btn.primary{color:#fff}
/* .ed-col .ed-btn di atas menang atas .ed-btn.danger, jadi merahnya dikembalikan di sini */
.ed-col .ed-btn.danger{color:#B3402A;border-color:rgba(179,64,42,.42)}
.ed-sep{height:1px;background:var(--line);margin:18px 0 2px}

/* ---------- kartu slide Kenalan ---------- */
.ed-thumb{
  flex:none;width:34px;height:42px;background:var(--line);
  background-size:cover;background-position:center;
}
.ed-tile-t em{
  display:block;font-style:normal;font-size:11px;line-height:1.5;
  color:var(--mu);word-break:break-all;
}
.ed-del{font-size:18px;line-height:1;color:var(--mu)}

/* ---------- kartu urutan section ---------- */
.ed-tiles{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ed-tile{
  display:flex;align-items:center;gap:12px;padding:14px 13px;
  border:1px solid var(--line);background:var(--tint);
  touch-action:none;position:relative;user-select:none;
}
.ed-tile.off{opacity:.42}
.ed-tile.off .ed-tile-t{text-decoration:line-through}
.ed-tile-t{flex:1;font-size:14px}
.ed-grip{
  flex:none;width:14px;height:10px;
  background:
    linear-gradient(var(--dm),var(--dm)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--dm),var(--dm)) 0 4px/100% 2px no-repeat,
    linear-gradient(var(--dm),var(--dm)) 0 8px/100% 2px no-repeat;
}
.ed-eye{
  flex:none;width:30px;height:30px;border:1px solid var(--line);background:none;
  color:var(--mu);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ed-eye svg{width:16px;height:16px}
.ed-tiles .ed-tile{animation:none}
.ed-tiles.ed-live .ed-tile:not(.ed-drag){animation:edjiggle .28s ease-in-out infinite}

/* ---------- pesan singkat ---------- */
.ed-toast{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%);
  z-index:95;max-width:88%;
  background:var(--ink);color:var(--cream);
  font-size:12.5px;line-height:1.5;padding:11px 15px;
  animation:edup .2s ease both;
}
.ed-toast.good{background:#1F4A32}
.ed-toast.bad{background:#7A2A1C}

/* ---------- tombol + ala Apple dan menunya ---------- */
.ed-bar{position:relative}
.ed-fab{
  position:absolute;right:16px;bottom:calc(100% + 16px);z-index:30;
  width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--b);font-size:30px;font-weight:300;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .22s cubic-bezier(.3,.9,.3,1);
}
.ed-fab.on{transform:rotate(45deg)}
.app.dark .ed-fab{background:var(--cream);color:var(--ink)}
.ed-menu{
  position:absolute;right:16px;bottom:calc(100% + 80px);z-index:31;
  min-width:210px;padding:6px;border-radius:16px;color:var(--ink);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  transform-origin:bottom right;animation:edpop .2s cubic-bezier(.25,.85,.3,1) both;
}
@keyframes edpop{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}
.ed-menu button{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:none;border-radius:10px;
  background:none;color:var(--ink);font-family:var(--b);font-size:16px;letter-spacing:-.02em;
  text-align:left;cursor:pointer;
}
.ed-menu button:hover{background:rgba(0,0,0,.05)}
.ed-menu svg{width:20px;height:20px;flex:none}

/* ---------- blok tambahan ---------- */
/* blok besar tidak digoyang dan tidak mengunci scroll, pegangannya bulatan kiri atas */
.app.editing .blocks > .blk{touch-action:auto;animation:none}
.app.editing .blocks > .blk:empty{min-height:40px;border:1px dashed var(--line-s);border-radius:var(--r-s)}
.ed-grip-h{
  position:absolute;top:-9px;left:-9px;width:24px;height:24px;z-index:6;border-radius:50%;
  background:
    linear-gradient(#fff,#fff) center 8px/10px 1.5px no-repeat,
    linear-gradient(#fff,#fff) center 11.25px/10px 1.5px no-repeat,
    linear-gradient(#fff,#fff) center 14.5px/10px 1.5px no-repeat,
    var(--ink);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75);
  touch-action:none;cursor:grab;
  animation:edjiggle .28s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .ed-grip-h{animation:none} }
.ed-img-btn{display:block;margin:12px auto 0}
/* pegangan jangan menutupi huruf pertama blok teks */
.app.editing .blk-text .p{padding-left:22px}

/* lembar editor ikut dikunci selebar isi kartu di layar lebar */
@media(min-width:560px){
  .ed-box,
  .ed-bar{max-width:var(--col);margin-inline:auto;width:100%}
}

/* toolbar Bold dan Hapus item di atas teks yang sedang disunting */
.ed-fmt{
  position:fixed;z-index:60;display:flex;gap:6px;padding:5px;
  background:var(--ink);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.ed-fmt button{
  font-family:var(--b);font-size:14px;min-width:36px;height:32px;padding:0 12px;
  border:none;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  touch-action:manipulation;
}
.ed-fmt button[data-f="del"]{background:#FF3B30}